[WIP] Fix six UI problems in frontend files

[Copilot]

• Read and understand current state of all 4 files
• Problem 1: Fix .app-wrapper — remove max-width/margin, set width 100%, padding, box-sizing
• Problem 2: Update CSS color variables (--bg, --bg-card softer tones)
• Problem 3: Add .panels-row grid layout + wrap USER/MODEL panels in index.html
• Problem 4: Add Paste from clipboard + Clear buttons in persona bar (HTML + JS)
• Problem 5: Expand MODEL_FAMILIES with pro tiers + ★ markers in app.js
• Problem 6: Add "📁 Logs" button in status bar (HTML + JS + server.py endpoint)

Original prompt

UI Fixes — Round 3

Six specific problems to fix across frontend/style.css, frontend/index.html, and frontend/app.js.

---

Problem 1: Browser floating box

The .app-wrapper still renders as a floating box. Fix:

• Remove max-width entirely
• Remove margin: 0 auto
• Set padding: 0 24px 24px
• Set width: 100%
• box-sizing: border-box
• The app must stretch edge to edge of the browser window like a desktop app, not float as a centred card.

---

Problem 2: Bright white bleaching

White #ffffff and #f5f5f5 backgrounds are too harsh. Replace with softer tones:

:root {
  --bg: #f0f2f5;
  --bg-card: #f8f9fa;
  --bg-input: #ffffff;
  --accent: #1a73e8;
  --accent-hover: #1558b0;
  --accent-success: #188038;
  --accent-success-hover: #0d6b2e;
  --accent-warn: #e37400;
  --text: #1f1f1f;
  --text-dim: #5f6368;
  --text-muted: #9aa0a6;
  --border: #dadce0;
  --border-light: #e8eaed;
  --checkpoint-bg: #e8f0fe;
  --checkpoint-border: #1a73e8;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Consolas', 'Courier New', monospace;
}

The --bg is a soft grey-blue. Cards (--bg-card) are very light grey. Input fields are white but surrounded by soft grey page — contrast without harshness.

---

Problem 3: Same layout — make it feel like a real desktop app

The two panels (USER and MODEL) should sit side by side on wide screens, not stacked vertically one after another. On screens wider than 900px:

.panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

In index.html, wrap the USER panel div and MODEL panel div inside a <div class="panels-row">. The CHECKPOINT panel stays between them below the top bar, full width, visible when active.

On mobile (max-width 768px), stack back to single column.

---

Problem 4: User files link + copy/paste for personalisation

In the personalisation bar, currently there is a "Load from file" button that opens a file picker. Improve this:

1. Keep the file picker button — rename it to "📂 Load .md file"
2. Add a second button next to it: "📋 Paste from clipboard" — when clicked, reads clipboard text and pastes it into the personalisation textarea
3. Add a third button: "✕ Clear" — clears the personalisation textarea

These three buttons sit in a row in .persona-bar-footer.

In app.js:

// Paste from clipboard button
document.getElementById('paste-persona-btn').addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText();
    personaTextarea.value = text;
  } catch (e) {
    showError('Could not read clipboard. Please paste manually into the personalisation box.');
  }
});

// Clear button
document.getElementById('clear-persona-btn').addEventListener('click', () => {
  personaTextarea.value = '';
});

In index.html, add the two new buttons alongside the existing load button:

<button class="link-btn" id="load-file-btn">📂 Load .md file</button>
<button class="link-btn" id="paste-persona-btn">📋 Paste from clipboard</button>
<button class="link-btn" id="clear-persona-btn">✕ Clear</button>

---

Problem 5: Pro subscriptions + .md files visible in dropdown

The model dropdown currently shows basic variants. Expand it to show ALL variants including pro/premium tiers clearly labelled. Update MODEL_FAMILIES in app.js:

const MODEL_FAMILIES = [
  {
    family: "Claude",
    variants: [
      { label: "Claude Opus 4",        value: "claude-opus",    file: "claude-opus.md"   },
      { label: "Claude Sonnet 4",      value: "claude-sonnet",  file: "claude-sonnet.md" },
      { label: "Claude Sonnet 3.7",    value: "claude-sonnet",  file: "claude-sonnet.md" },
      { label: "Claude Sonnet 3.5",    value: "claude-sonnet",  file: "claude-sonnet.md" },
      { label: "Claude Haiku 3.5",     value: "claude-haiku",   file: "claude-haiku.md"  },
      { label: "Claude Haiku 3",       value: "claude-haiku",   file: "claude-haiku.md"  },
    ],
  },
  {
    family: "GPT-4",
    variants: [
      { label: "GPT-4.1",              value: "gpt-4o",         file: "gpt-4o.md"        },
      { label: "GPT-4o",               value: "gpt-4o",         file: "gpt-4o.md"        },
      { label: "GPT-4o mini",          value: "gpt-4o-mini",    file: "gpt-4o-mini.md"   },
      { label: "GPT-4 Turbo",          value: "gpt-4-turbo",    file: "gpt-4-turbo.md"   },
    ],
  },
  {
    family: "Gemini",
    variants: [
      { label: "Gemini 2.5 Pro",       value: "gemini-2.5-pro",   file: "gemini-2.5-pro.md"   },
      { label: "Gemini 2.5 Flash",     value: "gemini-2.0-flash", file: "gemini-2.0-flash.md" },
      { label: "Gemini 2.0 Flash",     value: "gemini-2.0-flash", file: "gemini-2.0-flash.md" },
      { label: "Gemini 1.5 Pro",       value: "gemini-2.5-pro",   file: "gemini-2.5-pro.md"   },
    ],
  },
  {
    family: "Mistral",
    variant...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>