500 lines
35 KiB
HTML
500 lines
35 KiB
HTML
<!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>
|