@dsdenes/devboard 0.1.560 → 0.1.563

package/client/lib/components/CommandPalette.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import { Dialog } from "bits-ui";
+  import { notifications } from "../notifications.svelte";
+  import type { CommandDef } from "../commands";
+
+  interface Props {
+    open: boolean;
+    commands: CommandDef[];
+    onclose: () => void;
+  }
+
+  let { open, commands, onclose }: Props = $props();
+
+  let query = $state("");
+  let activeIndex = $state(0);
+  let input: HTMLInputElement | undefined = $state();
+  let list: HTMLDivElement | undefined = $state();
+
+  const filtered = $derived.by(() => {
+    const needle = query.trim().toLowerCase();
+    if (needle.length === 0) return commands;
+    return commands.filter((command) => {
+      const haystack = `${command.title} ${command.group} ${command.id} ${command.keywords ?? ""}`;
+      return haystack.toLowerCase().includes(needle);
+    });
+  });
+
+  const active = $derived(filtered[activeIndex]);
+
+  function isDisabled(command: CommandDef | undefined): boolean {
+    return command?.disabled?.() != null;
+  }
+
+  function reset(): void {
+    query = "";
+    activeIndex = 0;
+  }
+
+  function move(delta: number): void {
+    if (filtered.length === 0) return;
+    let index = activeIndex;
+    for (let step = 0; step < filtered.length; step += 1) {
+      index = (index + delta + filtered.length) % filtered.length;
+      if (!isDisabled(filtered[index])) break;
+    }
+    activeIndex = index;
+    queueMicrotask(() => {
+      document
+        .getElementById(`palette-item-${activeIndex}`)
+        ?.scrollIntoView({ block: "nearest" });
+    });
+  }
+
+  function edge(end: "start" | "end"): void {
+    const enabled = filtered
+      .map((command, index) => ({ command, index }))
+      .filter((entry) => !isDisabled(entry.command));
+    if (enabled.length === 0) return;
+    activeIndex = edgeIndex(enabled, end);
+  }
+
+  function edgeIndex(
+    enabled: Array<{ command: CommandDef; index: number }>,
+    end: "start" | "end",
+  ): number {
+    return end === "start" ? (enabled[0]?.index ?? 0) : (enabled[enabled.length - 1]?.index ?? 0);
+  }
+
+  function run(command: CommandDef | undefined): void {
+    if (command === undefined) return;
+    const reason = command.disabled?.();
+    if (reason != null) return;
+    notifications.markRead();
+    onclose();
+    void Promise.resolve(command.run()).catch(() => {
+      /* A command that cannot run reports through its surface. */
+    });
+  }
+
+  function onkeydown(event: KeyboardEvent): void {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      edge("start");
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      edge("end");
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      run(active);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onclose();
+    }
+  }
+
+  function onOpenChange(value: boolean): void {
+    if (!value) onclose();
+  }
+
+  $effect(() => {
+    if (open) {
+      reset();
+      void tick().then(() => input?.focus());
+    }
+  });
+
+  $effect(() => {
+    void filtered.length;
+    if (activeIndex >= filtered.length) activeIndex = 0;
+  });
+
+</script>
+
+<Dialog.Root {open} onOpenChange={onOpenChange}>
+  <Dialog.Portal>
+    <Dialog.Overlay class="dialog-overlay" />
+    <Dialog.Content class="palette" data-testid="command-palette" aria-label="Command palette">
+      <Dialog.Title class="sr-only">Command palette</Dialog.Title>
+      <Dialog.Description class="sr-only">
+        Search and run any Devboard command with the keyboard.
+      </Dialog.Description>
+      <div class="palette__search">
+        <input
+          bind:this={input}
+          bind:value={query}
+          class="h-8 w-full rounded-sm border border-[var(--border-strong)] bg-[var(--background)] px-2 text-[13px] text-[var(--foreground)] outline-none placeholder:text-[var(--muted-foreground)] focus-visible:border-[var(--ring)] focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls="command-palette-list"
+          aria-autocomplete="list"
+          aria-activedescendant={active === undefined ? undefined : `palette-item-${activeIndex}`}
+          aria-label="Search commands"
+          placeholder="Type a command…"
+          data-testid="command-palette-input"
+          {onkeydown}
+        />
+      </div>
+      <div
+        class="palette__list"
+        id="command-palette-list"
+        role="listbox"
+        aria-label="Commands"
+        bind:this={list}
+      >
+        {#if filtered.length === 0}
+          <p class="palette__empty">No commands match “{query}”.</p>
+        {:else}
+          {#each filtered as command, index (command.id)}
+            {@const disabledReason = command.disabled?.()}
+            {#if index === 0 || filtered[index - 1]?.group !== command.group}
+              <div class="palette__group">{command.group}</div>
+            {/if}
+            <button
+              type="button"
+              id={`palette-item-${index}`}
+              class="palette__item"
+              role="option"
+              aria-selected={index === activeIndex}
+              aria-disabled={disabledReason != null}
+              data-testid="command-item"
+              data-command={command.id}
+              onclick={() => run(command)}
+              onmouseenter={() => {
+                if (!isDisabled(command)) activeIndex = index;
+              }}
+            >
+              <span class="palette__item-title">{command.title}</span>
+              {#if disabledReason != null}
+                <span class="palette__item-reason">{disabledReason}</span>
+              {/if}
+              {#if command.shortcut !== undefined}
+                <kbd class="palette__shortcut">{command.shortcut}</kbd>
+              {/if}
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/client/lib/components/ConceptKind.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Box from "lucide-svelte/icons/box";
+  import Hash from "lucide-svelte/icons/hash";
+  import Scale from "lucide-svelte/icons/scale";
+  import Tag from "lucide-svelte/icons/tag";
+  import UserCog from "lucide-svelte/icons/user-cog";
+  import UserRound from "lucide-svelte/icons/user-round";
+  import Zap from "lucide-svelte/icons/zap";
+
+  interface Props {
+    kind: string;
+  }
+
+  let { kind }: Props = $props();
+
+  const ICONS = {
+    actor: UserRound,
+    entity: Box,
+    event: Zap,
+    field: Tag,
+    role: UserCog,
+    rule: Scale,
+    value: Hash,
+  } as const;
+
+  const normalized = $derived(kind.trim().toLowerCase());
+  const Icon = $derived(
+    ICONS[normalized as keyof typeof ICONS] ?? Tag,
+  );
+</script>
+
+<span class="discover-kind" data-kind={normalized} title={kind}>
+  <Icon size={12} strokeWidth={1.7} aria-hidden="true" />
+  <span>{kind}</span>
+</span>
+
+<style>
+  .discover-kind {
+    align-items: center;
+    display: inline-flex;
+    gap: 4px;
+    white-space: nowrap;
+  }
+
+  .discover-kind[data-kind="entity"] {
+    color: var(--accent);
+  }
+  .discover-kind[data-kind="event"] {
+    color: var(--warning);
+  }
+  .discover-kind[data-kind="field"] {
+    color: var(--muted-foreground);
+  }
+  .discover-kind[data-kind="role"] {
+    color: var(--success);
+  }
+  .discover-kind[data-kind="actor"] {
+    color: var(--flow-entity-border);
+  }
+  .discover-kind[data-kind="value"] {
+    color: var(--flow-dependency-border);
+  }
+  .discover-kind[data-kind="rule"] {
+    color: var(--error);
+  }
+</style>

package/client/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Dialog } from "bits-ui";
+  import Button from "./ui/button.svelte";
+
+  interface Props {
+    open: boolean;
+    title: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    testid?: string;
+    confirmCommand?: string;
+    cancelCommand?: string;
+    onconfirm: () => void;
+    oncancel: () => void;
+  }
+
+  let {
+    open,
+    title,
+    message,
+    confirmLabel,
+    cancelLabel = "Cancel",
+    destructive = false,
+    testid,
+    confirmCommand,
+    cancelCommand,
+    onconfirm,
+    oncancel,
+  }: Props = $props();
+</script>
+
+<Dialog.Root {open} onOpenChange={(value) => { if (!value) oncancel(); }}>
+  <Dialog.Portal>
+    <Dialog.Overlay class="dialog-overlay" />
+    <Dialog.Content class="dialog-content" data-testid={testid} aria-label={title}>
+      <div class="dialog-header">
+        <Dialog.Title class="dialog-title">{title}</Dialog.Title>
+      </div>
+      <div class="dialog-body">
+        <Dialog.Description class="muted text-[12px]">{message}</Dialog.Description>
+      </div>
+      <div class="dialog-footer">
+        <Button
+          variant="outline"
+          data-command={cancelCommand}
+          onclick={oncancel}
+        >
+          {cancelLabel}
+        </Button>
+        <Button
+          variant={destructive ? "destructive" : "default"}
+          data-command={confirmCommand}
+          onclick={onconfirm}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/client/lib/components/DataTable.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { createTable, FlexRender } from "@tanstack/svelte-table";
+  import { tableFeatures } from "@tanstack/table-core";
+
+  interface Props {
+    columns: unknown[];
+    rows: Array<Record<string, unknown>>;
+    "data-testid"?: string;
+    rowTestId?: string;
+    rowAttrs?: (row: Record<string, unknown>) => Record<string, string | undefined>;
+    rowCommand?: (row: Record<string, unknown>) => string | undefined;
+    onRowActivate?: (row: Record<string, unknown>) => void;
+    cellValue?: (row: Record<string, unknown>, columnId: string) => string;
+    cell?: Snippet<[Record<string, unknown>, string]>;
+    cellAttrs?: (row: Record<string, unknown>, columnId: string) => Record<string, string | undefined>;
+    cellTestId?: (row: Record<string, unknown>, columnId: string) => string | undefined;
+    getRowId?: (row: Record<string, unknown>, index: number) => string;
+    emptyText?: string;
+    caption?: string;
+    /** Omit the header row; the cells carry all the information. */
+    hideHeader?: boolean;
+    /** Fixed column widths keyed by column id; aligns repeated tables. */
+    columnWidths?: Record<string, string>;
+    compact?: boolean;
+    /** Let cells wrap instead of truncating to one line. */
+    wrap?: boolean;
+    /** Grow with the page instead of scrolling inside the table. */
+    full?: boolean;
+  }
+
+  let {
+    columns,
+    rows,
+    "data-testid": testid,
+    rowTestId,
+    rowAttrs,
+    rowCommand,
+    onRowActivate,
+    cellValue,
+    cell,
+    cellAttrs,
+    cellTestId,
+    getRowId,
+    emptyText = "No records.",
+    caption,
+    hideHeader = false,
+    columnWidths,
+    compact = true,
+    wrap = false,
+    full = false,
+  }: Props = $props();
+
+  const features = tableFeatures({});
+
+  const table = createTable({
+    features,
+    get data() {
+      return rows;
+    },
+    get columns() {
+      return columns as never;
+    },
+    getRowId: (row: Record<string, unknown>, index: number) => getRowId?.(row, index) ?? String(index),
+  });
+
+  function attributes(row: Record<string, unknown>): Record<string, string | undefined> {
+    const attrs = rowAttrs?.(row) ?? {};
+    const command = rowCommand?.(row);
+    return command === undefined ? attrs : { ...attrs, "data-command": command };
+  }
+</script>
+
+<div class="table-wrap" class:compact class:wrap class:full class:widths={columnWidths !== undefined}>
+  <table data-testid={testid} aria-label={caption}>
+    {#if caption !== undefined}
+      <caption>{caption}</caption>
+    {/if}
+    {#if columnWidths !== undefined}
+      <colgroup>
+        {#each columns as column, index (index)}
+          {@const id = (column as { id?: unknown }).id}
+          <col style:width={typeof id === "string" ? columnWidths[id] : undefined} />
+        {/each}
+      </colgroup>
+    {/if}
+    {#if !hideHeader}
+      <thead>
+        {#each table.getHeaderGroups() as group (group.id)}
+          <tr>
+            {#each group.headers as header (header.id)}
+              <th scope="col">
+                {#if !header.isPlaceholder}
+                  <FlexRender header={header} />
+                {/if}
+              </th>
+            {/each}
+          </tr>
+        {/each}
+      </thead>
+    {/if}
+    <tbody>
+      {#each table.getRowModel().rows as row (row.id)}
+        {@const data = row.original as Record<string, unknown>}
+        <tr
+          data-testid={rowTestId}
+          {...attributes(data)}
+          tabindex={onRowActivate === undefined ? undefined : 0}
+          onclick={onRowActivate === undefined ? undefined : () => onRowActivate(data)}
+          onkeydown={onRowActivate === undefined
+            ? undefined
+            : (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  onRowActivate(data);
+                }
+              }}
+        >
+          {#each row.getAllCells() as tableCell (tableCell.id)}
+            <td
+              {...cellAttrs?.(data, tableCell.column.id) ?? {}}
+              data-testid={cellTestId?.(data, tableCell.column.id)}
+            >
+              {#if cell !== undefined}
+                {@render cell(data, tableCell.column.id)}
+              {:else if cellValue !== undefined}
+                {cellValue(data, tableCell.column.id)}
+              {:else}
+                <FlexRender cell={tableCell} />
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {:else}
+        <tr class="empty-row">
+          <td colspan={columns.length}>{emptyText}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .table-wrap {
+    min-height: 0;
+    overflow: auto;
+    width: 100%;
+  }
+
+  table {
+    border-collapse: collapse;
+    font-size: 12px;
+    table-layout: auto;
+    width: 100%;
+  }
+
+  .widths table {
+    table-layout: fixed;
+  }
+
+  caption {
+    color: var(--muted-foreground);
+    font-size: 12px;
+    padding: 4px 6px;
+    text-align: left;
+  }
+
+  th {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    padding: 3px 8px;
+    position: sticky;
+    text-align: left;
+    text-transform: uppercase;
+    top: 0;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  td {
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--foreground);
+    padding: 0 8px;
+    vertical-align: middle;
+  }
+
+  tbody tr {
+    height: 28px;
+    max-height: 32px;
+  }
+
+  tbody tr[tabindex="0"] {
+    cursor: pointer;
+  }
+
+  tbody tr:hover,
+  tbody tr:focus-visible {
+    background: var(--row-hover);
+    outline: none;
+  }
+
+  tbody tr:focus-visible {
+    box-shadow: inset 0 0 0 1px var(--ring);
+  }
+
+  .compact td {
+    line-height: 26px;
+    max-width: 320px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .wrap tbody tr {
+    height: auto;
+    max-height: none;
+  }
+
+  .wrap td {
+    line-height: 1.45;
+    max-width: none;
+    overflow: visible;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    text-overflow: clip;
+    vertical-align: top;
+    white-space: normal;
+  }
+
+  .full {
+    overflow: visible;
+  }
+
+  .empty-row td {
+    color: var(--muted-foreground);
+    height: 32px;
+    text-align: center;
+  }
+</style>

package/client/lib/components/DetailSplit.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { onMount, type Snippet } from "svelte";
+  import { Pane, PaneGroup } from "paneforge";
+  import { layout } from "../layout.svelte";
+  import PaneHandle from "./PaneHandle.svelte";
+
+  interface Props {
+    id: string;
+    label: string;
+    defaultSplit?: number;
+    main: Snippet;
+    detail: Snippet;
+  }
+
+  let { id, label, defaultSplit = 62, main, detail }: Props = $props();
+
+  let group: { setLayout: (sizes: number[]) => void } | undefined = $state();
+  let container: HTMLDivElement | undefined = $state();
+  let sizes = $state<number[]>([]);
+  let groupWidth = $state(0);
+
+  const available = $derived(groupWidth > 0 ? groupWidth : 960);
+  // Paneforge stores percentages and rounds down; keep a 2px buffer so the
+  // rendered pane never measures below the documented 160px minimum.
+  const minimumPercent = $derived(((160 + 2) / available) * 100);
+  const mainPercent = $derived(sizes[0] ?? defaultSplit);
+
+  function reset(): void {
+    group?.setLayout([defaultSplit, 100 - defaultSplit]);
+  }
+
+  onMount(() => {
+    if (container === undefined) return;
+    const observer = new ResizeObserver(() => {
+      groupWidth = container?.getBoundingClientRect().width ?? 0;
+    });
+    observer.observe(container);
+    groupWidth = container.getBoundingClientRect().width;
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="split-fill" bind:this={container}>
+<PaneGroup
+  direction="horizontal"
+  autoSaveId={`devboard.detail.${id}.${layout.epoch}`}
+  bind:this={group}
+  onLayoutChange={(next) => {
+    if (next.length === 2) sizes = next;
+  }}
+  class="split-fill"
+>
+  <Pane minSize={minimumPercent} class="pane-fill">
+    {@render main()}
+  </Pane>
+  <PaneHandle
+    orientation="vertical"
+    minimum={160}
+    maximum={available - 160}
+    current={(mainPercent / 100) * available}
+    label={`${label} split`}
+    ondblclick={reset}
+  />
+  <Pane minSize={minimumPercent} class="pane-fill">
+    {@render detail()}
+  </Pane>
+</PaneGroup>
+</div>