@agimon-ai/doompi-web 0.0.1-alpha.0

package/src/web/features/sessions/SessionRail.tsx

@@ -0,0 +1,411 @@
+import {
+  BranchIcon,
+  Button,
+  buttonVariants,
+  cn,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  GearIcon,
+  Input,
+  KebabIcon,
+  PlusIcon,
+  SectionLabel,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@agimon-ai/doompi-web-components';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import { useEffect, useRef, useState } from 'react';
+import { MascotMark } from '../../components/MascotMark.tsx';
+import { PluginSurface } from '../../components/PluginSurface.tsx';
+import { HOST_SLOTS } from '../../lib/pluginRegistry.ts';
+import { stopSession } from '../../lib/hubApi.ts';
+import { abbreviateCwd, runningCount, sessionStatusLine } from '../../lib/sessionSummary.ts';
+import { DEFAULT_SETTINGS_SECTION } from '../../lib/settingsSections.ts';
+import { paletteStore } from '../../stores/paletteStore.ts';
+import { renameSession, sessionStoreFor } from '../../stores/sessionStore.ts';
+import { sessionsStore, type SessionMeta } from '../../stores/sessionsStore.ts';
+import { NewSessionDialog } from './NewSessionDialog.tsx';
+
+const STATUS_REFRESH_MS = 30_000;
+
+/**
+ * What the card is doing besides showing its session: nothing, showing its
+ * action menu, taking a new name, or asking before a stop.
+ */
+type CardMode = 'view' | 'menu' | 'rename' | 'confirm';
+
+/** The confirmation that stands between the "remove" menu item and the stop. */
+function RemoveSessionDialog({
+  sessionId,
+  name,
+  open,
+  onConfirm,
+  onCancel,
+}: {
+  sessionId: string;
+  name: string;
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onCancel();
+      }}
+    >
+      <DialogContent width="sm" data-testid={`session-stop-dialog-${sessionId}`} aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>remove session</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <DialogDescription>
+            this stops <span className="font-bold text-doom-hi">{name || 'untitled'}</span> and removes it from the
+            rail. anything it is running ends now.
+          </DialogDescription>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              size="md"
+              data-testid={`session-stop-cancel-${sessionId}`}
+              autoFocus
+              onClick={onCancel}
+            >
+              cancel
+            </Button>
+            <Button variant="danger" size="md" data-testid={`session-stop-confirm-${sessionId}`} onClick={onConfirm}>
+              remove
+            </Button>
+          </DialogFooter>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SessionCard({
+  meta,
+  ordinal,
+  active,
+  now,
+}: {
+  meta: SessionMeta;
+  ordinal: number;
+  active: boolean;
+  now: number;
+}) {
+  const navigate = useNavigate();
+  const summary = meta.summary;
+  const [mode, setMode] = useState<CardMode>('view');
+  const [draft, setDraft] = useState('');
+  const [error, setError] = useState('');
+  // Read when the menu closes: a choice that moved the card into another
+  // mode keeps the focus it took, rather than handing it back to the kebab.
+  const modeRef = useRef(mode);
+  modeRef.current = mode;
+  const status = sessionStatusLine(
+    {
+      attach: meta.attach,
+      phase: summary.phase,
+      phaseSince: summary.phaseSince,
+      awaitingInput: summary.awaitingInput,
+      everPrompted: summary.everPrompted,
+      lastSettledAt: summary.lastSettledAt,
+    },
+    now,
+  );
+
+  const beginRename = (): void => {
+    setDraft(summary.name);
+    setError('');
+    setMode('rename');
+  };
+  const commitRename = (): void => {
+    const name = draft.trim();
+    if (name && name !== summary.name) renameSession(name, summary.id);
+    setMode('view');
+  };
+  const stop = async (): Promise<void> => {
+    setMode('view');
+    const result = await stopSession(summary.id);
+    if ('error' in result) setError(result.error);
+  };
+
+  const cardClass = active ? 'bg-doom-selected hover:bg-doom-selected' : 'hover:bg-doom-panel';
+  const menuOpen = mode === 'menu';
+  const details = (
+    <>
+      <span
+        data-testid="session-status"
+        className={`text-[11px] leading-snug ${active ? 'line-clamp-2 text-doom-on-selected/85' : 'truncate text-doom-dim'}`}
+      >
+        {status}
+      </span>
+      {summary.git ? (
+        <span
+          data-testid="session-branch"
+          className={`flex items-center gap-[7px] pt-0.5 text-[10px] ${active ? 'text-doom-on-selected/85' : 'text-doom-faint'}`}
+        >
+          <BranchIcon
+            className={`h-[10px] w-[10px] shrink-0 ${active ? 'text-doom-on-selected/70' : 'text-doom-faint'}`}
+          />
+          {summary.git.branch}
+          {summary.git.dirty ? '*' : ''}
+        </span>
+      ) : null}
+      <span className={`truncate text-[10px] ${active ? 'text-doom-on-selected/70' : 'text-doom-faint'}`}>
+        {abbreviateCwd(summary.cwd)}
+      </span>
+      {error ? (
+        <span data-testid="session-error" className="line-clamp-3 text-[10px] break-words text-doom-red">
+          {error}
+        </span>
+      ) : null}
+    </>
+  );
+
+  return (
+    <div className="group relative" data-testid={`session-card-${summary.id}`} data-active={active}>
+      {mode === 'rename' ? (
+        // The name field cannot live inside the card button, so the card
+        // briefly stops being one while it takes a name.
+        <div className={cn(buttonVariants({ variant: 'ghost', size: 'card' }), cardClass, 'cursor-default')}>
+          <Input
+            data-testid={`session-name-input-${summary.id}`}
+            value={draft}
+            autoFocus
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') commitRename();
+              if (event.key === 'Escape') setMode('view');
+            }}
+            onBlur={() => setMode('view')}
+            className="border-doom-blue/60 px-1.5 py-0.5 text-[13px] font-bold"
+          />
+          {details}
+        </div>
+      ) : (
+        <Button
+          variant="ghost"
+          size="card"
+          data-testid={`session-open-${summary.id}`}
+          onClick={() => void navigate({ to: '/session/$sessionId', params: { sessionId: summary.id } })}
+          className={cardClass}
+        >
+          <div className="flex items-center gap-2">
+            <span
+              className={`min-w-0 flex-1 truncate text-[13px] font-bold ${active ? 'text-doom-on-selected' : 'text-doom-hi'}`}
+            >
+              {summary.name || 'untitled'}
+            </span>
+            {ordinal <= 9 ? (
+              <span
+                title={`press ${String(ordinal)} to focus`}
+                className={`flex h-[17px] w-[17px] shrink-0 items-center justify-center rounded-full text-[9px] font-bold transition-opacity group-focus-within:opacity-0 group-hover:opacity-0 ${
+                  active ? 'bg-doom-on-selected/20 text-doom-on-selected' : 'bg-doom-tint-magenta text-doom-magenta'
+                }`}
+              >
+                {ordinal}
+              </span>
+            ) : null}
+          </div>
+          {details}
+        </Button>
+      )}
+
+      {mode === 'view' || menuOpen ? (
+        <div
+          className={`absolute top-2 right-2 transition-opacity ${
+            menuOpen ? 'opacity-100' : 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'
+          }`}
+        >
+          <DropdownMenu
+            open={menuOpen}
+            onOpenChange={(next) => setMode((current) => (next ? 'menu' : current === 'menu' ? 'view' : current))}
+          >
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                data-testid={`session-menu-${summary.id}`}
+                title="session actions"
+                className={
+                  active
+                    ? 'text-doom-on-selected/80 hover:bg-doom-on-selected/20 hover:text-doom-on-selected data-[state=open]:bg-doom-on-selected/20 data-[state=open]:text-doom-on-selected'
+                    : 'text-doom-faint hover:bg-doom-deep hover:text-doom-hi data-[state=open]:bg-doom-deep data-[state=open]:text-doom-hi'
+                }
+              >
+                <KebabIcon className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              data-testid={`session-menu-list-${summary.id}`}
+              onCloseAutoFocus={(event) => {
+                if (modeRef.current !== 'view') event.preventDefault();
+              }}
+            >
+              <DropdownMenuItem data-testid={`session-rename-${summary.id}`} onSelect={beginRename}>
+                edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                variant="destructive"
+                data-testid={`session-stop-${summary.id}`}
+                onSelect={() => setMode('confirm')}
+              >
+                remove
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ) : null}
+      <RemoveSessionDialog
+        sessionId={summary.id}
+        name={summary.name}
+        open={mode === 'confirm'}
+        onConfirm={() => void stop()}
+        onCancel={() => setMode('view')}
+      />
+    </div>
+  );
+}
+
+function isEditable(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+}
+
+/** A key pressed inside an overlay belongs to that overlay, never to the rail. */
+function insideOverlay(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest('[role="dialog"], [role="menu"], [role="alertdialog"]') !== null;
+}
+
+/** The mockup's rail: brand, live session cards, the new-session flow, and nothing else. */
+export function SessionRail() {
+  const navigate = useNavigate();
+  const order = useStore(sessionsStore, (state) => state.order);
+  const byId = useStore(sessionsStore, (state) => state.byId);
+  const activeId = useStore(sessionsStore, (state) => state.activeId);
+  const hasDialog = useStore(sessionStoreFor(activeId), (state) => state.dialog !== null);
+  const [creating, setCreating] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+
+  // Keeps "running · 12m" honest without any frame arriving.
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), STATUS_REFRESH_MS);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.ctrlKey && !event.metaKey && !event.altKey && event.key === 't') {
+        event.preventDefault();
+        setCreating(true);
+        return;
+      }
+      if (event.ctrlKey || event.metaKey || event.altKey || event.defaultPrevented) return;
+      if (isEditable(event.target) || insideOverlay(event.target) || paletteStore.state.open || hasDialog) return;
+      const ordinal = Number.parseInt(event.key, 10);
+      if (!Number.isInteger(ordinal) || ordinal < 1 || ordinal > 9) return;
+      const target = order[ordinal - 1];
+      if (target === undefined) return;
+      event.preventDefault();
+      void navigate({ to: '/session/$sessionId', params: { sessionId: target } });
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [order, hasDialog, navigate]);
+
+  const running = runningCount(order.map((id) => byId[id].summary.phase));
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-[9px] border-b border-doom-border px-4 pt-4 pb-3.5">
+        <span className="flex items-center gap-[3px]" aria-label="DoomPi">
+          <span aria-hidden="true" className="text-[15px] font-bold tracking-[0.16em] text-doom-hi">
+            DOOM
+          </span>
+          <MascotMark size={22} />
+        </span>
+      </div>
+
+      <div className="flex items-center justify-between px-4 pt-3.5 pb-2">
+        <SectionLabel>sessions</SectionLabel>
+        <span className="flex items-center gap-2.5">
+          <span data-testid="sessions-running-rail" className="text-[9px] text-doom-faint">
+            {running} running
+          </span>
+          {/* The rail's own action lives in its heading, where a heading's
+              action belongs, instead of a full-width button competing with the
+              cards for the eye. */}
+          <Button
+            variant="ghost"
+            size="icon"
+            data-testid="new-session-open"
+            title="new session"
+            aria-label="new session"
+            onClick={() => setCreating(true)}
+            className="text-doom-faint hover:text-doom-hi"
+          >
+            <PlusIcon className="h-3 w-3" />
+          </Button>
+        </span>
+      </div>
+      <div className="flex flex-col gap-1 px-2.5">
+        {order.map((id, index) => (
+          <SessionCard key={id} meta={byId[id]} ordinal={index + 1} active={id === activeId} now={now} />
+        ))}
+      </div>
+      {/* With no sessions the rail has nothing to show and the plus alone is a
+          thin invitation, so the empty state spells the action out. */}
+      {order.length === 0 ? (
+        <div className="px-2.5 pt-2">
+          <Button
+            variant="outline"
+            size="lg"
+            data-testid="new-session-empty"
+            onClick={() => setCreating(true)}
+            className="w-full justify-start px-[11px] text-[11px]"
+          >
+            <PlusIcon className="h-3 w-3" />
+            new session
+          </Button>
+        </div>
+      ) : null}
+
+      <PluginSurface slot={HOST_SLOTS.rail} sessionId={activeId} />
+      <div className="flex-1" />
+      <div className="flex items-center gap-2.5 border-t border-doom-border px-4 py-3">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button asChild variant="ghost" size="icon" className="text-doom-faint">
+              <Link
+                to="/settings/$section"
+                params={{ section: DEFAULT_SETTINGS_SECTION }}
+                data-testid="settings-open"
+                aria-label="settings"
+              >
+                <GearIcon className="h-3 w-3" />
+              </Link>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">settings</TooltipContent>
+        </Tooltip>
+        <span className="text-[9px] text-doom-faint">ctrl+k commands · ctrl+t new session</span>
+      </div>
+
+      {creating ? <NewSessionDialog onClose={() => setCreating(false)} /> : null}
+    </div>
+  );
+}

package/src/web/features/settings/AppearanceSettings.tsx

@@ -0,0 +1,88 @@
+import { CheckIcon, RadioGroup, RadioGroupCard } from '@agimon-ai/doompi-web-components';
+import type { ThemeConfig } from '@agimon-ai/doompi-web-components/theme';
+import { useStore } from '@tanstack/react-store';
+import { availableThemes, selectTheme, themeStore } from '../../stores/themeStore.ts';
+
+/** The accents a swatch previews, in the order the bar shows them. */
+const SWATCH_ACCENTS = ['blue', 'green', 'yellow', 'red', 'magenta', 'cyan'] as const;
+
+/** A miniature of the cockpit in the theme's own colours, drawn from its tokens rather than the page's. */
+function ThemeSwatch({ theme }: { theme: ThemeConfig }) {
+  const { tokens } = theme;
+  return (
+    <div
+      aria-hidden
+      className="flex h-[74px] w-full overflow-hidden rounded border"
+      style={{ backgroundColor: tokens.bg, borderColor: tokens.border }}
+    >
+      <div className="flex w-[34%] flex-col gap-1 p-1.5" style={{ backgroundColor: tokens.rail }}>
+        <span className="h-[7px] w-full rounded-sm" style={{ backgroundColor: tokens.selected }} />
+        <span className="h-[7px] w-3/4 rounded-sm" style={{ backgroundColor: tokens.panel }} />
+        <span className="h-[7px] w-3/4 rounded-sm" style={{ backgroundColor: tokens.panel }} />
+      </div>
+      <div className="flex flex-1 flex-col justify-between p-1.5">
+        <div className="flex flex-col gap-1">
+          <span className="h-[5px] w-2/3 rounded-sm" style={{ backgroundColor: tokens.text }} />
+          <span className="h-[5px] w-1/2 rounded-sm" style={{ backgroundColor: tokens.dim }} />
+        </div>
+        <div className="flex gap-1">
+          {SWATCH_ACCENTS.map((accent) => (
+            <span key={accent} className="h-2 w-2 rounded-full" style={{ backgroundColor: tokens[accent] }} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The appearance page: the shipped themes as a picker. A choice applies at
+ * once and is remembered per browser; the token contract the themes fill
+ * is documented in the component library.
+ */
+export function AppearanceSettings() {
+  const current = useStore(themeStore, (state) => state.name);
+  return (
+    <div data-testid="appearance-settings" className="flex max-w-[780px] flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h2 className="text-[13px] font-bold text-doom-hi">appearance</h2>
+        <p className="text-[11px] leading-relaxed text-doom-dim">
+          pick the theme the cockpit renders with. the choice is remembered in this browser; every colour on the page,
+          including the plugins&apos; tabs, follows it.
+        </p>
+      </div>
+      <RadioGroup
+        aria-label="theme"
+        data-testid="theme-list"
+        className="grid grid-cols-3 gap-3"
+        value={current}
+        onValueChange={selectTheme}
+      >
+        {availableThemes().map((theme) => {
+          const selected = theme.name === current;
+          return (
+            <RadioGroupCard
+              key={theme.name}
+              value={theme.name}
+              data-testid={`theme-${theme.name}`}
+              data-selected={selected}
+              className="flex flex-col gap-2 p-2.5"
+            >
+              <ThemeSwatch theme={theme} />
+              <span className="flex items-center gap-2">
+                <span className={`flex-1 text-[12px] font-bold ${selected ? 'text-doom-blue' : 'text-doom-hi'}`}>
+                  {theme.label}
+                </span>
+                <span className="text-[9px] text-doom-faint">{theme.scheme}</span>
+                {selected ? <CheckIcon className="h-3 w-3 text-doom-blue" /> : null}
+              </span>
+            </RadioGroupCard>
+          );
+        })}
+      </RadioGroup>
+      <p className="text-[10px] leading-relaxed text-doom-faint">
+        a theme is a JSON config of twenty palette tokens; see @agimon-ai/doompi-web-components for the contract.
+      </p>
+    </div>
+  );
+}