mirror of
https://github.com/stablyai/orca.git
synced 2026-09-22 08:02:28 +00:00
chore: remove stray HTML mockup files from repo root (#1401)
Delete agent-nesting-options.html, agent-nesting-stacked.html, and agent-row-design.html — leftover design mockups not referenced anywhere in the codebase. Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
Jinjing
Orca
@@ -1,314 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Agent nesting — design options</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spinner {
|
||||
width: 8px; height: 8px;
|
||||
border: 1.5px solid #eab308;
|
||||
border-top-color: transparent;
|
||||
border-radius: 9999px;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
.spinner-sm {
|
||||
width: 7px; height: 7px;
|
||||
border: 1.5px solid #eab308;
|
||||
border-top-color: transparent;
|
||||
border-radius: 9999px;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral-950 p-8 text-neutral-200">
|
||||
<div class="mx-auto grid max-w-[1400px] grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- OPTION A: Rail + smaller icons -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">A. Vertical rail</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Single left rail anchors agents to the parent. No inner card, no divider. Icons 12px.</p>
|
||||
|
||||
<div class="w-[300px] rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<!-- Parent task -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably
|
||||
</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html</p>
|
||||
|
||||
<!-- Agents section -->
|
||||
<button class="mt-2 flex items-center gap-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500 hover:text-neutral-300">
|
||||
<svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
Agents · 2
|
||||
</button>
|
||||
|
||||
<!-- Rail container -->
|
||||
<div class="relative mt-1 pl-3">
|
||||
<span class="absolute left-1 top-1 bottom-1 w-px bg-neutral-800"></span>
|
||||
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] font-medium text-neutral-100">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="pl-5 -mt-0.5 pb-1 truncate text-[10.5px] leading-snug text-neutral-500">Who runs into the behavior change</div>
|
||||
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">just now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- OPTION B: Flush + status dot only -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">B. Flush rows, dot-only status</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Drop the agent avatar entirely. Status dot (6px) + title is enough. Indented 12px.</p>
|
||||
|
||||
<div class="w-[300px] rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably
|
||||
</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html</p>
|
||||
|
||||
<div class="mt-2 border-t border-neutral-800/80 pt-1.5">
|
||||
<div class="mb-0.5 flex items-center justify-between px-1.5">
|
||||
<span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500">Agents</span>
|
||||
<span class="text-[9.5px] text-neutral-600">2</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400"></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-200">Implement docs/peek</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500"></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- OPTION C: Inset panel -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">C. Inset panel</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Agents live in a slightly darker recessed block — feels like a drawer, not a card-in-card.</p>
|
||||
|
||||
<div class="w-[300px] rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably
|
||||
</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html</p>
|
||||
|
||||
<div class="mt-2 rounded-md bg-neutral-950/60 px-2 py-1.5 ring-1 ring-inset ring-neutral-800/60">
|
||||
<div class="mb-1 flex items-center justify-between">
|
||||
<span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500">Agents · 2</span>
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-600"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="group flex items-center gap-2 rounded px-1 py-0.5 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-200">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
|
||||
<div class="group flex items-center gap-2 rounded px-1 py-0.5 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- OPTION D: Inline summary (collapsed by default) -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">D. Inline summary row</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Default state is a compact one-line summary. Click to expand. Reduces visual noise when scrolling.</p>
|
||||
|
||||
<div class="w-[300px] rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably
|
||||
</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html</p>
|
||||
|
||||
<!-- collapsed -->
|
||||
<button class="mt-2 flex w-full items-center gap-2 rounded px-1.5 py-1 text-left hover:bg-neutral-800/60">
|
||||
<div class="flex -space-x-0.5">
|
||||
<span class="h-2 w-2 rounded-full bg-amber-400 ring-2 ring-neutral-900"></span>
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-neutral-900"></span>
|
||||
</div>
|
||||
<span class="text-[10.5px] text-neutral-400">2 agents · <span class="text-neutral-200">1 running</span></span>
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" class="ml-auto text-neutral-500"><path d="M9 6l6 6-6 6"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- example expanded below -->
|
||||
<div class="mt-3 border-t border-dashed border-neutral-800 pt-3">
|
||||
<p class="mb-1 text-[10px] uppercase tracking-wide text-neutral-600">Expanded state</p>
|
||||
<div class="space-y-px">
|
||||
<div class="flex items-center gap-2 rounded px-1.5 py-1">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-200">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 rounded px-1.5 py-1">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- OPTION E: Tree-branch connector -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">E. Tree branch</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Explicit hierarchy via L-connectors. Works well when nesting could grow deeper.</p>
|
||||
|
||||
<div class="w-[300px] rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably
|
||||
</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html</p>
|
||||
|
||||
<div class="mt-2">
|
||||
<button class="flex items-center gap-1 px-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500 hover:text-neutral-300">
|
||||
<svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
Agents · 2
|
||||
</button>
|
||||
|
||||
<div class="relative mt-0.5">
|
||||
<!-- first row -->
|
||||
<div class="relative flex items-center gap-2 rounded py-1 pl-6 pr-1.5 hover:bg-neutral-800/60">
|
||||
<svg class="absolute left-1.5 top-0 text-neutral-800" width="12" height="18" viewBox="0 0 12 18" fill="none" stroke="currentColor" stroke-width="1"><path d="M1 0 V9 H11"/></svg>
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-200">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<!-- last row -->
|
||||
<div class="relative flex items-center gap-2 rounded py-1 pl-6 pr-1.5 hover:bg-neutral-800/60">
|
||||
<svg class="absolute left-1.5 top-0 text-neutral-800" width="12" height="18" viewBox="0 0 12 18" fill="none" stroke="currentColor" stroke-width="1"><path d="M1 0 V9 H11"/></svg>
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- OPTION F: Stacked pills -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">F. Stacked pills</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Agents feel like chips anchored to the task. Good for 1–3 agents. Compact vertical footprint.</p>
|
||||
|
||||
<div class="w-[300px] rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably
|
||||
</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html</p>
|
||||
|
||||
<div class="mt-2 flex flex-col gap-1">
|
||||
<div class="flex items-center gap-1.5 rounded-md bg-neutral-800/60 py-1 pl-1.5 pr-1 hover:bg-neutral-800">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11px] text-neutral-100">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 rounded-md bg-neutral-800/60 py-1 pl-1.5 pr-1 hover:bg-neutral-800">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ================ Notes ================ -->
|
||||
<div class="mx-auto mt-10 max-w-[900px] rounded-lg bg-neutral-900 p-5 text-[12.5px] leading-6 text-neutral-300 ring-1 ring-neutral-800">
|
||||
<h3 class="mb-2 text-[13px] font-semibold text-neutral-100">What changed across every option</h3>
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li>Agent avatar shrunk: 14px sparkle → 11–12px status glyph. In most options the vendor sparkle is removed entirely; the state glyph carries the signal.</li>
|
||||
<li>No card-in-card. The inner "AGENTS" box with its own border is replaced by a rail, divider, inset panel, tree, or bare list.</li>
|
||||
<li>Indent aligned under the task title, not offset between icons.</li>
|
||||
<li>Row height: 22–24px instead of 30+.</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="mt-4 mb-2 text-[13px] font-semibold text-neutral-100">My pick</h3>
|
||||
<p><strong>A (rail)</strong> or <strong>B (flush + dot-only)</strong>. A still communicates "these belong to the parent" visually. B is the leanest — best if users rarely need to distinguish agent vendor at the child level.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,499 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Worktree cards — stacked list</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spinner-sm {
|
||||
width: 6px; height: 6px;
|
||||
border: 1.5px solid #eab308;
|
||||
border-top-color: transparent;
|
||||
border-radius: 9999px;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral-950 p-8 text-neutral-200">
|
||||
|
||||
<div class="mx-auto grid max-w-[1400px] grid-cols-1 gap-8 lg:grid-cols-4">
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- A. Vertical rail -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">A. Vertical rail</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Card breaks appear where agents exist.</p>
|
||||
|
||||
<div class="w-[300px] space-y-2">
|
||||
|
||||
<!-- Card: master (primary, pinned) -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: master w/ agents -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="ml-auto text-amber-400"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">switched x-automation home-timeline fetch to @JinjingLiang…</p>
|
||||
|
||||
<button class="mt-2 ml-[18px] flex items-center gap-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500 hover:text-neutral-300">
|
||||
<svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
Agents · 1
|
||||
</button>
|
||||
<div class="relative mt-1 ml-[18px] pl-3">
|
||||
<span class="absolute left-1 top-1 bottom-1 w-px bg-neutral-800"></span>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">rebase remote and…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">3m</span>
|
||||
</div>
|
||||
<div class="pl-5 -mt-0.5 pb-1 truncate text-[10.5px] leading-snug text-neutral-500">Rebased onto origin/master (resolved…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: main, no agents -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">main</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-neutral-400"></span>jinjing-work</span>
|
||||
<span class="truncate text-neutral-500">main</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">finished email triage (processed 35 new emails)…</p>
|
||||
</div>
|
||||
|
||||
<!-- Card: fix-notification-suites w/ 2 agents -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
|
||||
<button class="mt-2 ml-[18px] flex items-center gap-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500 hover:text-neutral-300">
|
||||
<svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
Agents · 2
|
||||
</button>
|
||||
<div class="relative mt-1 ml-[18px] pl-3">
|
||||
<span class="absolute left-1 top-1 bottom-1 w-px bg-neutral-800"></span>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] font-medium text-neutral-100">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: improve-agent-status, 1 agent, no description -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">improve-agent-status-style</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca</span>
|
||||
<span class="truncate text-neutral-500">improve-agent-status-style</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html…</p>
|
||||
</div>
|
||||
|
||||
<!-- Card: feat/full-suite-name -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">feat/full-suite-name-…</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">feat/full-suite-name-and-o…</span>
|
||||
</div>
|
||||
<p class="mt-1.5 flex items-center gap-1 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0 text-emerald-500"><path d="M6 3v12a3 3 0 0 0 3 3h6M9 18l-3-3 3-3"/><circle cx="6" cy="3" r="2"/><circle cx="15" cy="18" r="2"/></svg>
|
||||
PR #153 feat(reporter): remove run…
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- B. Flush, dot-only -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">B. Flush + dot-only</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">No sparkle icons; status dot is enough.</p>
|
||||
|
||||
<div class="w-[300px] space-y-2">
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="ml-auto text-amber-400"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">switched x-automation home-timeline fetch to @JinjingLiang…</p>
|
||||
<div class="mt-2 ml-[18px] border-t border-neutral-800/80 pt-1.5">
|
||||
<div class="mb-0.5 flex items-center justify-between px-1.5">
|
||||
<span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500">Agents</span>
|
||||
<span class="text-[9.5px] text-neutral-600">1</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500"></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">rebase remote and…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">3m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">main</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-neutral-400"></span>jinjing-work</span>
|
||||
<span class="truncate text-neutral-500">main</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">finished email triage (processed 35 new emails)…</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-2 ml-[18px] border-t border-neutral-800/80 pt-1.5">
|
||||
<div class="mb-0.5 flex items-center justify-between px-1.5">
|
||||
<span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500">Agents</span>
|
||||
<span class="text-[9.5px] text-neutral-600">2</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400"></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-200">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500"></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">improve-agent-status-style</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca</span>
|
||||
<span class="truncate text-neutral-500">improve-agent-status-style</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html…</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">feat/full-suite-name-…</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">feat/full-suite-name-and-o…</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">PR #153 feat(reporter): remove run…</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- D. Inline summary (collapsed by default) -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">D. Inline summary</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Agents collapse to one line; click to expand.</p>
|
||||
|
||||
<div class="w-[300px] space-y-2">
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">switched x-automation home-timeline fetch to @JinjingLiang…</p>
|
||||
<button class="mt-2 ml-[18px] flex w-full items-center gap-2 rounded px-1.5 py-1 text-left hover:bg-neutral-800/60">
|
||||
<div class="flex -space-x-0.5">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-neutral-900"></span>
|
||||
</div>
|
||||
<span class="text-[10.5px] text-neutral-400">1 agent · <span class="text-neutral-300">done</span></span>
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" class="ml-auto text-neutral-500"><path d="M9 6l6 6-6 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">main</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-neutral-400"></span>jinjing-work</span>
|
||||
<span class="truncate text-neutral-500">main</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">finished email triage (processed 35 new emails)…</p>
|
||||
</div>
|
||||
|
||||
<!-- expanded -->
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<button class="mt-2 ml-[18px] flex w-full items-center gap-2 rounded px-1.5 py-1 text-left text-neutral-300 hover:bg-neutral-800/60">
|
||||
<div class="flex -space-x-0.5">
|
||||
<span class="h-2 w-2 rounded-full bg-amber-400 ring-2 ring-neutral-900"></span>
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-neutral-900"></span>
|
||||
</div>
|
||||
<span class="text-[10.5px] text-neutral-400">2 agents · <span class="text-neutral-200">1 running</span></span>
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" class="ml-auto rotate-90 text-neutral-500"><path d="M9 6l6 6-6 6"/></svg>
|
||||
</button>
|
||||
<div class="ml-[18px] space-y-px">
|
||||
<div class="flex items-center gap-2 rounded px-1.5 py-1">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-200">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 rounded px-1.5 py-1">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">improve-agent-status-style</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca</span>
|
||||
<span class="truncate text-neutral-500">improve-agent-status-style</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html…</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">feat/full-suite-name-…</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">feat/full-suite-name-and-o…</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">PR #153 feat(reporter): remove run…</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- G. Merged — no internal separation -->
|
||||
<!-- =================================================== -->
|
||||
<section>
|
||||
<h2 class="mb-1 text-[13px] font-semibold text-neutral-100">G. Merged card</h2>
|
||||
<p class="mb-3 text-[11px] text-neutral-500">Agent rows become peer children of the card. No label, no divider.</p>
|
||||
|
||||
<div class="w-[300px] space-y-2">
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 pb-1.5 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">master</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca-internal</span>
|
||||
<span class="truncate text-neutral-500">master</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">switched x-automation home-timeline fetch to @JinjingLiang…</p>
|
||||
<div class="mt-1 ml-[18px] -mr-1">
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">rebase remote and…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">3m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100">main</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-neutral-400"></span>jinjing-work</span>
|
||||
<span class="truncate text-neutral-500">main</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">finished email triage (processed 35 new emails)…</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 pb-1.5 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">fix-notification-suites</span>
|
||||
</div>
|
||||
<div class="mt-1 ml-[18px] -mr-1">
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center"><span class="spinner-sm"></span></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] font-medium text-neutral-100">how likely it is to aff…</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">8m</span>
|
||||
</div>
|
||||
<div class="group flex items-center gap-2 rounded px-1.5 py-1 hover:bg-neutral-800/60">
|
||||
<span class="inline-flex h-2 w-2 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2.5" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[11.5px] text-neutral-400">fix low-severity spam</span>
|
||||
<span class="text-[10px] tabular-nums text-neutral-500">now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">improve-agent-status-style</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-pink-400"></span>orca</span>
|
||||
<span class="truncate text-neutral-500">improve-agent-status-style</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">drafted agent-row redesign mockup at agent-row-design.html…</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-neutral-900 p-3 ring-1 ring-neutral-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-neutral-600"></span>
|
||||
<span class="text-[13px] font-semibold text-neutral-100 truncate">feat/full-suite-name-…</span>
|
||||
<span class="rounded bg-neutral-800 px-1.5 py-px text-[9.5px] font-medium text-neutral-300">primary</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 pl-[18px] text-[11px]">
|
||||
<span class="inline-flex h-4 items-center gap-1 rounded bg-neutral-800 px-1.5 text-[10px] text-neutral-300"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>stably</span>
|
||||
<span class="truncate text-neutral-500">feat/full-suite-name-and-o…</span>
|
||||
</div>
|
||||
<p class="mt-1.5 truncate pl-[18px] text-[11px] leading-snug text-neutral-500">PR #153 feat(reporter): remove run…</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mt-10 max-w-[900px] rounded-lg bg-neutral-900 p-5 text-[12.5px] leading-6 text-neutral-300 ring-1 ring-neutral-800">
|
||||
<h3 class="mb-2 text-[13px] font-semibold text-neutral-100">Scan test</h3>
|
||||
<p>With a stack of 6 cards: <strong>B</strong> and <strong>G</strong> scan fastest — uniform card height, agents feel like part of the task. <strong>A</strong> adds one extra visual feature (rail) that reads as deliberate hierarchy. <strong>D</strong> wins when lists get long (20+ worktrees) — agents stay one line until you care.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,224 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Agent row — spacing polish only</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spinner {
|
||||
width: 10px; height: 10px;
|
||||
border: 2px solid #eab308;
|
||||
border-top-color: transparent;
|
||||
border-radius: 9999px;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
.claude { color: #d97706; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral-100 p-10 text-neutral-900">
|
||||
<div class="mx-auto max-w-xl space-y-8">
|
||||
|
||||
<!-- ================ BEFORE ================ -->
|
||||
<section>
|
||||
<h2 class="mb-3 text-sm font-semibold text-neutral-600">Before</h2>
|
||||
<div class="rounded-md border border-neutral-200 bg-white p-3 shadow-sm">
|
||||
<div class="mb-1 flex items-center gap-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-400">
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||
AGENTS (3)
|
||||
</div>
|
||||
<div class="divide-y divide-neutral-200/60">
|
||||
<div class="flex flex-col py-0.5">
|
||||
<div class="flex items-center gap-1.5 px-1">
|
||||
<span class="inline-flex h-2.5 w-2.5 items-center justify-center">
|
||||
<span class="spinner"></span>
|
||||
</span>
|
||||
<span class="claude"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg></span>
|
||||
<span class="text-[11px] font-semibold truncate flex-1">yes</span>
|
||||
<span class="text-[10px] text-neutral-400">1m</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-400"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-400"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</div>
|
||||
<div class="pl-5 text-[10px] text-neutral-500 truncate">Revert pushed as 610ffbadb2. Gate the migration behind flag.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================ AFTER — spacing only ================ -->
|
||||
<section>
|
||||
<h2 class="mb-3 text-sm font-semibold text-neutral-600">After — spacing only</h2>
|
||||
|
||||
<!-- Same glyphs as today. Only changed:
|
||||
• row padding py-1.5 px-2 (was py-0.5 px-1)
|
||||
• gap-2 between state / agent / text (was 1.5)
|
||||
• title leading-[18px], subtitle leading-[16px] (was leading-snug/tight)
|
||||
• subtitle indent matches agent icon (pl-[26px])
|
||||
• right cluster gap-1 with time → hover swap, no always-on icons
|
||||
• title normal+muted when visited, semibold+fg when unvisited -->
|
||||
|
||||
<div class="rounded-lg border border-neutral-200 bg-white p-2 shadow-sm">
|
||||
|
||||
<button class="group mb-0.5 flex w-full items-center gap-1 rounded px-1.5 py-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-400 hover:text-neutral-600">
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||
<span>Agents (5)</span>
|
||||
</button>
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- WORKING, unvisited -->
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-100/80">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<span class="spinner"></span>
|
||||
</span>
|
||||
<span class="inline-flex shrink-0 claude">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] font-semibold leading-[18px] text-neutral-900">implement retry logic for websocket disconnects</span>
|
||||
<span class="ml-1 flex shrink-0 items-center gap-1">
|
||||
<span class="text-[10.5px] tabular-nums text-neutral-400 group-hover:hidden">12s</span>
|
||||
<button class="hidden rounded p-0.5 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-700 group-hover:inline-flex">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
</button>
|
||||
<button class="rounded p-0.5 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-700">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-0.5 flex min-w-0 items-center gap-1 pl-[26px] text-[11px] leading-[16px] text-neutral-500">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
<span class="shrink-0 font-mono text-[10.5px] text-neutral-600">Bash</span>
|
||||
<span class="truncate text-neutral-400">pnpm test src/ws/*.test.ts --watch</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DONE, visited — existing CircleCheck glyph kept as-is -->
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-100/80">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="inline-flex shrink-0 claude">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] leading-[18px] text-neutral-600">Revert pushed as 610ffbadb2. Gate the migration.</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-400">2m</span>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate pl-[26px] text-[11px] leading-[16px] text-neutral-400">Post-deploy health check passed; ready for review.</div>
|
||||
</div>
|
||||
|
||||
<!-- WAITING / needs attention -->
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-100/80">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<span class="block h-2 w-2 rounded-full bg-red-500"></span>
|
||||
</span>
|
||||
<span class="inline-flex shrink-0 claude">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] font-semibold leading-[18px] text-neutral-900">Approve running <code class="rounded bg-neutral-100 px-1 font-mono text-[10.5px]">rm -rf dist/</code>?</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-400">just now</span>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate pl-[26px] text-[11px] leading-[16px] text-red-500/90">Waiting for your input</div>
|
||||
</div>
|
||||
|
||||
<!-- DONE + interrupted tag -->
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-100/80">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="inline-flex shrink-0 claude">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] leading-[18px] text-neutral-600">local.env points to staging</span>
|
||||
<span class="shrink-0 rounded bg-rose-500/10 px-1.5 py-px text-[10px] font-medium leading-4 text-rose-600">interrupted</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-400">8m</span>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate pl-[26px] text-[11px] leading-[16px] text-neutral-400">Post-deploy health check (last 45 minutes)</div>
|
||||
</div>
|
||||
|
||||
<!-- IDLE -->
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-100/80">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<span class="block h-1.5 w-1.5 rounded-full bg-neutral-400/50"></span>
|
||||
</span>
|
||||
<span class="inline-flex shrink-0 claude">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg>
|
||||
</span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] leading-[18px] text-neutral-400 italic">Idle</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-400">1h</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dark -->
|
||||
<h2 class="mt-10 mb-3 text-sm font-semibold text-neutral-600">Dark</h2>
|
||||
<div class="rounded-lg border border-neutral-800 bg-neutral-900 p-2 shadow-sm">
|
||||
<div class="mb-0.5 flex items-center gap-1 px-1.5 py-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-neutral-500">
|
||||
<svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||
<span>Agents (3)</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-800/60">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="spinner"></span></span>
|
||||
<span class="inline-flex shrink-0 text-amber-400"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] font-semibold leading-[18px] text-neutral-100">implement retry logic for websocket disconnects</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-500">12s</span>
|
||||
</div>
|
||||
<div class="mt-0.5 flex min-w-0 items-center gap-1 pl-[26px] text-[11px] leading-[16px] text-neutral-500">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
<span class="shrink-0 font-mono text-[10.5px] text-neutral-400">Bash</span>
|
||||
<span class="truncate text-neutral-500">pnpm test src/ws/*.test.ts --watch</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-800/60">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-500"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
</span>
|
||||
<span class="inline-flex shrink-0 text-amber-400"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] leading-[18px] text-neutral-400">Revert pushed as 610ffbadb2. Gate the migration.</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-500">2m</span>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate pl-[26px] text-[11px] leading-[16px] text-neutral-500">Post-deploy health check passed; ready for review.</div>
|
||||
</div>
|
||||
|
||||
<div class="group flex flex-col rounded-md px-2 py-1.5 hover:bg-neutral-800/60">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex h-3 w-3 shrink-0 items-center justify-center"><span class="block h-2 w-2 rounded-full bg-red-500"></span></span>
|
||||
<span class="inline-flex shrink-0 text-amber-400"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg></span>
|
||||
<span class="min-w-0 flex-1 truncate text-[12px] font-semibold leading-[18px] text-neutral-100">Approve running <code class="rounded bg-neutral-800 px-1 font-mono text-[10.5px]">rm -rf dist/</code>?</span>
|
||||
<span class="ml-1 shrink-0 text-[10.5px] tabular-nums text-neutral-500">just now</span>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate pl-[26px] text-[11px] leading-[16px] text-red-400">Waiting for your input</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200 bg-white p-4 text-[13px] leading-6 text-neutral-700">
|
||||
<h3 class="mb-2 text-sm font-semibold text-neutral-900">Spacing diff</h3>
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li>Row padding <code>py-0.5 px-1</code> → <code>py-1.5 px-2</code>. Rows breathe.</li>
|
||||
<li>Inner gap <code>gap-1.5</code> → <code>gap-2</code>. State dot and agent icon no longer collide.</li>
|
||||
<li>State slot normalized to <code>h-3 w-3</code>; agent icon stays 14px — consistent left edge.</li>
|
||||
<li>Subtitle indent <code>pl-5</code> → <code>pl-[26px]</code> to line up under the agent icon, not between the two glyphs.</li>
|
||||
<li>Title <code>leading-[18px]</code>, subtitle <code>leading-[16px]</code>. Fixes cramped <code>leading-snug</code> on 10–11px text.</li>
|
||||
<li>Dividers removed; hover background separates rows.</li>
|
||||
<li>Always-on dismiss/expand glyphs → hover-only, with 2px chip padding for a real 24×24 hit target.</li>
|
||||
<li>Title weight: <code>font-semibold text-foreground</code> when unvisited or needs-attention, <code>text-muted-foreground</code> normal when read — stops read rows from shouting.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user