@dsdenes/devboard 0.1.560 → 0.1.563

package/client/lib/components/MonacoEditor.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as monaco from "monaco-editor/editor/editor.api";
+  import "monaco-editor/languages/definitions/markdown/register";
+  import EditorWorker from "monaco-editor/editor/editor.worker?worker";
+  import { layout } from "../layout.svelte";
+
+  interface Props {
+    value: string;
+    label: string;
+    "data-testid": string;
+    language?: string;
+    readOnly?: boolean;
+    dirty?: boolean;
+    minHeight?: number;
+    onchange?: (value: string) => void;
+    onsave?: () => void;
+  }
+
+  let {
+    value,
+    label,
+    "data-testid": testid,
+    language = "markdown",
+    readOnly = false,
+    dirty = false,
+    minHeight = 0,
+    onchange,
+    onsave,
+  }: Props = $props();
+
+  let host: HTMLDivElement;
+  let editor: monaco.editor.IStandaloneCodeEditor | undefined;
+  let applyingExternal = false;
+
+  const environment = self as unknown as { MonacoEnvironment: unknown };
+  environment.MonacoEnvironment = {
+    getWorker: () => new EditorWorker(),
+  };
+
+  monaco.editor.defineTheme("devboard-dark", {
+    base: "vs-dark",
+    inherit: true,
+    rules: [
+      { token: "keyword", foreground: "ff7b72" },
+      { token: "string", foreground: "a5d6ff" },
+      { token: "comment", foreground: "8b949e", fontStyle: "italic" },
+      { token: "heading", foreground: "79c0ff", fontStyle: "bold" },
+      { token: "strong", foreground: "e6edf3", fontStyle: "bold" },
+      { token: "emphasis", foreground: "e6edf3", fontStyle: "italic" },
+    ],
+    colors: {
+      "editor.background": "#0d1117",
+      "editor.foreground": "#e6edf3",
+      "editorLineNumber.foreground": "#6e7681",
+      "editorLineNumber.activeForeground": "#c9d1d9",
+      "editor.selectionBackground": "#264f78",
+      "editor.lineHighlightBackground": "#161b22",
+      "editorCursor.foreground": "#58a6ff",
+      "editorWidget.background": "#161b22",
+      "editorWidget.border": "#6e7681",
+      "scrollbarSlider.background": "#484f5866",
+      "scrollbarSlider.hoverBackground": "#6e768199",
+    },
+  });
+
+  monaco.editor.defineTheme("devboard-light", {
+    base: "vs",
+    inherit: true,
+    rules: [
+      { token: "keyword", foreground: "cf222e" },
+      { token: "string", foreground: "0a3069" },
+      { token: "comment", foreground: "57606a", fontStyle: "italic" },
+      { token: "heading", foreground: "0550ae", fontStyle: "bold" },
+    ],
+    colors: {
+      "editor.background": "#ffffff",
+      "editor.foreground": "#1f2328",
+      "editorLineNumber.foreground": "#8c959f",
+      "editorLineNumber.activeForeground": "#1f2328",
+      "editor.selectionBackground": "#b6d7ff",
+      "editor.lineHighlightBackground": "#f6f8fa",
+      "editorCursor.foreground": "#0969da",
+      "editorWidget.background": "#ffffff",
+      "editorWidget.border": "#6e7781",
+    },
+  });
+
+  function currentTheme(): string {
+    return document.documentElement.dataset.theme === "light" ? "devboard-light" : "devboard-dark";
+  }
+
+  onMount(() => {
+    if (host === undefined) return;
+    editor = monaco.editor.create(host, {
+      value,
+      language,
+      theme: currentTheme(),
+      ariaLabel: label,
+      readOnly,
+      domReadOnly: readOnly,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      wordWrap: "on",
+      fontSize: 13,
+      lineHeight: 20,
+      fontFamily:
+        'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      padding: { top: 8, bottom: 8 },
+      renderLineHighlight: "line",
+      lineNumbersMinChars: 3,
+      folding: false,
+      glyphMargin: false,
+      overviewRulerBorder: false,
+      overviewRulerLanes: 0,
+      scrollbar: { verticalScrollbarSize: 9, horizontalScrollbarSize: 9 },
+      contextmenu: true,
+      stickyScroll: { enabled: false },
+    });
+
+    for (const area of host.querySelectorAll("textarea")) {
+      area.setAttribute("aria-label", label);
+    }
+
+    editor.onDidChangeModelContent(() => {
+      if (applyingExternal) return;
+      onchange?.(editor?.getValue() ?? "");
+    });
+
+    window.__devboardEditors ??= new Map();
+    window.__devboardEditors.set(testid, {
+      getValue: () => editor?.getValue() ?? "",
+      setValue: (text: string) => editor?.setValue(text),
+      isDirty: () => dirty,
+      save: () => onsave?.(),
+      focus: () => editor?.focus(),
+    });
+
+    return () => {
+      window.__devboardEditors?.delete(testid);
+      editor?.dispose();
+      editor = undefined;
+    };
+  });
+
+  $effect(() => {
+    const next = value;
+    if (editor === undefined) return;
+    if (editor.getValue() === next) return;
+    applyingExternal = true;
+    editor.setValue(next);
+    applyingExternal = false;
+  });
+
+  $effect(() => {
+    editor?.updateOptions({ readOnly, domReadOnly: readOnly });
+  });
+
+  $effect(() => {
+    monaco.editor.setTheme(layout.theme === "light" ? "devboard-light" : "devboard-dark");
+  });
+</script>
+
+<div
+  class="monaco-host"
+  class:is-dirty={dirty}
+  style:min-height={minHeight > 0 ? `${minHeight}px` : undefined}
+  data-testid={testid}
+  data-monaco-editor={testid}
+  data-dirty={dirty ? "true" : "false"}
+  aria-label={label}
+  role="group"
+  bind:this={host}
+></div>
+
+<style>
+  .monaco-host {
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    height: 100%;
+    min-height: 120px;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .monaco-host.is-dirty {
+    border-color: var(--warning);
+  }
+</style>

package/client/lib/components/NotificationRegion.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { Dialog } from "bits-ui";
+  import X from "lucide-svelte/icons/x";
+  import { notificationReport } from "../notification-issue";
+  import { notifications, type AppNotification } from "../notifications.svelte";
+  import Button from "./ui/button.svelte";
+
+  interface Props {
+    feedbackenabled: boolean;
+  }
+
+  let { feedbackenabled }: Props = $props();
+
+  const visible = $derived(notifications.items.slice(0, 4));
+  /** Bounds shared with the server's report context. */
+  const MAX_DOM_EXCERPT = 4000;
+  const MAX_VISIBLE_TEXT = 1500;
+
+  /** The notification whose issue is being filed, if any. */
+  let filing = $state<number | null>(null);
+  /** Filed issue URLs, keyed by notification id. */
+  let filed = $state<Record<number, string>>({});
+  /** Filing failures, keyed by notification id; an empty value is cleared. */
+  let failed = $state<Record<number, string>>({});
+
+  function setHistoryOpen(open: boolean): void {
+    if (open) notifications.openHistory();
+    else notifications.closeHistory();
+  }
+
+  function timestamp(value: string): string {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? value : date.toLocaleTimeString();
+  }
+
+  /** Files one notification as a UI issue, with the card as its captured context. */
+  async function fileIssue(item: AppNotification, event: MouseEvent): Promise<void> {
+    const element = (event.currentTarget as Element | null)?.closest(".notification") ?? null;
+    if (element === null || filing !== null || filed[item.id] !== undefined) return;
+    filing = item.id;
+    failed = { ...failed, [item.id]: "" };
+    const payload = {
+      action: "report",
+      report: notificationReport(item),
+      route: window.location.pathname,
+      url: window.location.href,
+      selector: `.notification[data-notification-id="${item.id}"]`,
+      dom_excerpt: (element.outerHTML ?? "").slice(0, MAX_DOM_EXCERPT),
+      visible_text: ((element as HTMLElement).innerText ?? element.textContent ?? "").slice(
+        0,
+        MAX_VISIBLE_TEXT,
+      ),
+      viewport: `${window.innerWidth}x${window.innerHeight} @${window.devicePixelRatio}x`,
+      captured_at: new Date().toISOString(),
+    };
+    try {
+      const response = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const body = (await response.json().catch(() => null)) as {
+        url?: unknown;
+        error?: unknown;
+      } | null;
+      if (!response.ok || typeof body?.url !== "string") {
+        throw new Error(
+          typeof body?.error === "string"
+            ? body.error
+            : `The server refused the report (${response.status}).`,
+        );
+      }
+      filed = { ...filed, [item.id]: body.url };
+    } catch (error) {
+      failed = {
+        ...failed,
+        [item.id]: error instanceof Error ? error.message : String(error),
+      };
+    } finally {
+      filing = null;
+    }
+  }
+</script>
+
+{#snippet actions(item: AppNotification)}
+  <div class="notification__actions">
+    {#if filed[item.id] !== undefined}
+      <a
+        class="notification__link"
+        href={filed[item.id]}
+        target="_blank"
+        rel="noreferrer"
+        title="Open the filed issue"
+      >
+        Open issue
+      </a>
+    {:else if feedbackenabled && (item.severity === "error" || item.severity === "warning")}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="notification__file"
+        aria-label="File an issue from this notification"
+        title="File an issue from this notification"
+        disabled={filing !== null}
+        onclick={(event) => void fileIssue(item, event)}
+      >
+        {filing === item.id ? "Filing…" : "File issue"}
+      </Button>
+    {/if}
+    <button
+      type="button"
+      class="workspace-tab__close"
+      aria-label="Dismiss notification"
+      title="Dismiss notification"
+      data-command="app.notifications.dismiss"
+      onclick={() => notifications.dismiss(item.id)}
+    >
+      <X size={12} aria-hidden="true" />
+    </button>
+  </div>
+{/snippet}
+
+<section
+  class="notification-region"
+  data-testid="notifications"
+  aria-label="Notifications"
+  aria-live="polite"
+>
+  {#each visible as item (item.id)}
+    <div class="notification" data-severity={item.severity} data-notification-id={item.id}>
+      <div class="notification__body">
+        <div class="notification__meta">{item.severity} · {timestamp(item.at)}</div>
+        <p class="notification__text" role={item.severity === "error" ? "alert" : "status"}>
+          {item.text}
+        </p>
+        {#if failed[item.id]}
+          <p class="notification__error" role="alert">Issue not filed: {failed[item.id]}</p>
+        {/if}
+      </div>
+      {@render actions(item)}
+    </div>
+  {/each}
+</section>
+
+<Dialog.Root open={notifications.historyOpen} onOpenChange={setHistoryOpen}>
+  <Dialog.Portal>
+    <Dialog.Overlay class="dialog-overlay" />
+    <Dialog.Content class="dialog-content" aria-label="Notification history" data-testid="notification-history">
+      <div class="dialog-header">
+        <Dialog.Title class="dialog-title">Notification history</Dialog.Title>
+        <Button variant="ghost" size="sm" onclick={() => notifications.closeHistory()}>
+          Close
+        </Button>
+      </div>
+      <div class="dialog-body">
+        {#if notifications.items.length === 0}
+          <p class="empty">No notifications.</p>
+        {:else}
+          <div class="history-list">
+            {#each notifications.items as item (item.id)}
+              <div
+                class="notification"
+                data-severity={item.severity}
+                data-notification-id={item.id}
+              >
+                <div class="notification__body">
+                  <div class="notification__meta">
+                    {item.severity} · {timestamp(item.at)}
+                  </div>
+                  <p class="notification__text">{item.text}</p>
+                  {#if failed[item.id]}
+                    <p class="notification__error" role="alert">
+                      Issue not filed: {failed[item.id]}
+                    </p>
+                  {/if}
+                </div>
+                {@render actions(item)}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+      <div class="dialog-footer">
+        <Button
+          variant="outline"
+          disabled={notifications.items.length === 0}
+          data-command="app.notifications.clear"
+          onclick={() => notifications.clear()}
+        >
+          Clear history
+        </Button>
+      </div>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/client/lib/components/PaneHandle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { PaneResizer } from "paneforge";
+
+  interface Props {
+    orientation: "horizontal" | "vertical";
+    minimum: number;
+    maximum: number;
+    current: number;
+    label: string;
+    ondblclick?: () => void;
+  }
+
+  let { orientation, minimum, maximum, current, label, ondblclick }: Props = $props();
+</script>
+
+<PaneResizer
+  class="pane-handle"
+  data-testid="pane-handle"
+  aria-orientation={orientation}
+  aria-valuemin={Math.round(minimum)}
+  aria-valuemax={Math.round(maximum)}
+  aria-valuenow={Math.round(current)}
+  aria-label={label}
+  {ondblclick}
+/>

package/client/lib/components/ScoutIssues.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+  import Inbox from "lucide-svelte/icons/inbox";
+  import type { ScoutIssueRow } from "../types";
+
+  interface Props {
+    issues: ScoutIssueRow[];
+  }
+
+  let { issues }: Props = $props();
+
+  /** A local clock reading; the raw ISO value stays in the cell tooltip. */
+  function createdLabel(value: string): string {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    return date.toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+  }
+
+  /** Newest creation first; the number breaks a same-instant tie. */
+  const rows = $derived(
+    [...issues].sort((left, right) => {
+      const leftAt = Date.parse(left.createdAt);
+      const rightAt = Date.parse(right.createdAt);
+      if (Number.isFinite(leftAt) && Number.isFinite(rightAt) && leftAt !== rightAt) {
+        return rightAt - leftAt;
+      }
+      return right.number - left.number;
+    }),
+  );
+</script>
+
+<section class="panel" aria-label="Auto Scout issues">
+  <div class="panel__header">
+    <h2 class="panel__title">Filed issues</h2>
+    <span class="panel__subtitle">{rows.length}</span>
+  </div>
+  <div class="panel__body panel__body--flush" data-testid="scout-issues">
+    {#if rows.length === 0}
+      <div class="scout-issues__empty" data-testid="scout-issues-empty">
+        <div class="scout-issues__empty-body">
+          <span class="scout-issues__empty-icon" aria-hidden="true">
+            <Inbox size={20} strokeWidth={1.5} />
+          </span>
+          <p class="scout-issues__empty-title">No issues filed yet</p>
+          <p class="scout-issues__empty-copy">
+            Auto Scout files significant findings here after each scan.
+          </p>
+        </div>
+      </div>
+    {:else}
+      <div class="table-wrap">
+        <table class="scout-issues-table">
+          <thead>
+            <tr>
+              <th scope="col">Title</th>
+              <th scope="col">Created</th>
+              <th scope="col">Category</th>
+              <th scope="col">State</th>
+              <th scope="col">Shipped</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each rows as row (row.number)}
+              <tr
+                data-testid="scout-issue"
+                data-number={row.number}
+                data-state={row.state}
+                data-version={row.version ?? "—"}
+              >
+                <td class="scout-issues-table__title">
+                  <a
+                    data-testid="scout-issue-title"
+                    href={row.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    title={row.title}
+                  >
+                    {row.title}
+                  </a>
+                </td>
+                <td class="mono" data-testid="scout-issue-created" title={row.createdAt}>
+                  <time datetime={row.createdAt}>{createdLabel(row.createdAt)}</time>
+                </td>
+                <td data-testid="scout-issue-type">{row.category ?? "—"}</td>
+                <td>
+                  <span
+                    class="badge"
+                    data-tone={row.state === "pending" ? "accent" : "success"}
+                    data-testid="scout-issue-state"
+                  >
+                    {row.state}
+                  </span>
+                </td>
+                <td class="mono" data-testid="scout-issue-version">{row.version ?? "—"}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .scout-issues__empty {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    padding: 24px 16px;
+    text-align: center;
+  }
+
+  .scout-issues__empty-body {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 360px;
+  }
+
+  .scout-issues__empty-icon {
+    color: var(--muted-foreground);
+    display: flex;
+    margin-bottom: 4px;
+  }
+
+  .scout-issues__empty-title {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  .scout-issues__empty-copy {
+    color: var(--muted-foreground);
+    font-size: 12px;
+    line-height: 1.45;
+    margin: 0;
+  }
+
+  .table-wrap {
+    overflow: auto;
+    width: 100%;
+  }
+
+  tbody tr:hover {
+    background: var(--row-hover);
+  }
+
+  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;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  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;
+  }
+
+  th:nth-child(1) {
+    width: 40%;
+  }
+  th:nth-child(2) {
+    width: 20%;
+  }
+  th:nth-child(3) {
+    width: 12%;
+  }
+  th:nth-child(4) {
+    width: 15%;
+  }
+  th:nth-child(5) {
+    width: 13%;
+  }
+
+  .scout-issues-table__title {
+    overflow-wrap: anywhere;
+  }
+
+  .scout-issues-table__title a {
+    color: var(--foreground);
+    text-decoration: none;
+  }
+
+  .scout-issues-table__title a:hover {
+    color: var(--accent);
+    text-decoration: underline;
+  }
+</style>