@felixdotgo/aidlc-kit 0.2.0 → 0.3.0

package/dist/assets/ui/dashboard.css

@@ -4,12 +4,16 @@
  * - Keeps Bulma's default palette (primary teal, link blue).
  * - Flat, enterprise look: white canvas, 1px hairline borders, small radii,
  *   no elevation except overlays (drawer, modal, toast).
- * - Dark mode follows the system automatically: Bulma switches its scheme
- *   variables inside `@media (prefers-color-scheme: dark)`, and every colour
- *   below is expressed through `--bulma-*` variables so it follows along.
- *   Never override scheme lightness (`--bulma-*-l`) on a bare `:root` here:
- *   it has the same specificity as Bulma's media-query block and would pin
- *   one scheme.
+ * - Dark mode: `html[data-theme="dark"|"light"]` (set before first paint from
+ *   Settings → Appearance, see layout.ts) pins a scheme through Bulma's own
+ *   `[data-theme]` blocks; without it (`system`) Bulma follows
+ *   `@media (prefers-color-scheme: dark)`. Every colour below is expressed
+ *   through `--bulma-*` variables so it follows along, and the few dashboard
+ *   variables that differ per scheme are declared twice: once for the explicit
+ *   dark theme and once for the system preference when no light theme is
+ *   pinned. Never override scheme lightness (`--bulma-*-l`) on a bare `:root`
+ *   here: it has the same specificity as Bulma's media-query block and would
+ *   pin one scheme.
  * - Custom components use the `ad-` prefix to avoid clashing with Bulma.
  */
 
@@ -36,8 +40,16 @@
   --ad-transition: 160ms ease;
 }
 
+/* Dark-scheme variables: explicit dark theme, or the OS preference unless light is pinned. */
+html[data-theme="dark"] {
+  --ad-shadow-lg: 0 12px 32px -6px hsla(0, 0%, 0%, 0.7), 0 0 0 1px hsla(0, 0%, 100%, 0.06);
+  --ad-surface: var(--bulma-scheme-main);
+  --ad-canvas: var(--bulma-scheme-main);
+  --ad-subtle: var(--bulma-scheme-main-bis);
+  --ad-log-bg: hsl(222, 25%, 6%);
+}
 @media (prefers-color-scheme: dark) {
-  :root {
+  html:not([data-theme="light"]) {
     --ad-shadow-lg: 0 12px 32px -6px hsla(0, 0%, 0%, 0.7), 0 0 0 1px hsla(0, 0%, 100%, 0.06);
     --ad-surface: var(--bulma-scheme-main);
     --ad-canvas: var(--bulma-scheme-main);
@@ -45,6 +57,8 @@
     --ad-log-bg: hsl(222, 25%, 6%);
   }
 }
+html[data-theme="dark"] { color-scheme: dark; }
+html[data-theme="light"] { color-scheme: light; }
 
 html { background-color: var(--ad-canvas); scroll-padding-top: 5rem; }
 body { min-height: 100vh; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
@@ -99,41 +113,54 @@ kbd, .ad-kbd {
 .button.ad-soft.is-link { background: var(--bulma-link-soft); color: var(--bulma-link-bold); }
 .button.ad-soft.is-danger { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold); }
 .button.ad-soft:hover { filter: brightness(0.96); }
-@media (prefers-color-scheme: dark) { .button.ad-soft:hover { filter: brightness(1.2); } }
-
-/* ---------- Stat cards ---------- */
-.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.875rem; margin-bottom: 1.5rem; }
-.ad-stat {
-  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; border-radius: var(--ad-radius);
-  background: var(--ad-surface); box-shadow: var(--ad-ring), var(--ad-shadow-sm); position: relative; overflow: hidden;
-  color: inherit; text-align: left; border: 0; font: inherit; cursor: pointer; transition: box-shadow var(--ad-transition), background var(--ad-transition);
-}
-.ad-stat:hover { box-shadow: var(--ad-ring-strong); background: var(--ad-subtle); }
-.ad-stat[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ad-accent, var(--bulma-link)); }
-.ad-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ad-accent, var(--bulma-border)); }
-.ad-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-muted); display: flex; align-items: center; gap: 0.4rem; }
-.ad-stat-label .ad-dot { color: var(--ad-accent, var(--ad-muted)); }
-.ad-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--bulma-text-strong); font-variant-numeric: tabular-nums; }
-.ad-stat.is-info { --ad-accent: var(--bulma-info); }
-.ad-stat.is-warning { --ad-accent: var(--bulma-warning); }
-.ad-stat.is-success { --ad-accent: var(--bulma-success); }
-.ad-stat.is-danger { --ad-accent: var(--bulma-danger); }
-.ad-stat.is-primary { --ad-accent: var(--bulma-primary); }
-
-/* ---------- Needs your review ---------- */
-.ad-attention {
-  margin-bottom: 1.5rem; border-radius: var(--ad-radius); overflow: hidden;
-  background: var(--ad-surface); box-shadow: 0 0 0 1px var(--bulma-warning), var(--ad-shadow-sm);
-}
-.ad-attention-head {
-  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem;
-  background: var(--bulma-warning-soft); color: var(--bulma-warning-bold); font-weight: 700; font-size: 0.9rem;
-}
-.ad-attention-head .ad-count { margin-left: auto; }
-.ad-attention-list { list-style: none; margin: 0; padding: 0; }
-.ad-attention-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-top: 1px solid var(--bulma-border-weak); flex-wrap: wrap; }
-.ad-attention-item .ad-title { font-weight: 600; color: var(--bulma-text-strong); flex: 1 1 14rem; min-width: 0; }
-.ad-attention-item .ad-actions { margin-left: auto; }
+html[data-theme="dark"] .button.ad-soft:hover { filter: brightness(1.2); }
+@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .button.ad-soft:hover { filter: brightness(1.2); } }
+
+/* ---------- Live regions (morphed in place; never a layout box) ---------- */
+.ad-live { display: contents; }
+#live-status { animation: ad-pulse 1.8s ease-in-out infinite; }
+a.ad-pill:hover { filter: brightness(0.96); }
+
+/* ---------- Kanban / list view (html[data-view] is set before first paint) ---------- */
+#list-view { display: none; }
+html[data-view="list"] #list-view { display: block; }
+html[data-view="list"] #kanban-view { display: none; }
+
+/* ---------- Header notifications (tasks waiting at a gate) ---------- */
+.ad-notify { position: relative; }
+.ad-notify-toggle { position: relative; }
+.ad-notify-toggle.has-reviews { color: var(--bulma-warning-bold); background: var(--bulma-warning-soft); border-color: transparent; }
+.ad-notify-badge {
+  position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem;
+  display: inline-grid; place-items: center; border-radius: 999px; font-size: 0.65rem; font-weight: 700; line-height: 1;
+  background: var(--bulma-warning); color: var(--bulma-warning-invert); box-shadow: 0 0 0 2px var(--ad-surface);
+  font-variant-numeric: tabular-nums;
+}
+.ad-notify-panel {
+  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; width: min(24rem, calc(100vw - 2rem));
+  max-height: min(28rem, 70vh); overflow-y: auto; border-radius: var(--ad-radius);
+  background: var(--ad-surface); box-shadow: var(--ad-ring), var(--ad-shadow-lg);
+}
+.ad-notify-head {
+  position: sticky; top: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem;
+  background: var(--ad-surface); border-bottom: 1px solid var(--bulma-border-weak); font-size: 0.85rem; color: var(--bulma-text-strong);
+}
+.ad-notify-head .ad-count { margin-left: auto; }
+.ad-notify-list { list-style: none; margin: 0; padding: 0; }
+.ad-notify-list li + li { border-top: 1px solid var(--bulma-border-weak); }
+.ad-notify-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.65rem 0.9rem; color: inherit; }
+.ad-notify-item:hover, .ad-notify-item:focus-visible { background: var(--ad-subtle); color: inherit; }
+.ad-notify-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--bulma-warning); }
+.ad-notify-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.ad-notify-time { margin-left: auto; font-size: 0.72rem; color: var(--ad-muted); }
+.ad-notify-title { font-weight: 600; color: var(--bulma-text-strong); font-size: 0.875rem; overflow-wrap: anywhere; }
+.ad-notify-id { font-size: 0.72rem; color: var(--ad-muted); background: transparent; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ad-notify-more {
+  display: block; width: 100%; padding: 0.6rem 0.9rem; border: 0; border-top: 1px solid var(--bulma-border-weak);
+  background: transparent; color: var(--bulma-link); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-align: center;
+}
+.ad-notify-more:hover { background: var(--ad-subtle); }
+.ad-notify-empty { padding: 1rem 0.9rem; font-size: 0.85rem; color: var(--ad-muted); }
 
 /* ---------- Toolbar ---------- */
 .ad-toolbar { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; flex-wrap: wrap; }
@@ -176,12 +203,9 @@ kbd, .ad-kbd {
 }
 .ad-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--ad-radius) 0 0 var(--ad-radius); background: var(--ad-status-color, var(--bulma-border)); }
 .ad-card:hover { box-shadow: var(--ad-ring-strong); background: var(--ad-subtle); }
+.ad-card[data-card-href] { cursor: pointer; }
 .ad-card.is-attention { box-shadow: 0 0 0 1px var(--bulma-warning); }
-.ad-card-top { display: flex; align-items: center; gap: 0.5rem; }
-.ad-card-id { font-family: var(--bulma-family-code); font-size: 0.72rem; color: var(--ad-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-.ad-card-id:hover { color: var(--bulma-link); }
-.ad-card-top .ad-pill { margin-left: auto; }
-.ad-card-title { font-weight: 600; font-size: 0.92rem; line-height: 1.35; color: var(--bulma-text-strong); word-break: break-word; }
+.ad-card-title { font-weight: 600; font-size: 0.95rem; line-height: 1.4; color: var(--bulma-text-strong); word-break: break-word; }
 .ad-card-title a { color: inherit; }
 .ad-card-title a:hover { color: var(--bulma-link); }
 .ad-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
@@ -213,7 +237,7 @@ kbd, .ad-kbd {
 .ad-stepper li:last-child::after { display: none; }
 .ad-stepper li.is-complete::after { background: var(--bulma-primary); }
 .ad-stepper-marker {
-  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
+  position: relative; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
   font-size: 0.72rem; font-weight: 700; background: var(--ad-surface); color: var(--ad-muted); box-shadow: inset 0 0 0 2px var(--bulma-border);
 }
 .ad-stepper li.is-complete .ad-stepper-marker { background: var(--bulma-primary); color: var(--bulma-primary-invert); box-shadow: none; }
@@ -336,6 +360,55 @@ kbd, .ad-kbd {
 .ad-log-line.is-agent .ad-log-type { color: hsl(171, 80%, 55%); }
 .ad-log-muted { color: hsl(220, 10%, 50%); font-style: italic; }
 
+/* Readable live log (live-log.js): `time · actor · sentence`, grouped by turn.
+ * The terminal stays dark in both schemes, so tones are fixed light hues. */
+.ad-log-line.is-unparsed { display: block; color: hsl(220, 10%, 60%); }
+.ad-log-line.is-error .ad-log-text { color: hsl(0, 85%, 72%); }
+.ad-log-line.is-warn .ad-log-text { color: hsl(40, 90%, 66%); }
+.ad-log-line.is-ok .ad-log-text { color: hsl(140, 50%, 66%); }
+.ad-log-line.is-muted .ad-log-text { color: hsl(220, 10%, 58%); }
+.ad-log-actor {
+  align-self: start; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  padding: 0 0.4rem; border-radius: var(--bulma-radius-small); font-size: 0.7rem; line-height: 1.5rem;
+  color: hsl(220, 14%, 88%); background: hsla(0, 0%, 100%, 0.08);
+}
+.ad-log-line .ad-log-actor { line-height: 1.2rem; margin-top: 0.1rem; }
+.ad-log-actor.is-lead { color: hsl(171, 80%, 62%); background: hsla(171, 80%, 45%, 0.16); }
+.ad-log-actor.is-loop { color: hsl(220, 10%, 64%); background: hsla(220, 10%, 60%, 0.12); }
+.ad-log-actor.is-worker-0 { color: hsl(217, 90%, 74%); background: hsla(217, 90%, 60%, 0.18); }
+.ad-log-actor.is-worker-1 { color: hsl(271, 80%, 78%); background: hsla(271, 80%, 60%, 0.18); }
+.ad-log-actor.is-worker-2 { color: hsl(28, 90%, 70%); background: hsla(28, 90%, 55%, 0.18); }
+.ad-log-actor.is-worker-3 { color: hsl(330, 75%, 76%); background: hsla(330, 75%, 60%, 0.18); }
+.ad-log-code { background: hsla(0, 0%, 100%, 0.07); color: inherit; padding: 0 0.3em; font-size: inherit; }
+.ad-log-link { color: hsl(200, 85%, 70%); text-decoration: underline; }
+.ad-log-link:hover { color: hsl(200, 85%, 80%); }
+.ad-log-text.is-json { color: hsl(220, 10%, 72%); }
+.ad-log-more > summary { cursor: pointer; list-style: none; }
+.ad-log-more > summary::-webkit-details-marker { display: none; }
+.ad-log-more > summary::after { content: " ▸ more"; color: hsl(220, 10%, 52%); font-size: 0.9em; }
+.ad-log-more[open] > summary::after { content: " ▾ less"; }
+.ad-log-full { margin-top: 0.25rem; padding-left: 0.6rem; border-left: 2px solid hsla(0, 0%, 100%, 0.12); color: hsl(220, 12%, 78%); }
+.ad-log-turn { margin: 0.6rem 0 0.35rem; }
+.ad-log-turn:first-child { margin-top: 0; }
+.ad-log-turn-head {
+  display: grid; grid-template-columns: auto auto 1fr; gap: 0.75rem; align-items: center;
+  padding: 0.15rem 0; border-top: 1px solid hsla(0, 0%, 100%, 0.08); color: hsl(220, 14%, 92%); font-weight: 600;
+}
+.ad-log-turn-body { padding-left: 1.1rem; border-left: 2px solid hsla(0, 0%, 100%, 0.08); margin-left: 0.3rem; }
+.ad-log-switch { display: inline-flex; }
+.ad-log-switch button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.ad-log-switch button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
+.ad-terminal-tools a { font-size: 0.72rem; color: hsl(200, 85%, 70%); }
+.ad-terminal-tools a:hover { color: hsl(200, 85%, 80%); }
+.ad-terminal-head .ad-log-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ad-live-log.is-compact { margin: 0 0 1rem; }
+.log-panel.is-compact { height: auto; max-height: 15rem; font-size: 0.74rem; }
+@media screen and (max-width: 768px) {
+  .ad-live-log .ad-terminal-head { flex-wrap: wrap; }
+  .ad-log-line, .ad-log-turn-head { grid-template-columns: auto 1fr; }
+  .ad-log-line .ad-log-time, .ad-log-turn-head .ad-log-time { display: none; }
+}
+
 /* ---------- Toasts ---------- */
 .ad-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
 .ad-toast {
@@ -362,21 +435,28 @@ kbd, .ad-kbd {
 .modal-card-body { background: var(--ad-surface); }
 .modal-card-foot { justify-content: flex-end; gap: 0.5rem; }
 .modal-card-foot .ad-foot-start { margin-right: auto; font-size: 0.8rem; color: var(--ad-muted); }
-.modal.is-active .modal-card { animation: ad-modal-in 140ms ease-out; }
-@keyframes ad-modal-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
+.modal.is-active .modal-background { animation: ad-fade-in 180ms ease-out; }
+.modal.is-active .modal-card { animation: ad-modal-in 200ms cubic-bezier(0.22, 1, 0.36, 1); }
+.modal.is-closing .modal-background { animation: ad-fade-out 160ms ease-in forwards; }
+.modal.is-closing .modal-card { animation: ad-modal-out 160ms ease-in forwards; }
+@keyframes ad-modal-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.97); } to { opacity: 1; transform: none; } }
+@keyframes ad-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }
+@keyframes ad-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ad-fade-out { from { opacity: 1; } to { opacity: 0; } }
 .ad-field-hint { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.75rem; color: var(--ad-muted); }
 .ad-field-hint .is-over { color: var(--bulma-danger); font-weight: 600; }
 
 /* ---------- Task side panel (drawer, JIRA-style) ---------- */
 .ad-drawer { position: fixed; inset: 0; z-index: 40; }
-.ad-drawer-backdrop { position: absolute; inset: 0; background: hsla(221, 39%, 8%, 0.35); opacity: 0; transition: opacity 200ms ease; }
+.ad-drawer-backdrop { position: absolute; inset: 0; background: hsla(221, 39%, 8%, 0.35); opacity: 0; transition: opacity 240ms ease; }
 .ad-drawer-panel {
   position: absolute; top: 0; right: 0; height: 100%; width: clamp(40rem, 55vw, 72rem); max-width: 100vw;
   display: flex; flex-direction: column; background: var(--ad-surface); border-left: 1px solid var(--bulma-border-weak);
-  box-shadow: var(--ad-shadow-lg); transform: translateX(100%); transition: transform 200ms ease; outline: none;
+  box-shadow: var(--ad-shadow-lg); transform: translateX(100%); opacity: 0.6; outline: none;
+  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
 }
 .ad-drawer.is-open .ad-drawer-backdrop { opacity: 1; }
-.ad-drawer.is-open .ad-drawer-panel { transform: none; }
+.ad-drawer.is-open .ad-drawer-panel { transform: none; opacity: 1; }
 .ad-drawer-head {
   flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem;
   border-bottom: 1px solid var(--bulma-border-weak); background: var(--ad-surface);
@@ -390,10 +470,6 @@ kbd, .ad-kbd {
 .ad-drawer-body .ad-sticky { position: static; }
 .ad-drawer-body .ad-page-title { font-size: 1.3rem; }
 
-/* ---------- Footer help ---------- */
-.ad-help { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--bulma-border-weak); font-size: 0.8rem; color: var(--ad-muted); line-height: 1.6; }
-.ad-help code { font-size: 0.78rem; }
-
 /* ---------- Responsive ---------- */
 @media screen and (max-width: 1023px) {
   .ad-board { grid-template-columns: repeat(5, minmax(16rem, 80vw)); scroll-snap-type: x mandatory; }
@@ -409,6 +485,152 @@ kbd, .ad-kbd {
   .ad-drawer-body { padding: 1rem; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
+/* ---------- Collapsed kanban column ---------- */
+.ad-column-more {
+  display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem; border: 1px dashed var(--bulma-border); border-radius: var(--ad-radius);
+  background: transparent; color: var(--ad-muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
 }
+.ad-column-more:hover { color: var(--bulma-link); border-color: var(--bulma-link); }
+
+/* ---------- Side-panel call to action (open the full page for gate actions) ---------- */
+.ad-drawer-cta { margin: 0 0 1rem; align-items: center; flex-wrap: wrap; }
+.ad-drawer-cta .button { margin-left: auto; }
+.ad-callout.is-danger { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold); }
+
+/* ---------- Task changes page (server-rendered unified diff) ---------- */
+.ad-changes-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
+.ad-changes-banner { margin: 0 0 1rem; }
+.ad-changes-item .ad-changes-banner { margin: 0.75rem 1.1rem 0; }
+.ad-callout.is-info { background: var(--bulma-info-soft); color: var(--bulma-info-bold); }
+.ad-changes-commit { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--ad-muted); }
+/* .ad-panel clips with overflow: hidden, which turns it into the sticky file list's
+ * scroll container and disables sticking; clip keeps the rounded corners without that. */
+.ad-panel.ad-changes-item { overflow: visible; overflow: clip; }
+.ad-changes { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); align-items: start; }
+.ad-changes-files { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; border-right: 1px solid var(--bulma-border-weak); padding: 0.5rem 0; }
+.ad-changes-files ul { margin: 0; list-style: none; }
+.ad-changes-files a { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.9rem; font-size: 0.8rem; color: var(--bulma-text); }
+.ad-changes-files a:hover, .ad-changes-files a:focus-visible { background: var(--ad-subtle); color: var(--bulma-link); }
+.ad-diff-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-family: var(--bulma-family-code); }
+.ad-diff-stat { margin-left: auto; font-family: var(--bulma-family-code); font-size: 0.75rem; color: var(--ad-muted); white-space: nowrap; }
+.ad-diff-plus { color: var(--bulma-success-bold, var(--bulma-success)); }
+.ad-diff-minus { color: var(--bulma-danger-bold, var(--bulma-danger)); }
+.ad-diff-status { font-size: 0.65rem; padding: 0.05rem 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; flex: none; }
+.ad-changes-diff { min-width: 0; padding: 0.75rem; }
+.ad-diff-file { margin-bottom: 1rem; border-radius: var(--ad-radius); box-shadow: var(--ad-ring); overflow: hidden; scroll-margin-top: 5rem; }
+.ad-diff-file.is-target { box-shadow: 0 0 0 2px var(--bulma-link); }
+.ad-diff-file-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; background: var(--ad-subtle); border-bottom: 1px solid var(--bulma-border-weak); }
+.ad-diff-file-head code { background: transparent; padding: 0; color: var(--bulma-text-strong); white-space: normal; word-break: break-all; }
+.ad-diff { overflow-x: auto; font-family: var(--bulma-family-code); font-size: 0.78rem; line-height: 1.45; }
+.ad-diff-line { white-space: pre; min-height: 1.45em; padding: 0 0.75rem; min-width: max-content; }
+.ad-diff-add { background: var(--bulma-success-soft); color: var(--bulma-success-bold, inherit); }
+.ad-diff-del { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold, inherit); }
+.ad-diff-hunk { background: var(--bulma-info-soft); color: var(--bulma-info-bold, var(--ad-muted)); }
+.ad-diff-meta { color: var(--ad-muted); }
+.ad-diff-note { padding: 0.6rem 0.75rem; font-size: 0.85rem; color: var(--ad-muted); }
+@media (max-width: 1023px) {
+  .ad-changes { grid-template-columns: minmax(0, 1fr); }
+  .ad-changes-files { position: static; max-height: 16rem; border-right: 0; border-bottom: 1px solid var(--bulma-border-weak); }
+}
+
+/* ---------- Copy-to-clipboard id ---------- */
+.ad-copy {
+  display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.1rem 0.4rem; border: 0; border-radius: var(--ad-radius);
+  background: transparent; color: var(--ad-muted); font: inherit; cursor: pointer; transition: background var(--ad-transition), color var(--ad-transition);
+}
+.ad-copy code { background: transparent; padding: 0; color: inherit; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ad-copy svg { flex: none; opacity: 0.7; }
+.ad-copy:hover, .ad-copy:focus-visible { background: var(--ad-subtle); color: var(--bulma-link); }
+.ad-copy.is-copied { color: var(--bulma-success-bold, var(--bulma-success)); }
+/* The side panel shows the id (with copy) in its header; skip the body's copy. */
+.ad-drawer-body .ad-page-sub .ad-copy { display: none; }
+
+/* ---------- "Radioactive" pulse on the current step ---------- */
+.ad-pulse { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; color: var(--bulma-primary); }
+.ad-pulse.is-waiting { color: var(--bulma-warning); }
+.ad-pulse::before, .ad-pulse::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor;
+  animation: ad-pulse-ring 1.8s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
+}
+.ad-pulse::after { animation-delay: 0.9s; }
+/* Named apart from the `ad-pulse` opacity blink above: two keyframes with one name would
+ * make the last declaration win for both the live dot and this ring. */
+@keyframes ad-pulse-ring { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.1); opacity: 0; } }
+.ad-stepper li.is-current .ad-stepper-marker { z-index: 0; }
+
+/* ---------- New task panel + Markdown editor ---------- */
+.ad-drawer.is-compose .ad-drawer-panel { width: clamp(34rem, 44vw, 52rem); }
+.ad-drawer-heading { margin-right: auto; font-size: 1rem; font-weight: 700; color: var(--bulma-text-strong); }
+.ad-drawer-foot {
+  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--bulma-border-weak); background: var(--ad-surface);
+}
+.ad-drawer-foot .ad-foot-start { margin-right: auto; font-size: 0.8rem; color: var(--ad-muted); }
+.ad-compose-intro { margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--ad-muted); }
+.ad-editor { display: flex; flex-direction: column; border-radius: var(--ad-radius); box-shadow: var(--ad-ring); background: var(--ad-surface); transition: box-shadow var(--ad-transition); }
+.ad-editor:focus-within { box-shadow: 0 0 0 1px var(--bulma-link), 0 0 0 4px var(--bulma-link-soft, transparent); }
+.ad-editor-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--bulma-border-weak); background: var(--ad-subtle); border-radius: var(--ad-radius) var(--ad-radius) 0 0; }
+.ad-editor-tabs { display: flex; gap: 0.15rem; }
+.ad-editor-tabs button, .ad-editor-tool {
+  border: 0; border-radius: var(--ad-radius); background: transparent; color: var(--ad-muted); font: inherit; font-size: 0.8rem; cursor: pointer;
+  padding: 0.25rem 0.6rem; transition: background var(--ad-transition), color var(--ad-transition);
+}
+.ad-editor-tabs button[aria-selected="true"] { background: var(--ad-surface); color: var(--bulma-text-strong); font-weight: 600; box-shadow: var(--ad-ring); }
+.ad-editor-tools { display: flex; flex-wrap: wrap; gap: 0.1rem; margin-left: auto; }
+.ad-editor-tool { min-width: 1.9rem; padding: 0.25rem 0.45rem; }
+.ad-editor-tool:hover:not(:disabled), .ad-editor-tabs button:hover { background: var(--ad-surface); color: var(--bulma-link); }
+.ad-editor-tool:disabled { opacity: 0.4; cursor: default; }
+.ad-editor-input {
+  display: block; width: 100%; min-height: 18rem; resize: vertical; border: 0; outline: none; padding: 0.85rem 1rem; background: transparent;
+  color: var(--bulma-text); font-family: var(--bulma-family-code); font-size: 0.85rem; line-height: 1.6; border-radius: 0 0 var(--ad-radius) var(--ad-radius);
+}
+.ad-editor-preview { min-height: 18rem; padding: 0.85rem 1rem; overflow: auto; }
+
+/* ---------- Settings dialog ---------- */
+.ad-settings { display: flex; flex-direction: column; gap: 1.1rem; }
+.ad-settings-group { margin: 0; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--bulma-border-weak); min-inline-size: 0; }
+.ad-settings-group:last-child { padding-bottom: 0; border-bottom: 0; }
+.ad-settings-group > legend { padding: 0; margin-bottom: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-muted); }
+.ad-settings .field:last-child { margin-bottom: 0; }
+.ad-settings .label.is-small { margin-bottom: 0.3rem; font-weight: 600; }
+.ad-settings-radios { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
+.ad-settings .radio input, .ad-settings .checkbox input { margin-right: 0.4rem; }
+.ad-settings .help.is-danger { color: var(--bulma-danger-bold); }
+
+/* ---------- Docs pages ---------- */
+.ad-docs { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
+.ad-docs-nav { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; font-size: 0.85rem; }
+.ad-docs-nav-title { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-muted); }
+.ad-docs-pages, .ad-docs-toc { margin: 0 0 1.25rem; list-style: none; }
+.ad-docs-nav a { display: block; padding: 0.3rem 0.6rem; border-radius: var(--ad-radius); color: var(--bulma-text); }
+.ad-docs-nav a:hover { background: var(--ad-subtle); color: var(--bulma-link); }
+.ad-docs-nav a.is-active { background: var(--bulma-primary-soft); color: var(--bulma-primary-bold); font-weight: 600; }
+.ad-docs-toc .is-level-3 a { padding-left: 1.4rem; font-size: 0.8rem; color: var(--ad-muted); }
+.ad-docs-body .artifact { padding: 1.5rem 2rem 2rem; max-height: none; overflow: visible; }
+.ad-docs-body h1, .ad-docs-body h2, .ad-docs-body h3, .ad-docs-body h4 { position: relative; scroll-margin-top: 4.5rem; }
+.ad-doc-anchor { position: absolute; left: -1.1rem; opacity: 0; color: var(--ad-muted); font-weight: 400; text-decoration: none; }
+.ad-docs-body h1:hover .ad-doc-anchor, .ad-docs-body h2:hover .ad-doc-anchor, .ad-docs-body h3:hover .ad-doc-anchor, .ad-docs-body h4:hover .ad-doc-anchor { opacity: 1; }
+.ad-doc-callout { border-left: 3px solid var(--bulma-info); background: var(--bulma-info-soft); color: var(--bulma-text); }
+.ad-doc-callout.is-warning, .ad-doc-callout.is-caution { border-left-color: var(--bulma-warning); background: var(--bulma-warning-soft); }
+.ad-doc-callout.is-important { border-left-color: var(--bulma-link); background: var(--bulma-link-soft); }
+.ad-doc-callout.is-tip { border-left-color: var(--bulma-success); background: var(--bulma-success-soft); }
+.ad-doc-callout-title { display: block; margin-bottom: 0.2rem; }
+@media screen and (max-width: 1023px) {
+  .ad-docs { grid-template-columns: 1fr; }
+  .ad-docs-nav { position: static; max-height: none; }
+  .ad-drawer.is-compose .ad-drawer-panel { width: 100vw; }
+}
+
+/* Containers */
+/* The container log viewer sits inside the Containers panel, under the table. */
+.ad-panel .ad-container-log { margin: 0; border-radius: 0; border-top: 1px solid var(--bulma-border-weak); }
+.ad-container-log[hidden] { display: none; }
+.ad-container-log .ad-terminal-head { flex-wrap: wrap; }
+.ad-container-log .log-panel { height: 20rem; }
+.ad-container-log [data-container-log-name] { font-family: var(--bulma-family-code); }
+
+/* ---------- Code changes page: wrap toggle and toolbar options ---------- */
+.ad-changes-diff.is-wrapped .ad-diff-line { white-space: pre-wrap; word-break: break-word; min-width: 0; }
+.ad-changes-form { display: inline-flex; align-items: center; gap: 0.6rem; }
+.ad-changes-options { display: inline-flex; align-items: center; gap: 0.9rem; margin-left: auto; font-size: 0.8rem; }
+.ad-changes-options label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

package/dist/assets/ui/dashboard.js

@@ -0,0 +1,77 @@
+/*
+ * Loop dashboard page: kanban/list view toggle, client-side filters, and the
+ * collapsible done column. Loaded after common.js (uses its `live` hooks).
+ */
+/* ---- Dashboard view state (re-applied after every live update) ---- */
+const viewKey = "aidlc-view";
+const applyView = (view) => {
+  document.documentElement.setAttribute("data-view", view === "list" ? "list" : "kanban");
+  document.querySelectorAll("[data-view-toggle]").forEach((el) => {
+    const active = el.getAttribute("data-view-toggle") === view;
+    el.classList.toggle("is-active", active);
+    el.setAttribute("aria-pressed", String(active));
+  });
+};
+const currentView = () => (localStorage.getItem(viewKey) === "list" ? "list" : "kanban");
+const expandedColumns = new Set();
+// Client-side filtering over server-rendered cards and rows (no extra API calls).
+// Columns with data-collapse show that many cards unless expanded or filtering.
+const applyFilter = () => {
+  const search = document.getElementById("task-search");
+  const statusFilter = document.getElementById("filter-status");
+  const riskFilter = document.getElementById("filter-risk");
+  const resultCount = document.getElementById("result-count");
+  const terms = (search ? search.value : "").toLowerCase().split(/\s+/).filter(Boolean);
+  const status = statusFilter ? statusFilter.value : "";
+  const risk = riskFilter ? riskFilter.value : "";
+  const filtered = !!(terms.length || status || risk);
+  const matches = (el) => (!status || el.getAttribute("data-status") === status) && (!risk || el.getAttribute("data-risk") === risk) && terms.every((term) => (el.getAttribute("data-search") || "").includes(term));
+  let visible = 0;
+  document.querySelectorAll("#kanban-view [data-task-item]").forEach((el) => { const show = matches(el); el.hidden = !show; if (show) visible += 1; });
+  document.querySelectorAll("#list-view [data-task-item]").forEach((el) => { el.hidden = !matches(el); });
+  document.querySelectorAll("[data-phase-column]").forEach((column) => {
+    const shown = [...column.querySelectorAll("[data-task-item]")].filter((el) => !el.hidden);
+    const limit = Number(column.getAttribute("data-collapse") || 0);
+    const expanded = expandedColumns.has(column.getAttribute("data-phase-column"));
+    const extra = limit && !filtered ? Math.max(0, shown.length - limit) : 0;
+    if (extra && !expanded) shown.slice(limit).forEach((el) => { el.hidden = true; });
+    const more = column.querySelector("[data-column-more]");
+    if (more) { more.hidden = extra === 0; more.textContent = expanded ? "Show less" : "Show " + extra + " more"; more.setAttribute("aria-expanded", String(expanded)); }
+    const badge = column.querySelector("[data-column-count]");
+    if (badge) badge.textContent = String(shown.length);
+    const empty = column.querySelector("[data-column-empty]");
+    if (empty) empty.hidden = shown.length > 0;
+  });
+  const total = document.querySelectorAll("#kanban-view [data-task-item]").length;
+  if (resultCount) resultCount.textContent = filtered ? visible + " of " + total + " tasks" : total + (total === 1 ? " task" : " tasks");
+  document.querySelectorAll("[data-no-match]").forEach((el) => el.classList.toggle("is-visible", filtered && visible === 0));
+};
+const clearFilters = () => {
+  ["task-search", "filter-status", "filter-risk"].forEach((id) => { const el = document.getElementById(id); if (el) el.value = ""; });
+  applyFilter();
+};
+live.hooks.push(() => { applyView(currentView()); applyFilter(); });
+
+document.addEventListener("click", (event) => {
+  const target = event.target instanceof Element ? event.target : null;
+  if (!target) return;
+  const viewToggle = target.closest("[data-view-toggle]");
+  if (viewToggle) { const view = viewToggle.getAttribute("data-view-toggle"); localStorage.setItem(viewKey, view); applyView(view); return; }
+  const columnMore = target.closest("[data-column-more]");
+  if (columnMore) {
+    const column = columnMore.closest("[data-phase-column]");
+    const name = column ? column.getAttribute("data-phase-column") : "";
+    if (expandedColumns.has(name)) expandedColumns.delete(name); else expandedColumns.add(name);
+    applyFilter();
+    return;
+  }
+  if (target.closest("#filter-clear")) { clearFilters(); return; }
+});
+document.addEventListener("input", (event) => {
+  const target = event.target instanceof Element ? event.target : null;
+  if (target && target.matches("#task-search, #filter-status, #filter-risk")) applyFilter();
+});
+document.addEventListener("DOMContentLoaded", () => {
+  applyView(currentView());
+  applyFilter();
+});