Pup - the AI's own browser

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
  @font-face { font-family: 'Familjen Grotesk'; font-weight: 500; src: url(fg-500.woff2) format('woff2'); }
  @font-face { font-family: 'Familjen Grotesk'; font-weight: 700; src: url(fg-700.woff2) format('woff2'); }
  @font-face { font-family: 'Satoshi'; font-weight: 400; src: url(satoshi-400.woff2) format('woff2'); }
  @font-face { font-family: 'Satoshi'; font-weight: 500; src: url(satoshi-500.woff2) format('woff2'); }
  :root {
    color-scheme: dark;
    --bg: #0d1117; --surface: #161b22; --elevated: #1c2128; --overlay: #21262d;
    --border: #30363d; --text: #e6edf3; --text-body: #c9d1d9; --text-2: #8b949e;
    --accent: #00b8b1; --accent-hover: #00d4cb; --red: #f85149; --yellow: #d29922;
    --green: #3fb950;
  }
  body {
    margin: 0; width: 320px; background: var(--bg); color: var(--text-body);
    font: 400 13px 'Satoshi', sans-serif; border: 1px solid var(--border);
  }
  .hdr {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
    border-bottom: 1px solid var(--border); background: var(--surface);
  }
  .hdr svg.logo { width: 16px; height: 16px; color: var(--text); flex: none; }
  .hdr .t { font: 600 13px 'Familjen Grotesk', sans-serif; color: var(--accent); flex: none; }
  /* v2.0.147 (John: "give the ai-thread name more room, this is turning out to be really
     important"). The owning ai-thread is now the headline: it takes ALL the leftover header width
     (flex:1, was a cramped 116px cap that truncated "pup-dashboard"), the thread name itself is
     bold+brighter, and it can wrap to a second line rather than ellipsis-clipping a name the user
     needs to read. */
  .hdr .owner { flex: 1; min-width: 0; margin-left: 6px; text-align: right; font-size: 11px;
    color: var(--text-2); line-height: 1.25; }
  .owner b { color: var(--yellow); font-weight: 600; word-break: break-all; }
  .menu { padding: 6px; }
  button.row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; border-radius: 8px; color: var(--text-body);
    padding: 9px 10px; font: inherit; cursor: pointer; transition: background 0.15s ease;
  }
  button.row:hover { background: var(--elevated); }
  button.row svg { width: 16px; height: 16px; flex: none; color: var(--text); }
  button.row .kbd { margin-left: auto; font: 400 10px 'JetBrains Mono', monospace;
    color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
  button.row.danger { color: var(--red); }
  button.row.danger svg { color: var(--red); }
  .sep { height: 1px; background: var(--border); margin: 4px 8px; }
  .foot { padding: 7px 12px 9px; font: 400 10.5px 'JetBrains Mono', monospace; color: var(--text-2); }
  .foot .dot { color: var(--green); }
  .off { padding: 14px 12px; color: var(--text-2); font-size: 12px; display: none; }
</style>
</head>
<body>
  <div class="hdr">
    <svg class="logo" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <circle cx="7" cy="6" r="2.4"/><circle cx="15" cy="9.5" r="2.4"/>
      <circle cx="7" cy="13" r="2.4"/><circle cx="15" cy="16.5" r="2.4"/>
    </svg>
    <div class="t">Adom Pup</div>
    <div class="owner" id="owner">&hellip;</div>
  </div>
  <div class="menu" id="menu">
    <button class="row" data-act="annotate">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l1.5-4.5L16 5a2.1 2.1 0 0 1 3 3L8.5 18.5 4 20z"/><path d="M13.5 7.5l3 3"/></svg>
      Annotate this page<span class="kbd">Alt Shift A</span></button>
    <button class="row" data-act="snip">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/><rect x="8.5" y="8.5" width="7" height="7" rx="1" stroke-dasharray="2.5 2"/></svg>
      Snip a region</button>
    <div class="sep"></div>
    <button class="row" data-act="view">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor" stroke="none"/></svg>
      <span id="viewLabel">Switch to public view</span><span class="kbd">Alt Shift V</span></button>
    <button class="row" data-act="dashboard">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg>
      Open pup dashboard</button>
    <button class="row" data-act="info">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><path d="M12 11v5M12 8v.5"/></svg>
      Window info card</button>
    <button class="row" data-act="move">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4"/><path d="M14 4h6v6"/><path d="M20 4L11 13"/></svg>
      Move to my workspace</button>
    <div class="sep"></div>
    <button class="row danger" data-act="close">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
      Close this window</button>
  </div>
  <div class="off" id="off">The Adom toolbar is turned off in pup's Settings, or the pup bridge isn't running.</div>
  <div class="foot" id="foot"><span class="dot">&#9679;</span> pup connected</div>
  <script src="popup.js"></script>
</body>
</html>