@dsdenes/devboard 0.1.560 → 0.1.563

package/client/lib/components/ActivityBar.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+  import { Tooltip } from "bits-ui";
+  import Bell from "lucide-svelte/icons/bell";
+  import Compass from "lucide-svelte/icons/compass";
+  import Flag from "lucide-svelte/icons/flag";
+  import ListTodo from "lucide-svelte/icons/list-todo";
+  import Moon from "lucide-svelte/icons/moon";
+  import Search from "lucide-svelte/icons/search";
+  import Sparkles from "lucide-svelte/icons/sparkles";
+  import Sun from "lucide-svelte/icons/sun";
+  import Target from "lucide-svelte/icons/target";
+  import Trash2 from "lucide-svelte/icons/trash-2";
+  import Workflow from "lucide-svelte/icons/workflow";
+  import { discover } from "../discover.svelte";
+  import { flow } from "../flow.svelte";
+  import { issues } from "../issues.svelte";
+  import { goal } from "../goal.svelte";
+  import { layout } from "../layout.svelte";
+  import { notifications } from "../notifications.svelte";
+  import type { FeedbackAction, FeedbackPhase } from "../types";
+  import IconButton from "./ui/icon-button.svelte";
+
+  interface Props {
+    onopenpalette: () => void;
+    onreportissue: () => void;
+    onremoveelement: () => void;
+    onredesignelement: () => void;
+    reportphase: FeedbackPhase;
+    reportaction: FeedbackAction | null;
+    feedbackenabled: boolean;
+  }
+
+  let {
+    onopenpalette,
+    onreportissue,
+    onremoveelement,
+    onredesignelement,
+    reportphase,
+    reportaction,
+    feedbackenabled,
+  }: Props = $props();
+
+  const tooltipClass =
+    "z-50 rounded-sm border border-[var(--border-strong)] bg-[var(--surface-raised)] px-2 py-1 text-[11px] text-[var(--foreground)] shadow-md";
+
+  type ModeState = "running" | "attention" | "idle" | "stale" | null;
+
+  const goalState = $derived<ModeState>(
+    goal.question !== null || goal.runState === "stopped"
+      ? "attention"
+      : goal.lifecycleActive && goal.lifecycle.paused
+        ? "attention"
+        : goal.lifecycleActive || goal.running
+          ? "running"
+          : goal.pendingCount > 0
+            ? "idle"
+            : null,
+  );
+  const issuesState = $derived<ModeState>(
+    issues.lifecycle === "running"
+      ? "running"
+      : issues.agents.some((agent) => agent.question !== null) || issues.lifecycle === "failed"
+        ? "attention"
+        : issues.enabled
+          ? "idle"
+          : null,
+  );
+  const flowState = $derived<ModeState>(
+    flow.status === "running"
+      ? "running"
+      : flow.status === "none"
+        ? null
+        : flow.blockers.some((blocker) => !blocker.dismissed)
+          ? "attention"
+          : "idle",
+  );
+  const discoverState = $derived<ModeState>(
+    discover.active ? "running" : discover.stale ? "stale" : discover.busy !== null ? "attention" : null,
+  );
+
+  const stateWords: Record<Exclude<ModeState, null>, string> = {
+    running: "work running",
+    attention: "needs attention",
+    idle: "idle",
+    stale: "artifacts stale",
+  };
+
+  function modeLabel(base: string, state: ModeState): string {
+    return state === null ? base : `${base}, ${stateWords[state]}`;
+  }
+
+  const notificationLabel = $derived(
+    `Notifications${notifications.unread > 0 ? `, ${notifications.unread} unread` : ""}`,
+  );
+  const themeLabel = $derived(
+    layout.theme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+  );
+  const reportLabel = $derived(
+    reportphase !== "idle" && reportaction === "report"
+      ? reportphase === "sending"
+        ? "Filing the UI issue"
+        : reportphase === "composing" || reportphase === "failed"
+          ? "Cancel UI issue report"
+          : "Cancel element selection"
+      : "Report a UI issue",
+  );
+  const removeLabel = $derived(
+    reportaction === "remove"
+      ? reportphase === "sending"
+        ? "Filing the removal issue"
+        : "Cancel element removal"
+      : "Remove element",
+  );
+  const redesignLabel = $derived(
+    reportaction === "redesign"
+      ? reportphase === "sending"
+        ? "Filing the redesign issue"
+        : "Cancel element redesign"
+      : "Redesign element",
+  );
+  // A quick action cannot run while the report panel owns the selection.
+  const quickDisabled = $derived(
+    reportphase === "sending" || reportphase === "composing" || reportphase === "failed",
+  );
+</script>
+
+<div class="activity-bar" data-testid="activity-bar" aria-label="Devboard application menu">
+  <div class="activity-bar__modes" role="tablist" aria-label="Devboard modes">
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        role="tab"
+        id="mode-goal-tab"
+        aria-controls="workspace-goal"
+        aria-selected={layout.mode === "goal"}
+        aria-label={modeLabel("Goal (Alt+1)", goalState)}
+        title={modeLabel("Goal — Alt+1", goalState)}
+        data-testid="mode-goal"
+        data-command="view.mode.goal"
+        class="activity-tab"
+        onclick={() => layout.setMode("goal")}
+      >
+        <Target size={18} strokeWidth={1.7} aria-hidden="true" />
+        <span class="activity-tab__label">Goal</span>
+        {#if goalState !== null}
+          <span class="activity-tab__state" data-state={goalState} aria-hidden="true"></span>
+        {/if}
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content sideOffset={6} class={tooltipClass}>Goal — Alt+1</Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        role="tab"
+        id="mode-issues-tab"
+        aria-controls="workspace-issues"
+        aria-selected={layout.mode === "issues"}
+        aria-label={modeLabel("Issues (Alt+2)", issuesState)}
+        title={modeLabel("Issues — Alt+2", issuesState)}
+        data-testid="mode-issues"
+        data-command="view.mode.issues"
+        class="activity-tab"
+        onclick={() => layout.setMode("issues")}
+      >
+        <ListTodo size={18} strokeWidth={1.7} aria-hidden="true" />
+        <span class="activity-tab__label">Issues</span>
+        {#if issuesState !== null}
+          <span class="activity-tab__state" data-state={issuesState} aria-hidden="true"></span>
+        {/if}
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content sideOffset={6} class={tooltipClass}>Issues — Alt+2</Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        role="tab"
+        id="mode-flow-tab"
+        aria-controls="workspace-flow"
+        aria-selected={layout.mode === "flow"}
+        aria-label={modeLabel("Flow (Alt+3)", flowState)}
+        title={modeLabel("Flow — Alt+3", flowState)}
+        data-testid="mode-flow"
+        data-command="view.mode.flow"
+        class="activity-tab"
+        onclick={() => layout.setMode("flow")}
+      >
+        <Workflow size={18} strokeWidth={1.7} aria-hidden="true" />
+        <span class="activity-tab__label">Flow</span>
+        {#if flowState !== null}
+          <span class="activity-tab__state" data-state={flowState} aria-hidden="true"></span>
+        {/if}
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content sideOffset={6} class={tooltipClass}>Flow — Alt+3</Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        role="tab"
+        id="mode-discover-tab"
+        aria-controls="workspace-discover"
+        aria-selected={layout.mode === "discover"}
+        aria-label={modeLabel("Discover (Alt+4)", discoverState)}
+        title={modeLabel("Discover — Alt+4", discoverState)}
+        data-testid="mode-discover"
+        data-command="view.mode.discover"
+        class="activity-tab"
+        onclick={() => layout.setMode("discover")}
+      >
+        <Compass size={18} strokeWidth={1.7} aria-hidden="true" />
+        <span class="activity-tab__label">Discover</span>
+        {#if discoverState !== null}
+          <span class="activity-tab__state" data-state={discoverState} aria-hidden="true"></span>
+        {/if}
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content sideOffset={6} class={tooltipClass}>Discover — Alt+4</Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  </div>
+
+  <div class="activity-bar__actions" aria-label="Application actions">
+    <IconButton
+      label="Commands (Ctrl+K)"
+      command="app.palette.open"
+      data-testid="activity-commands"
+      onclick={onopenpalette}
+    >
+      <Search size={15} aria-hidden="true" />
+    </IconButton>
+    <IconButton
+      label={notificationLabel}
+      command="app.notifications.open"
+      data-testid="notification-indicator"
+      class="activity-bar__action"
+      onclick={() => notifications.openHistory()}
+    >
+      <Bell size={15} aria-hidden="true" />
+      {#if notifications.unread > 0}
+        <span class="activity-bar__unread" aria-hidden="true"></span>
+      {/if}
+    </IconButton>
+    <IconButton
+      label={themeLabel}
+      command="view.theme.toggle"
+      data-testid="theme-toggle"
+      onclick={() => layout.toggleTheme()}
+    >
+      {#if layout.theme === "dark"}
+        <Sun size={15} aria-hidden="true" />
+      {:else}
+        <Moon size={15} aria-hidden="true" />
+      {/if}
+    </IconButton>
+    {#if feedbackenabled}
+      <IconButton
+        label={reportLabel}
+        command="app.report"
+        data-testid="activity-report"
+        class="activity-bar__action"
+        active={reportaction === "report"}
+        disabled={reportphase === "sending"}
+        onclick={onreportissue}
+      >
+        <Flag size={15} aria-hidden="true" />
+      </IconButton>
+      <IconButton
+        label={removeLabel}
+        command="app.remove"
+        data-testid="activity-remove"
+        class="activity-bar__action"
+        active={reportaction === "remove"}
+        disabled={quickDisabled}
+        onclick={onremoveelement}
+      >
+        <Trash2 size={15} aria-hidden="true" />
+      </IconButton>
+      <IconButton
+        label={redesignLabel}
+        command="app.redesign"
+        data-testid="activity-redesign"
+        class="activity-bar__action"
+        active={reportaction === "redesign"}
+        disabled={quickDisabled}
+        onclick={onredesignelement}
+      >
+        <Sparkles size={15} aria-hidden="true" />
+      </IconButton>
+    {/if}
+  </div>
+</div>

package/client/lib/components/AdrTable.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+  import { createTable } from "@tanstack/svelte-table";
+  import { tableFeatures } from "@tanstack/table-core";
+  import { goal } from "../goal.svelte";
+  import { recordStatusTone } from "../record-status";
+  import type { AdrRecord } from "../types";
+
+  interface Props {
+    /** The rows to render; the page owns filtering, the table owns density. */
+    records: AdrRecord[];
+    onopen: (record: AdrRecord) => void;
+    onstart: (record: AdrRecord) => void;
+  }
+
+  let { records, onopen, onstart }: Props = $props();
+
+  const features = tableFeatures({});
+
+  const columns = [
+    { id: "title", header: "Title", accessorKey: "title" },
+    { id: "status", header: "Document status", accessorKey: "status" },
+    { id: "state", header: "Implementation", accessorKey: "pending" },
+    { id: "file", header: "File", accessorKey: "file" },
+    { id: "summary", header: "Decision summary", accessorKey: "summary" },
+    { id: "actions", header: "Action", accessorKey: "file" },
+  ];
+
+  const table = createTable({
+    features,
+    get data() {
+      return records as unknown as Array<Record<string, unknown>>;
+    },
+    get columns() {
+      return columns as never;
+    },
+    getRowId: (record: Record<string, unknown>) => String(record.file),
+  });
+
+  function activate(record: AdrRecord): void {
+    onopen(record);
+  }
+</script>
+
+<div class="table-wrap">
+  <table class="adr-table" data-testid="adr-table" aria-label="ADR records">
+    <thead>
+      {#each table.getHeaderGroups() as group (group.id)}
+        <tr>
+          {#each group.headers as header (header.id)}
+            <th scope="col">{header.column.id}</th>
+          {/each}
+        </tr>
+      {/each}
+    </thead>
+    <tbody>
+      {#each table.getRowModel().rows as row (row.id)}
+        {@const record = row.original as unknown as AdrRecord}
+        <tr
+          data-testid="record"
+          data-file={record.file}
+          data-pending={record.pending}
+          data-next={goal.next === record.file}
+          data-active={goal.runFile === record.file}
+          data-command={`goal.adr.open.${record.file}`}
+          tabindex="0"
+          onclick={() => activate(record)}
+          onkeydown={(event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              activate(record);
+            }
+          }}
+        >
+          <td class="adr-title" title={record.title}>
+            <span class="adr-title__text">{record.title}</span>
+            {#if goal.next === record.file}
+              <span class="badge" data-tone="accent" data-testid="next-marker">Next</span>
+            {/if}
+          </td>
+          <td>
+            <span
+              class="badge"
+              data-tone={recordStatusTone(record.status)}
+              data-testid="record-status-badge"
+            >
+              {record.status || "Unknown"}
+            </span>
+          </td>
+          <td>{record.pending ? "Pending" : "Resolved"}</td>
+          <td><code data-testid="record-file">{record.file}</code></td>
+          <td class="adr-summary" data-testid="record-summary" title={record.summary}>
+            {record.summary || "No decision summary recorded."}
+          </td>
+          <td>
+            {#if record.pending}
+              <button
+                type="button"
+                class="start-button"
+                data-testid="start"
+                data-file={record.file}
+                data-command={`goal.adr.start.${record.file}`}
+                title={goal.startLifecycleTitle}
+                disabled={goal.runStartDisabled}
+                onclick={(event) => {
+                  event.stopPropagation();
+                  onstart(record);
+                }}
+              >
+                Start
+              </button>
+            {:else}
+              <span class="muted">Resolved</span>
+            {/if}
+          </td>
+        </tr>
+      {:else}
+        <tr>
+          <td colspan={columns.length} class="empty">No records match this filter.</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .table-wrap {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    width: 100%;
+  }
+
+  table {
+    border-collapse: collapse;
+    font-size: 12px;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  th {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    padding: 2px 8px;
+    position: sticky;
+    text-align: left;
+    text-transform: uppercase;
+    top: 0;
+    z-index: 1;
+  }
+
+  td {
+    border-bottom: 1px solid var(--border-subtle);
+    height: 28px;
+    line-height: 26px;
+    max-width: 0;
+    overflow: hidden;
+    padding: 0 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  tbody tr {
+    cursor: pointer;
+    height: 28px;
+  }
+
+  tbody tr:hover {
+    background: var(--row-hover);
+  }
+
+  tbody tr:focus-visible {
+    background: var(--row-hover);
+    outline: 2px solid var(--ring);
+    outline-offset: -2px;
+  }
+
+  th:nth-child(1) {
+    width: 27%;
+  }
+  th:nth-child(2) {
+    width: 11%;
+  }
+  th:nth-child(3) {
+    width: 11%;
+  }
+  th:nth-child(4) {
+    width: 19%;
+  }
+  th:nth-child(5) {
+    width: 22%;
+  }
+  th:nth-child(6) {
+    width: 10%;
+  }
+
+  .adr-title {
+    align-items: center;
+    display: flex;
+    gap: 6px;
+    max-width: none;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .adr-title__text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .adr-title .badge {
+    flex: 0 0 auto;
+  }
+
+  .start-button {
+    background: var(--primary);
+    border: 1px solid var(--primary);
+    border-radius: 3px;
+    color: var(--primary-foreground);
+    cursor: pointer;
+    font: inherit;
+    font-size: 11px;
+    height: 20px;
+    padding: 0 6px;
+  }
+
+  .start-button:disabled {
+    opacity: 0.45;
+  }
+
+  .empty {
+    color: var(--muted-foreground);
+    text-align: center;
+  }
+</style>