@robota-sdk/agent-ui-web 0.0.0-stage → 3.0.0-beta.100

package/src/components/PopupMenu.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { Check } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
+
+/** One choice in a `PopupMenu`. `kind: 'radio'` (the default) is a value the person picks between,
+ *  shown with a checkmark when it is the current one; `kind: 'action'` runs something instead (e.g.
+ *  "Manage providers…") and never carries a checked state. */
+export interface IPopupMenuItem {
+  readonly key: string;
+  readonly label: string;
+  readonly description?: string;
+  readonly kind?: 'radio' | 'action';
+  readonly checked?: boolean;
+  readonly destructive?: boolean;
+  readonly onSelect: () => void;
+}
+
+export interface IPopupMenuSection {
+  readonly heading?: string;
+  readonly items: readonly IPopupMenuItem[];
+}
+
+/**
+ * A HIG pop-up menu (#3282 §2): `role="menu"`, its choices as `menuitemradio` with `aria-checked`
+ * (or `menuitem` for a plain action, e.g. "Manage providers…"), grouped into optional labelled
+ * sections. Arrow keys move a roving focus, Enter/Space activates the focused item, and Esc — or a
+ * click outside — closes the menu and returns focus to the trigger that opened it, so the person
+ * never loses their place. Initial focus lands on the current (checked) item, matching a native
+ * pop-up menu; nothing else is pre-highlighted beyond that same focus ring.
+ */
+export function PopupMenu({
+  label,
+  sections,
+  onClose,
+  triggerRef,
+}: {
+  label: string;
+  sections: readonly IPopupMenuSection[];
+  onClose: () => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+}): React.ReactElement {
+  const items = sections.flatMap((section) => section.items);
+  const idPrefix = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState(() => {
+    const current = items.findIndex((item) => item.checked);
+    return current >= 0 ? current : 0;
+  });
+
+  const close = (returnFocus: boolean): void => {
+    onClose();
+    if (returnFocus) triggerRef.current?.focus();
+  };
+
+  useEffect(() => {
+    itemRefs.current[focusedIndex]?.focus();
+  }, [focusedIndex]);
+
+  useEffect(() => {
+    const onPointerDown = (event: MouseEvent): void => {
+      const target = event.target as Node;
+      if (containerRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      close(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+    // Registered once (empty deps): `onClose`/`triggerRef` are stable for the life of an open menu —
+    // it is remounted fresh (`{open ? <PopupMenu .../> : null}`) rather than kept open across a prop
+    // change that would replace them.
+  }, []);
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close(true);
+      return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (items.length === 0) return;
+      const step = event.key === 'ArrowDown' ? 1 : -1;
+      setFocusedIndex((index) => (index + step + items.length) % items.length);
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const item = items[focusedIndex];
+      if (item) {
+        item.onSelect();
+        close(true);
+      }
+    }
+  };
+
+  let cursor = -1;
+  return (
+    <div
+      ref={containerRef}
+      role="menu"
+      aria-label={label}
+      onKeyDown={onKeyDown}
+      className="gui-rise absolute bottom-full z-30 mb-2 max-h-[360px] w-64 overflow-y-auto rounded-2xl bg-popover p-1.5 shadow-2xl shadow-black/35 focus:outline-none"
+    >
+      {sections.map((section, sectionIndex) => (
+        <div key={section.heading ?? sectionIndex} role="group" aria-label={section.heading}>
+          {section.heading ? (
+            <div
+              role="presentation"
+              className="px-3 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-subtle"
+            >
+              {section.heading}
+            </div>
+          ) : null}
+          {section.items.map((item) => {
+            cursor += 1;
+            const index = cursor;
+            const isAction = item.kind === 'action';
+            // The accessible NAME is the label alone (`aria-label`) — otherwise a screen reader would
+            // read the description as part of it (button content is used as the name by default). The
+            // description is still announced, as a `aria-describedby` description instead.
+            const descId = item.description ? `${idPrefix}-desc-${item.key}` : undefined;
+            return (
+              <button
+                key={item.key}
+                ref={(node) => {
+                  itemRefs.current[index] = node;
+                }}
+                type="button"
+                role={isAction ? 'menuitem' : 'menuitemradio'}
+                aria-checked={isAction ? undefined : item.checked === true}
+                aria-label={item.label}
+                aria-describedby={descId}
+                tabIndex={index === focusedIndex ? 0 : -1}
+                onFocus={() => setFocusedIndex(index)}
+                onClick={() => {
+                  item.onSelect();
+                  close(true);
+                }}
+                className={`flex w-full items-start gap-2 rounded-xl px-3 py-2 text-left text-[13.5px] ${
+                  item.destructive ? 'text-destructive hover:bg-destructive/10' : 'text-foreground hover:bg-hover'
+                } ${index === focusedIndex ? 'bg-hover' : ''}`}
+              >
+                {isAction ? null : (
+                  <span className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                    {item.checked ? <Check size={14} strokeWidth={2.25} aria-hidden="true" /> : null}
+                  </span>
+                )}
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{item.label}</span>
+                  {item.description ? (
+                    <span id={descId} className="block truncate text-[12px] text-muted-foreground">
+                      {item.description}
+                    </span>
+                  ) : null}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ProjectPanel.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { ChevronRight, ExternalLink, GitBranch, LoaderCircle, RefreshCw } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+import { DiffLines } from './DiffLines.js';
+
+import type {
+  IWsSessionState,
+  TProjectDiffRead,
+  TProjectMemoryRead,
+  TProjectStatusRead,
+} from '../hooks/session-client-types.js';
+
+/**
+ * #3282 §4c — the Project panel: git status (Changes), one file's diff on click, and project memory as
+ * readable text. The owner's design principle 4 (#3277): everything the host implements is usable from
+ * the GUI through organized screens — this is git status/diff and project memory's screen. Checkpoints
+ * (rewind) are deliberately absent (see `agent-gui-web/docs/SPEC.md`'s design decisions): edit
+ * checkpoints only work on a host that can prove a write stays inside the project
+ * (`supportsWorkspaceProjectMutation`, Linux-only by design, not a switched-off setting), so there is
+ * nothing safe to show here on macOS or Windows.
+ */
+
+type TProjectStatusFile = Extract<TProjectStatusRead, { kind: 'status' }>['files'][number];
+
+const STATUS_TONE: Readonly<Record<TProjectStatusFile['status'], string>> = {
+  Added: 'text-accent',
+  Modified: 'text-warning',
+  Deleted: 'text-destructive',
+  Renamed: 'text-muted-foreground',
+  Copied: 'text-muted-foreground',
+  Untracked: 'text-subtle',
+  Conflicted: 'text-destructive',
+};
+
+function StatusRow({
+  file,
+  open,
+  onOpen,
+}: {
+  file: TProjectStatusFile;
+  open: boolean;
+  onOpen: () => void;
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      aria-expanded={open}
+      onClick={onOpen}
+      className="flex min-w-0 items-center gap-2 rounded-md px-1.5 py-1.5 text-left hover:bg-hover"
+    >
+      <ChevronRight
+        size={13}
+        className={`flex-shrink-0 text-subtle transition-transform ${open ? 'rotate-90' : ''}`}
+      />
+      <span
+        className={`w-[76px] flex-shrink-0 text-[12px] font-medium ${STATUS_TONE[file.status]}`}
+      >
+        {file.status}
+      </span>
+      <span className="min-w-0 flex-1 truncate break-all font-mono text-[12.5px] text-foreground" title={file.path}>
+        {file.path}
+      </span>
+      {typeof file.added === 'number' && (
+        <span className="flex-shrink-0 font-mono text-[12px] text-accent">+{file.added}</span>
+      )}
+      {typeof file.removed === 'number' && (
+        <span className="flex-shrink-0 font-mono text-[12px] text-destructive">-{file.removed}</span>
+      )}
+    </button>
+  );
+}
+
+function ChangesSection({
+  status,
+  statusState,
+  onRefresh,
+  openPath,
+  onSelectFile,
+  diff,
+  diffState,
+  diffPath,
+}: {
+  status: TProjectStatusRead | null;
+  statusState: IWsSessionState['projectStatusState'];
+  onRefresh: () => void;
+  openPath: string | null;
+  onSelectFile: (path: string) => void;
+  diff: TProjectDiffRead | null;
+  diffState: IWsSessionState['projectDiffState'];
+  diffPath: string | null;
+}): React.ReactElement {
+  return (
+    <div className="flex flex-col gap-1.5 rounded-xl bg-card px-2 py-2">
+      <div className="flex items-center gap-2 px-1">
+        <p className="flex-1 text-[12px] font-medium text-muted-foreground">
+          {status?.kind === 'status' && status.branch ? `Changes — ${status.branch}` : 'Changes'}
+        </p>
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={statusState === 'loading'}
+          aria-label="Refresh"
+          className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[12px] text-subtle hover:bg-hover hover:text-foreground disabled:opacity-60"
+        >
+          <RefreshCw size={12} className={statusState === 'loading' ? 'animate-spin' : ''} />
+          Refresh
+        </button>
+      </div>
+
+      {statusState === 'loading' && status === null && (
+        <p className="px-1 py-2 text-[13px] text-muted-foreground">Reading git status…</p>
+      )}
+      {statusState === 'error' && (
+        <p className="px-1 py-2 text-[13px] text-destructive">Could not read git status.</p>
+      )}
+      {status?.kind === 'not-a-repository' && (
+        <p className="px-1 py-2 text-[13px] text-muted-foreground">This folder is not a git repository.</p>
+      )}
+      {status?.kind === 'failed' && <p className="px-1 py-2 text-[13px] text-destructive">{status.message}</p>}
+      {status?.kind === 'status' && status.files.length === 0 && (
+        <p className="px-1 py-2 text-[13px] text-muted-foreground">No changes.</p>
+      )}
+      {status?.kind === 'status' &&
+        status.files.map((file) => (
+          <div key={file.path} className="flex flex-col">
+            <StatusRow file={file} open={openPath === file.path} onOpen={() => onSelectFile(file.path)} />
+            {openPath === file.path && (
+              <div className="pl-6">
+                {diffState === 'loading' && diffPath === file.path && (
+                  <p className="py-1.5 text-[12.5px] text-muted-foreground">Reading diff…</p>
+                )}
+                {diff && diffPath === file.path && diff.kind === 'diff' && diff.diffLines.length === 0 && (
+                  <p className="py-1.5 text-[12.5px] text-muted-foreground">No differences.</p>
+                )}
+                {diff && diffPath === file.path && diff.kind === 'diff' && diff.diffLines.length > 0 && (
+                  <>
+                    <DiffLines diffLines={diff.diffLines} />
+                    {diff.truncated && (
+                      <p className="py-1 text-[12px] text-subtle">The diff was too long and was cut short.</p>
+                    )}
+                  </>
+                )}
+                {diff && diffPath === file.path && diff.kind === 'failed' && (
+                  <p className="py-1.5 text-[12.5px] text-destructive">{diff.message}</p>
+                )}
+                {diff && diffPath === file.path && diff.kind === 'outside-workspace' && (
+                  <p className="py-1.5 text-[12.5px] text-destructive">
+                    That path is outside the workspace.
+                  </p>
+                )}
+                {diff && diffPath === file.path && diff.kind === 'not-a-repository' && (
+                  <p className="py-1.5 text-[12.5px] text-muted-foreground">
+                    This folder is not a git repository.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      {status?.kind === 'status' && status.truncated && (
+        <p className="px-1 pt-1 text-[12px] text-subtle">Showing the first files only — there are more.</p>
+      )}
+    </div>
+  );
+}
+
+function MemorySection({
+  memory,
+  memoryState,
+  onOpenInEditor,
+}: {
+  memory: TProjectMemoryRead | null;
+  memoryState: IWsSessionState['projectMemoryState'];
+  onOpenInEditor?: (path: string) => void;
+}): React.ReactElement {
+  return (
+    <div className="flex flex-col gap-1.5 rounded-xl bg-card px-2 py-2">
+      <div className="flex items-center gap-2 px-1">
+        <p className="flex-1 text-[12px] font-medium text-muted-foreground">Memory</p>
+        {memory?.kind === 'memory' && onOpenInEditor && (
+          <button
+            type="button"
+            onClick={() => onOpenInEditor(memory.path)}
+            className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[12px] text-subtle hover:bg-hover hover:text-foreground"
+          >
+            <ExternalLink size={12} />
+            Open in editor
+          </button>
+        )}
+      </div>
+      {memoryState === 'loading' && memory === null && (
+        <p className="px-1 py-1 text-[13px] text-muted-foreground">Reading project memory…</p>
+      )}
+      {memory?.kind === 'unavailable' && (
+        <p className="px-1 py-1 text-[13px] text-muted-foreground">{memory.message}</p>
+      )}
+      {memory?.kind === 'memory' && (
+        <>
+          <pre className="max-h-64 overflow-y-auto whitespace-pre-wrap break-words rounded-lg bg-sidebar px-3 py-2 font-mono text-[12.5px] leading-relaxed text-foreground">
+            {memory.content.length > 0 ? memory.content : '(empty)'}
+          </pre>
+          {memory.truncated && (
+            <p className="px-1 pt-1 text-[12px] text-subtle">The memory was too long and was cut short.</p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function ProjectPanel({
+  state,
+  className,
+  onOpenMemoryInEditor,
+}: {
+  state: IWsSessionState;
+  className?: string;
+  /** Present only when the host can open a file in an external editor (the desktop app). */
+  onOpenMemoryInEditor?: (path: string) => void;
+}): React.ReactElement {
+  useEffect(() => {
+    state.requestProjectStatus();
+    state.requestProjectMemory();
+  }, [state.requestProjectStatus, state.requestProjectMemory]);
+
+  // Which row is expanded — local, and independent from `projectDiffPath` (what the LAST diff
+  // request/response concerns): closing a row never needs a request, and reopening a different one
+  // must not show the previous file's diff while its own is still loading.
+  const [openPath, setOpenPath] = useState<string | null>(null);
+
+  return (
+    <div className={`agent-ui flex flex-col overflow-hidden ${className ?? ''}`}>
+      <div className="flex h-12 flex-shrink-0 items-center gap-2 px-4">
+        <GitBranch size={15} className="text-subtle" />
+        <span className="text-[14px] font-medium text-foreground">Project</span>
+        {state.projectStatusState === 'loading' && (
+          <LoaderCircle size={13} className="ml-auto animate-spin text-subtle" aria-label="loading" />
+        )}
+      </div>
+      <div className="flex-1 space-y-2 overflow-y-auto px-3 pb-3">
+        <ChangesSection
+          status={state.projectStatus}
+          statusState={state.projectStatusState}
+          onRefresh={() => state.requestProjectStatus()}
+          openPath={openPath}
+          onSelectFile={(path) => {
+            if (openPath === path) {
+              setOpenPath(null);
+              return;
+            }
+            setOpenPath(path);
+            state.requestProjectDiff(path);
+          }}
+          diff={state.projectDiffPath === openPath ? state.projectDiff : null}
+          diffState={state.projectDiffPath === openPath ? state.projectDiffState : 'loading'}
+          diffPath={state.projectDiffPath}
+        />
+        <MemorySection
+          memory={state.projectMemory}
+          memoryState={state.projectMemoryState}
+          onOpenInEditor={onOpenMemoryInEditor}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/SessionMonitor.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useProductIdentity } from '../product-identity.js';
+
+import React, { useState } from 'react';
+
+import { useWsSession } from '../hooks/useSessionClient.js';
+
+import { AgentActivityPanel } from './AgentActivityPanel.js';
+import { ConversationView } from './ConversationView.js';
+
+const STATUS_CONFIG: Record<string, { label: string; dot: string; text: string; glow: string }> = {
+  connected: {
+    label: 'Connected',
+    dot: 'bg-accent',
+    text: 'text-muted-foreground',
+    glow: 'status-glow',
+  },
+  connecting: {
+    label: 'Connecting…',
+    dot: 'bg-warning animate-pulse',
+    text: 'text-warning',
+    glow: '',
+  },
+  disconnected: { label: 'Disconnected', dot: 'bg-subtle', text: 'text-subtle', glow: '' },
+  error: { label: 'Error', dot: 'bg-destructive', text: 'text-destructive', glow: '' },
+};
+
+interface ISessionMonitorProps {
+  /** WebSocket URL. Injected by the HTTP server via <meta name="ws-url">. */
+  wsUrl: string;
+  className?: string;
+}
+
+export function SessionMonitor({ wsUrl, className }: ISessionMonitorProps): React.ReactElement {
+  const { identity } = useProductIdentity();
+  const [url, setUrl] = useState(wsUrl);
+  const [inputUrl, setInputUrl] = useState(wsUrl);
+
+  const {
+    status,
+    messages,
+    activeTools,
+    streamingText,
+    isThinking,
+    executionWorkspace,
+    ownDriverId,
+    send,
+  } = useWsSession(url);
+  const cfg = STATUS_CONFIG[status] ?? STATUS_CONFIG.disconnected;
+
+  const backgroundTasks =
+    executionWorkspace?.entries.filter(
+      (e) => e.kind === 'background_task' && e.visibility !== 'collapsed',
+    ) ?? [];
+  const hasAgents = backgroundTasks.length > 0;
+
+  return (
+    <div className={`agent-ui flex flex-col h-full overflow-hidden bg-background ${className ?? ''}`}>
+      {/* Header */}
+      <div className="flex h-12 flex-shrink-0 items-center gap-3 px-5">
+        <div className="flex items-center gap-2.5">
+          <span className={`h-2 w-2 rounded-full flex-shrink-0 ${cfg.dot} ${cfg.glow}`} />
+          <span className="text-[15px] font-semibold text-foreground">CLI monitor</span>
+          <span role="status" className={`text-[13px] ${cfg.text}`}>
+            {cfg.label}
+          </span>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          <input
+            aria-label="WebSocket URL"
+            className="h-8 w-60 rounded-lg bg-raised px-3 font-mono text-[12.5px] text-foreground placeholder:text-subtle focus:outline-none"
+            value={inputUrl}
+            onChange={(e) => setInputUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') setUrl(inputUrl);
+            }}
+            placeholder="ws://localhost:7070"
+          />
+          <button
+            className="h-8 rounded-lg bg-primary px-3.5 text-[13px] font-medium text-primary-foreground hover:opacity-90"
+            onClick={() => setUrl(inputUrl)}
+          >
+            Connect
+          </button>
+        </div>
+      </div>
+
+      {/* Main content: conversation + optional agent panel */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left: conversation */}
+        <div
+          className={`flex flex-col overflow-hidden min-w-0 ${hasAgents ? 'flex-[2]' : 'flex-1'}`}
+        >
+          <div className="flex-1 overflow-hidden">
+            {status === 'connected' ? (
+              <ConversationView
+                messages={messages}
+                activeTools={activeTools}
+                streamingText={streamingText}
+                isThinking={isThinking}
+                ownDriverId={ownDriverId}
+              />
+            ) : (
+              // #3289 §3 review: this renders in the same slot as `ConversationView` (never
+              // together), so it carries this page's `main` landmark here too — nothing above this
+              // slot supplies one.
+              <main className="flex h-full items-center justify-center" aria-label="Conversation">
+                <div className="flex flex-col items-center gap-3 text-center px-8">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-card">
+                    <span className={`h-2.5 w-2.5 rounded-full ${cfg.dot}`} />
+                  </div>
+                  <p className="max-w-[320px] text-[15px] leading-relaxed text-muted-foreground">
+                    {status === 'connecting'
+                      ? `Connecting to ${url}…`
+                      : status === 'error'
+                        ? `Connection error — could not reach ${url}. Check the CLI is running and the URL is correct.`
+                        : `Run ${identity.cliName} to start the CLI (WS transport starts automatically).`}
+                  </p>
+                </div>
+              </main>
+            )}
+          </div>
+
+          <SessionInput
+            enabled={status === 'connected'}
+            onSubmit={(prompt) => send({ type: 'submit', prompt })}
+          />
+        </div>
+
+        {/* Right: agent activity panel (conditional) */}
+        {hasAgents && <AgentActivityPanel tasks={backgroundTasks} className="flex-1 bg-sidebar" />}
+      </div>
+    </div>
+  );
+}
+
+function SessionInput({
+  enabled,
+  onSubmit,
+}: {
+  enabled: boolean;
+  onSubmit: (prompt: string) => void;
+}): React.ReactElement {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = (): void => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setValue('');
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-[760px] flex-shrink-0 items-end gap-2 px-6 pb-4">
+      <textarea
+        aria-label="Message"
+        className="max-h-[160px] min-h-[48px] flex-1 resize-none rounded-[22px] bg-card px-4 py-3 text-[15px] leading-relaxed text-foreground placeholder:text-subtle [field-sizing:content] focus:outline-none disabled:opacity-60"
+        rows={1}
+        placeholder={enabled ? 'Send a message…' : 'Connect to send messages'}
+        disabled={!enabled}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+          }
+        }}
+      />
+      <button
+        className="h-12 rounded-[22px] bg-primary px-5 text-[14px] font-medium text-primary-foreground hover:opacity-90 disabled:bg-raised disabled:text-subtle"
+        disabled={!enabled || !value.trim()}
+        onClick={handleSubmit}
+      >
+        Send
+      </button>
+    </div>
+  );
+}