@dsdenes/devboard 0.1.560 → 0.1.563

package/client/lib/components/ui/page-header.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    eyebrow?: string;
+    title: string;
+    subtitle?: string;
+    /** Optional meta line under the subtitle; status words and counts live here. */
+    meta?: Snippet;
+    /** Page-level actions. At most one filled primary action. */
+    actions?: Snippet;
+    /** Renders without the panel frame so a parent panel can own the border. */
+    flat?: boolean;
+    testid?: string;
+  }
+
+  let {
+    eyebrow,
+    title,
+    subtitle,
+    meta,
+    actions,
+    flat = false,
+    testid,
+  }: Props = $props();
+</script>
+
+<header class="page-header" class:page-header--flat={flat} data-testid={testid}>
+  <div class="page-header__identity">
+    {#if eyebrow}
+      <p class="page-header__eyebrow">{eyebrow}</p>
+    {/if}
+    <h1 class="page-header__title" title={title}>{title}</h1>
+    {#if subtitle}
+      <p class="page-header__subtitle">{subtitle}</p>
+    {/if}
+    {#if meta}
+      <div class="page-header__meta">{@render meta()}</div>
+    {/if}
+  </div>
+  {#if actions}
+    <div class="page-header__actions">{@render actions()}</div>
+  {/if}
+</header>
+
+<style>
+  .page-header {
+    align-items: flex-start;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 12px;
+    justify-content: space-between;
+    min-width: 0;
+    padding: 10px 12px;
+  }
+
+  .page-header--flat {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+
+  .page-header__identity {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .page-header__eyebrow {
+    color: var(--muted-foreground);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    line-height: 1.2;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  .page-header__title {
+    color: var(--foreground);
+    font-size: 20px;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .page-header__subtitle {
+    color: var(--muted-foreground);
+    font-size: 12px;
+    line-height: 1.45;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .page-header__meta {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    margin-top: 4px;
+  }
+
+  .page-header__actions {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+</style>

package/client/lib/components/ui/stage-track.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import type { LifecycleStage } from "../../types";
+
+  interface Props {
+    stage: LifecycleStage;
+    pass: number;
+    paused: boolean;
+    /** False until the server reports a stage other than `goal`; never infer progress. */
+    seen: boolean;
+    /** The unit being processed, or the manual run title. */
+    workLabel?: string | null;
+    workUrl?: string | null;
+    /** A single-record run that runs outside the lifecycle. */
+    manual?: boolean;
+    testid?: string;
+  }
+
+  const STAGES: Array<{ id: LifecycleStage; label: string }> = [
+    { id: "goal", label: "Goal" },
+    { id: "epic", label: "Epics" },
+    { id: "adr", label: "ADRs" },
+    { id: "implementation", label: "Implementation" },
+    { id: "finished", label: "Finished" },
+  ];
+
+  let {
+    stage,
+    pass,
+    paused,
+    seen,
+    workLabel = null,
+    workUrl = null,
+    manual = false,
+    testid,
+  }: Props = $props();
+
+  const currentIndex = $derived(Math.max(0, STAGES.findIndex((entry) => entry.id === stage)));
+  const stateLabel = $derived(
+    paused
+      ? "Paused"
+      : manual
+        ? "Manual run"
+        : !seen
+          ? "Not started"
+          : stage === "finished"
+            ? "Finished"
+            : "Running",
+  );
+</script>
+
+<div class="stage-track" data-testid={testid} data-state={stateLabel.toLowerCase().replace(" ", "-")}>
+  <ol class="stage-track__steps" aria-label="Lifecycle stages">
+    {#each STAGES as entry, index (entry.id)}
+      <li
+        class="stage-track__step"
+        data-complete={seen && index < currentIndex}
+        aria-current={index === currentIndex ? "step" : undefined}
+      >
+        {entry.label}
+      </li>
+    {/each}
+  </ol>
+  <p class="stage-track__detail">
+    {#if seen}
+      <span>Pass <strong class="mono">{pass}</strong></span>
+    {/if}
+    <span data-testid="stage-state">{stateLabel}</span>
+    {#if workLabel !== null && workLabel.length > 0}
+      <span class="stage-track__work">
+        {manual ? "Resolving" : "Working on"}
+        {#if workUrl !== null}
+          <a href={workUrl} target="_blank" rel="noopener noreferrer">{workLabel}</a>
+        {:else}
+          <strong>{workLabel}</strong>
+        {/if}
+      </span>
+    {/if}
+  </p>
+</div>
+
+<style>
+  .stage-track {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .stage-track__steps {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .stage-track__step {
+    border: 1px solid var(--border-subtle);
+    border-radius: 3px;
+    color: var(--muted-foreground);
+    flex: 1 1 0;
+    font-size: 11px;
+    font-weight: 600;
+    min-width: 0;
+    overflow: hidden;
+    padding: 4px 6px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .stage-track__step[data-complete="true"] {
+    border-color: var(--border);
+    color: var(--foreground);
+  }
+
+  .stage-track__step[aria-current="step"] {
+    background: var(--accent-surface);
+    border-color: var(--accent);
+    color: var(--foreground);
+  }
+
+  .stage-track__detail {
+    align-items: baseline;
+    color: var(--muted-foreground);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 11px;
+    gap: 4px 12px;
+    margin: 0;
+  }
+
+  .stage-track__work {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .stage-track a {
+    color: var(--accent);
+  }
+</style>

package/client/lib/components/watchdog-indicator.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  interface WatchdogIssue {
+    url: string;
+    category: string;
+    line: string;
+    filedAt: string;
+  }
+
+  interface WatchdogStatus {
+    cycle: string | null;
+    action: string;
+    reason?: string;
+    findings: number;
+    issues: WatchdogIssue[];
+    pending: number;
+  }
+
+  const POLL_MS = 60_000;
+  const MAX_ISSUES = 10;
+
+  let status = $state<WatchdogStatus | null>(null);
+  let unavailable = $state(false);
+  let open = $state(false);
+
+  async function refresh(): Promise<void> {
+    try {
+      const response = await fetch("/api/watchdog");
+      if (!response.ok) {
+        unavailable = true;
+        return;
+      }
+      status = (await response.json()) as WatchdogStatus;
+      unavailable = false;
+    } catch {
+      unavailable = true;
+    }
+  }
+
+  onMount(() => {
+    void refresh();
+    const timer = setInterval(() => {
+      void refresh();
+    }, POLL_MS);
+    return () => clearInterval(timer);
+  });
+
+  const action = $derived(status === null ? (unavailable ? "unavailable" : "unknown") : status.action);
+
+  const age = $derived.by(() => {
+    if (status === null || status.cycle === null) return "never";
+    const elapsed = Date.now() - Date.parse(status.cycle);
+    if (!Number.isFinite(elapsed)) return "unknown";
+    const minutes = Math.floor(Math.max(0, elapsed) / 60_000);
+    if (minutes < 1) return "just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+  });
+
+  const dot = $derived(
+    status?.action === "failed"
+      ? "closed"
+      : status?.action === "none" || status === null
+        ? "connecting"
+        : "open",
+  );
+
+  const issues = $derived(status?.issues.slice(0, MAX_ISSUES) ?? []);
+
+  function toggle(): void {
+    open = !open;
+    if (open) void refresh();
+  }
+
+  function handleKey(event: KeyboardEvent): void {
+    if (event.key === "Escape" && open) open = false;
+  }
+</script>
+
+<svelte:window onkeydown={handleKey} />
+
+<div class="watchdog">
+  <button
+    type="button"
+    class="status-item status-item--button watchdog-trigger"
+    data-testid="status-watchdog"
+    aria-expanded={open}
+    aria-haspopup="dialog"
+    title="Watchdog: the last cycle and the issues it filed"
+    onclick={toggle}
+  >
+    <span class="status-dot" data-state={dot} aria-hidden="true"></span>
+    <span class="status-metric__label">watchdog</span>
+    <span class="mono status-metric__value">{action} · {age}</span>
+  </button>
+  {#if open}
+    <div
+      class="watchdog-popover"
+      data-testid="watchdog-popover"
+      role="dialog"
+      aria-label="Watchdog report"
+    >
+      <p class="watchdog-summary">
+        {#if status === null}
+          No cycle reported yet.
+        {:else}
+          Cycle {status.cycle ?? "never"} · {status.findings} finding(s) ·
+          {status.pending} pending
+        {/if}
+      </p>
+      {#if status?.reason !== undefined}
+        <p class="watchdog-reason">{status.reason}</p>
+      {/if}
+      {#if issues.length === 0}
+        <p class="watchdog-empty">No issues filed.</p>
+      {:else}
+        <ul class="watchdog-issues">
+          {#each issues as issue (issue.url)}
+            <li>
+              <a href={issue.url} target="_blank" rel="noopener noreferrer">
+                {issue.category}: {issue.line}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .watchdog {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .watchdog-trigger {
+    max-width: 260px;
+  }
+
+  .watchdog-popover {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    bottom: 30px;
+    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
+    color: var(--foreground);
+    display: flex;
+    flex-direction: column;
+    font-size: 11px;
+    gap: 6px;
+    max-height: 50vh;
+    max-width: 520px;
+    overflow: auto;
+    padding: 8px 10px;
+    position: fixed;
+    right: 8px;
+    white-space: normal;
+    z-index: 40;
+  }
+
+  .watchdog-summary,
+  .watchdog-reason,
+  .watchdog-empty {
+    margin: 0;
+  }
+
+  .watchdog-reason {
+    color: var(--muted-foreground);
+  }
+
+  .watchdog-issues {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .watchdog-issues a {
+    color: var(--foreground);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+</style>

package/client/lib/connection.svelte.ts

@@ -0,0 +1,210 @@
+import { notifications } from "./notifications.svelte";
+import type { VersionState } from "./types";
+
+type ConnectionState = "connecting" | "open" | "closed";
+
+interface Envelope {
+  type: string;
+  [key: string]: unknown;
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isVersionState(value: Record<string, unknown>): boolean {
+  return (
+    value.type === "versionState" &&
+    (value.running === null || typeof value.running === "string") &&
+    (value.installed === null || typeof value.installed === "string") &&
+    (value.latest === null || typeof value.latest === "string") &&
+    typeof value.stale === "boolean"
+  );
+}
+
+
+/**
+ * Owns the single WebSocket. Every parsed frame is also forwarded to the
+ * registered mode handlers, so the server contract stays exactly as it was.
+ */
+export class ConnectionStore {
+  state = $state<ConnectionState>("connecting");
+  projectPath = $state("");
+  version = $state<VersionState | null>(null);
+  /** True when the server has a Gitea address for harness-owned reporting. */
+  feedbackEnabled = $state(false);
+  restarting = $state(false);
+  awaitingRestart = $state(false);
+  upgradePending = $state(false);
+  lastError = $state<string | null>(null);
+
+  private socket: WebSocket | undefined;
+  private retryTimer: number | undefined;
+  private disposed = false;
+  private notifiedLoss = false;
+  private handlers: Array<(message: Envelope) => void> = [];
+  private openHandlers: Array<() => void> = [];
+
+  get open(): boolean {
+    return this.state === "open";
+  }
+
+  onMessage(handler: (message: Envelope) => void): void {
+    this.handlers.push(handler);
+  }
+
+  /**
+   * Runs before the state requests below on every open, including reconnects.
+   * Stores reconcile operation flags here so a stop frame lost while the
+   * socket was down cannot leave a control disabled for the session.
+   */
+  onOpen(handler: () => void): void {
+    this.openHandlers.push(handler);
+  }
+
+  send(command: unknown): boolean {
+    if (this.socket === undefined || this.socket.readyState !== WebSocket.OPEN) {
+      this.lastError = "Not connected to the server.";
+      notifications.push("error", this.lastError);
+      return false;
+    }
+    this.lastError = null;
+    this.socket.send(JSON.stringify(command));
+    return true;
+  }
+
+  connect(): void {
+    if (typeof window === "undefined") return;
+    this.state = "connecting";
+    const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+    const current = new WebSocket(`${protocol}//${location.host}/ws`);
+    this.socket = current;
+
+    current.onopen = () => {
+      this.state = "open";
+      this.lastError = null;
+      this.notifiedLoss = false;
+      this.upgradePending = false;
+      for (const handler of this.openHandlers) handler();
+      current.send(JSON.stringify({ type: "listRecords" }));
+      current.send(JSON.stringify({ type: "getGoal" }));
+      current.send(JSON.stringify({ type: "getSkills" }));
+      current.send(JSON.stringify({ type: "getProject" }));
+      current.send(JSON.stringify({ type: "getVersion" }));
+    };
+
+    current.onmessage = (event) => {
+      let message: unknown;
+      try {
+        message = JSON.parse(String(event.data));
+      } catch {
+        return;
+      }
+      if (!isObject(message) || typeof message.type !== "string") return;
+      const envelope = message as Envelope;
+      this.handle(envelope);
+      for (const handler of this.handlers) handler(envelope);
+    };
+
+    current.onerror = () => {
+      if (this.awaitingRestart) return;
+      this.lastError = "Could not reach the server.";
+      if (!this.notifiedLoss) {
+        this.notifiedLoss = true;
+        notifications.push("warning", "Connection lost. Reconnecting…");
+      }
+    };
+
+    current.onclose = () => {
+      this.state = "closed";
+      if (this.awaitingRestart) {
+        void this.waitForRestart();
+        return;
+      }
+      if (!this.disposed) this.retryTimer = window.setTimeout(() => this.connect(), 1000);
+    };
+  }
+
+  private handle(message: Envelope): void {
+    if (isVersionState(message)) {
+      this.version = {
+        running: message.running as string | null,
+        installed: message.installed as string | null,
+        latest: message.latest as string | null,
+        stale: message.stale as boolean,
+      };
+      this.feedbackEnabled = message.feedbackEnabled === true;
+      return;
+    }
+    if (message.type === "serverRestarting") {
+      this.awaitingRestart = true;
+      this.restarting = true;
+      this.upgradePending = false;
+      this.lastError = null;
+      this.socket?.close();
+      return;
+    }
+    if (message.type === "upgradePending") {
+      this.upgradePending = true;
+      notifications.push("notice", "An update is waiting for the current work to finish.");
+      return;
+    }
+    if (message.type === "project" && typeof message.path === "string") {
+      this.projectPath = message.path;
+      return;
+    }
+    if (message.type === "error" && typeof message.message === "string") {
+      this.lastError = message.message;
+      notifications.push("error", message.message);
+      if (this.restarting) {
+        this.awaitingRestart = false;
+        this.restarting = false;
+      }
+    }
+  }
+
+  requestRestart(): void {
+    if (this.restarting) return;
+    this.restarting = true;
+    this.awaitingRestart = true;
+    if (!this.send({ type: "restartServer" })) {
+      this.restarting = false;
+      this.awaitingRestart = false;
+    }
+  }
+
+  private async waitForRestart(): Promise<void> {
+    const deadline = Date.now() + 30_000;
+    while (Date.now() < deadline) {
+      try {
+        const response = await fetch("/", { cache: "no-store", method: "HEAD" });
+        if (response.ok) {
+          location.reload();
+          return;
+        }
+      } catch {
+        // The replacement is still starting.
+      }
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    }
+    this.awaitingRestart = false;
+    this.restarting = false;
+    this.connect();
+  }
+
+  startPolling(): void {
+    window.setInterval(() => {
+      if (this.socket?.readyState === WebSocket.OPEN) {
+        this.socket.send(JSON.stringify({ type: "getVersion" }));
+      }
+    }, 3000);
+  }
+
+  dispose(): void {
+    this.disposed = true;
+    if (this.retryTimer !== undefined) clearTimeout(this.retryTimer);
+    this.socket?.close();
+  }
+}
+
+export const connection = new ConnectionStore();