315 lines
19 KiB
HTML
315 lines
19 KiB
HTML
<!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>
|