pmx-canvas 0.8.2 → 0.9.1

package/src/client/canvas/ToolRail.tsx

@@ -1,24 +1,22 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useId, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { BarPortal } from './BarHint';
+import { agentSessionsEnabled, knowledgeLifecycleEnabled, workspaceSettings } from '../state/workspace-settings';
+import type { WorkspaceSettings } from '../../shared/workspace-settings.js';
+import { attachedSessions } from '../state/presence-store';
+import { heldGates, pendingGates, scopeFence, sessionPanelOpened } from '../state/session-store';
 import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 import {
   IconArrange,
-  IconClearTrace,
   IconCursorTool,
   IconEraser,
   IconHandTool,
   IconLogo,
-  IconMinimap,
-  IconMoon,
   IconNodeGroup,
   IconNodeMarkdown,
   IconNodeWebpage,
   IconPen,
   IconSearch,
-  IconShortcuts,
-  IconSnapshot,
-  IconSun,
   IconTextAnnotation,
-  IconTrace,
   IconUpload,
 } from '../icons';
 import {
@@ -33,8 +31,8 @@ import {
 } from '../state/canvas-store';
 import { importFiles } from './import-files';
 import { canvasArea } from './canvas-area';
-import { saveCanvasTheme } from '../state/intent-bridge';
-import { openBoard } from '../state/boards-store';
+import { requestJson, saveCanvasTheme } from '../state/intent-bridge';
+import { browsingMemory, openBoard } from '../state/boards-store';
 import { createNodeInView } from './create-in-view';
 import { askText } from './TextPrompt';
 import { FeedbackDialog } from './FeedbackDialog';
@@ -46,7 +44,6 @@ import {
   CANVAS_THEMES,
   CANVAS_THEME_META,
   type CanvasThemeName,
-  canvasThemeScheme,
   normalizeCanvasThemeName,
 } from '../../shared/themes.js';
 
@@ -144,6 +141,84 @@ function RailButton({
   );
 }
 
+/** Menu descriptions escape its scrolling container and also work with keyboard focus. */
+function SettingsItem({
+  label,
+  description,
+  hint,
+  beta,
+  toggle = beta,
+  checked,
+  disabled,
+  onClick,
+}: {
+  label: string;
+  description: string;
+  hint?: string;
+  beta?: boolean;
+  toggle?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}) {
+  const id = useId();
+  const [anchor, setAnchor] = useState<DOMRect | null>(null);
+  const show = (event: Event) => setAnchor((event.currentTarget as HTMLElement).getBoundingClientRect());
+  const hide = () => setAnchor(null);
+  return (
+    <>
+      <button
+        type="button"
+        role={checked === undefined ? 'menuitem' : 'menuitemcheckbox'}
+        aria-label={beta ? `${label} (Beta)` : label}
+        aria-checked={checked}
+        aria-describedby={anchor ? id : undefined}
+        class="toolbar-menu-item"
+        aria-disabled={disabled || undefined}
+        onPointerEnter={show}
+        onPointerLeave={hide}
+        onFocus={show}
+        onBlur={hide}
+        onClick={() => {
+          if (disabled) return;
+          hide();
+          onClick();
+        }}
+      >
+        <span class="settings-item-label">
+          {label} {beta && <span class="beta-tag">Beta</span>}
+        </span>
+        {toggle ? (
+          <span class={`settings-switch${checked ? ' is-on' : ''}`} aria-hidden="true" />
+        ) : hint ? (
+          <span class="toolbar-menu-hint">{hint}</span>
+        ) : null}
+      </button>
+      {anchor && (
+        <BarPortal>
+          <span
+            id={id}
+            class="toolbar-tooltip settings-tooltip"
+            role="tooltip"
+            ref={(tip) => {
+              if (!tip) return;
+              const beside = window.innerWidth - anchor.right >= tip.offsetWidth + 20;
+              tip.style.left = `${beside ? anchor.right + 10 : Math.max(12, Math.min(anchor.left, window.innerWidth - tip.offsetWidth - 12))}px`;
+              tip.style.top = `${Math.max(12, Math.min(beside ? anchor.top : anchor.top - tip.offsetHeight - 8, window.innerHeight - tip.offsetHeight - 12))}px`;
+            }}
+          >
+            <span class="toolbar-tooltip-label">
+              {label}
+              {beta ? ' (Beta)' : ''}
+            </span>
+            <span class="toolbar-tooltip-body">{description}</span>
+          </span>
+        </BarPortal>
+      )}
+    </>
+  );
+}
+
 /**
  * The persistent 52px left tool rail (rail-chrome-v2 phase 1): brand → tools →
  * node palette → utilities. Every button shows a hover/focus tooltip with its
@@ -175,47 +250,83 @@ export function ToolRail({
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
   const edgeCount = edges.value.size;
   const [feedbackOpen, setFeedbackOpen] = useState(false);
-  const [openMenu, setOpenMenu] = useState<null | 'theme'>(null);
+  const [savingSettings, setSavingSettings] = useState(false);
+  const [settingsError, setSettingsError] = useState(false);
+  const setBeta = async (key: keyof WorkspaceSettings) => {
+    if (savingSettings || !workspaceSettings.value) return;
+    setSavingSettings(true);
+    setSettingsError(false);
+    try {
+      const result = await requestJson<{ ok: boolean }>(
+        'saveWorkspaceSettings',
+        '/api/canvas/settings',
+        { ok: false },
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ [key]: !workspaceSettings.value[key] }),
+        },
+      );
+      // Ordered SSE/poll frames, never a late POST acknowledgement, own the switches.
+      setSettingsError(result.ok !== true);
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+  // The Settings menu (docs/design/Chrome.dc.html §7) and the view it shows.
+  const [openMenu, setOpenMenu] = useState<null | 'settings' | 'theme'>(null);
   const [menuAnchor, setMenuAnchor] = useState<{ bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
   const fileInput = useRef<HTMLInputElement>(null);
 
-  const toggleMenu = (menu: 'theme') => (e: MouseEvent) => {
-    if (openMenu === menu) {
+  const toggleSettings = (e: MouseEvent) => {
+    if (openMenu) {
       setOpenMenu(null);
       return;
     }
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
     setMenuAnchor({ bottom: rect.bottom, right: rect.right });
-    setOpenMenu(menu);
+    setOpenMenu('settings');
+  };
+  /** Run a Settings action and close the menu; focus returns to the Settings button. */
+  const choose = (action: () => void) => () => {
+    setOpenMenu(null);
+    snapshotBtnRef.current?.focus();
+    action();
   };
 
   // The rail scrolls (overflow-y:auto), so an absolutely-positioned popover
   // would be clipped by it. Fixed positioning from the trigger's rect escapes
-  // the scroll container; the theme menu bottom-aligns so it grows upward.
+  // the scroll container; the menu bottom-aligns so it grows upward.
   const sideMenuStyle = menuAnchor
     ? {
         position: 'fixed' as const,
         left: `${menuAnchor.right + 8}px`,
-        bottom: `${window.innerHeight - menuAnchor.bottom}px`,
+        bottom: `${Math.max(10, window.innerHeight - menuAnchor.bottom)}px`,
         top: 'auto',
         right: 'auto',
       }
     : undefined;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!openMenu) return;
     const onPointerDown = (e: PointerEvent) => {
       if (railRef.current && e.target instanceof Node && !railRef.current.contains(e.target)) setOpenMenu(null);
     };
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpenMenu(null);
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpenMenu(null);
+        snapshotBtnRef.current?.focus({ preventScroll: true });
+      }
     };
     document.addEventListener('pointerdown', onPointerDown);
-    document.addEventListener('keydown', onKeyDown);
+    // Own Escape even when a saving toggle has temporarily moved focus to body.
+    document.addEventListener('keydown', onKeyDown, true);
     return () => {
       document.removeEventListener('pointerdown', onPointerDown);
-      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keydown', onKeyDown, true);
     };
   }, [openMenu]);
 
@@ -253,189 +364,256 @@ export function ToolRail({
           </span>
         </RailButton>
 
-        <RailButton
-          label="Bug and feedback"
-          menuOpen={feedbackOpen}
-          onClick={() => {
-            setOpenMenu(null);
-            setFeedbackOpen(true);
-          }}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <rect x="4.5" y="5" width="7" height="9" rx="3.5" />
-            <path d="M6 5V4a2 2 0 0 1 4 0v1M8 8v6M2 4l2.5 2M14 4l-2.5 2M1.5 9h3M11.5 9h3M2 14l2.5-2M14 14l-2.5-2" />
-          </svg>
-        </RailButton>
+        {!browsingMemory.value && (
+          <>
+            <div class="rail-divider" />
 
-        <div class="rail-divider" />
-
-        <RailButton
-          label="Select"
-          shortcut="V"
-          active={tool === 'select'}
-          onClick={() => (canvasTool.value = 'select')}
-        >
-          <IconCursorTool />
-        </RailButton>
-        <RailButton label="Pan" shortcut="Space" active={tool === 'pan'} onClick={() => (canvasTool.value = 'pan')}>
-          <IconHandTool />
-        </RailButton>
-        <RailButton
-          label="Connect"
-          shortcut="C"
-          active={tool === 'connect'}
-          onClick={() => (canvasTool.value = 'connect')}
-        >
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            aria-hidden="true"
-          >
-            <circle cx="4" cy="4" r="2" />
-            <circle cx="12" cy="12" r="2" />
-            <path d="M5.5 5.5 C 8 8, 8 8, 10.5 10.5" />
-          </svg>
-        </RailButton>
+            <RailButton
+              label="Select"
+              shortcut="V"
+              active={tool === 'select'}
+              onClick={() => (canvasTool.value = 'select')}
+            >
+              <IconCursorTool />
+            </RailButton>
+            <RailButton label="Pan" shortcut="Space" active={tool === 'pan'} onClick={() => (canvasTool.value = 'pan')}>
+              <IconHandTool />
+            </RailButton>
+            <RailButton
+              label="Connect"
+              shortcut="C"
+              active={tool === 'connect'}
+              onClick={() => (canvasTool.value = 'connect')}
+            >
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <circle cx="4" cy="4" r="2" />
+                <circle cx="12" cy="12" r="2" />
+                <path d="M5.5 5.5 C 8 8, 8 8, 10.5 10.5" />
+              </svg>
+            </RailButton>
 
-        <div class="rail-divider" />
+            <div class="rail-divider" />
 
-        <RailButton
-          label="Markdown note"
-          shortcut="M"
-          onClick={() =>
-            void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch((error) =>
-              logRailError('create markdown', error),
-            )
-          }
-        >
-          <IconNodeMarkdown size={15} />
-        </RailButton>
-        <RailButton
-          label="Attach files"
-          ariaLabel="Attach files"
-          detail="Images (PNG, JPEG, SVG…), Markdown and text/code files. PDF, Word, Excel, PowerPoint and OpenDocument use agent import with review."
-          onClick={() => fileInput.current?.click()}
-        >
-          <IconUpload size={15} />
-        </RailButton>
-        <input
-          ref={fileInput}
-          type="file"
-          hidden
-          multiple
-          aria-label="Attach files"
-          onChange={(event) => {
-            const area = canvasArea();
-            const view = viewport.value;
-            void importFiles(
-              Array.from(event.currentTarget.files ?? []),
-              (area.width / 2 - view.x) / view.scale,
-              (area.height / 2 - view.y) / view.scale,
-            );
-            event.currentTarget.value = '';
-          }}
-        />
-        <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
-          <IconNodeWebpage size={15} />
-        </RailButton>
-        <RailButton
-          label="Group"
-          shortcut="G"
-          onClick={() =>
-            void createNodeInView({ type: 'group', title: 'Group' }).catch((error) =>
-              logRailError('create group', error),
-            )
-          }
-        >
-          <IconNodeGroup size={15} />
-        </RailButton>
-        <RailButton
-          label="Draw"
-          shortcut="A"
-          active={annotationTool === 'pen'}
-          onClick={() => onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen')}
-        >
-          <IconPen />
-        </RailButton>
-        <RailButton
-          label="Text note"
-          active={annotationTool === 'text'}
-          onClick={() => onSetAnnotationTool(annotationTool === 'text' ? null : 'text')}
-        >
-          <IconTextAnnotation />
-        </RailButton>
-        <RailButton
-          label="Eraser"
-          active={annotationTool === 'eraser'}
-          onClick={() => onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser')}
-        >
-          <IconEraser />
-        </RailButton>
+            <RailButton
+              label="Markdown note"
+              shortcut="M"
+              onClick={() =>
+                void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch((error) =>
+                  logRailError('create markdown', error),
+                )
+              }
+            >
+              <IconNodeMarkdown size={15} />
+            </RailButton>
+            <RailButton
+              label="Attach files"
+              ariaLabel="Attach files"
+              detail="Images (PNG, JPEG, SVG…), Markdown and text/code files. PDF, Word, Excel, PowerPoint and OpenDocument use agent import with review."
+              onClick={() => fileInput.current?.click()}
+            >
+              <IconUpload size={15} />
+            </RailButton>
+            <input
+              ref={fileInput}
+              type="file"
+              hidden
+              multiple
+              aria-label="Attach files"
+              onChange={(event) => {
+                const area = canvasArea();
+                const view = viewport.value;
+                void importFiles(
+                  Array.from(event.currentTarget.files ?? []),
+                  (area.width / 2 - view.x) / view.scale,
+                  (area.height / 2 - view.y) / view.scale,
+                );
+                event.currentTarget.value = '';
+              }}
+            />
+            <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
+              <IconNodeWebpage size={15} />
+            </RailButton>
+            <RailButton
+              label="Group"
+              shortcut="G"
+              onClick={() =>
+                void createNodeInView({ type: 'group', title: 'Group' }).catch((error) =>
+                  logRailError('create group', error),
+                )
+              }
+            >
+              <IconNodeGroup size={15} />
+            </RailButton>
+            <RailButton
+              label="Draw"
+              shortcut="A"
+              active={annotationTool === 'pen'}
+              onClick={() => onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen')}
+            >
+              <IconPen />
+            </RailButton>
+            <RailButton
+              label="Text note"
+              active={annotationTool === 'text'}
+              onClick={() => onSetAnnotationTool(annotationTool === 'text' ? null : 'text')}
+            >
+              <IconTextAnnotation />
+            </RailButton>
+            <RailButton
+              label="Eraser"
+              active={annotationTool === 'eraser'}
+              onClick={() => onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser')}
+            >
+              <IconEraser />
+            </RailButton>
 
-        <div class="rail-spacer" />
+            <div class="rail-divider" />
+          </>
+        )}
 
-        <RailButton label="Search & commands" shortcut={modChord('K')} onClick={onOpenPalette}>
-          <IconSearch />
-        </RailButton>
-        <RailButton
-          label="Arrange"
-          detail={edgeCount > 0 ? 'graph-aware' : 'grid'}
-          onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
-        >
-          <IconArrange />
-        </RailButton>
-        {!isHostedWorkbench() && (
-          <RailButton
-            label={isTraceOn ? 'Disable trace' : 'Enable trace'}
-            active={isTraceOn}
-            onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
-          >
-            <IconTrace />
+        {!browsingMemory.value && (
+          <RailButton label="Search & commands" shortcut={modChord('K')} onClick={onOpenPalette}>
+            <IconSearch />
           </RailButton>
         )}
-        {!isHostedWorkbench() && (isTraceOn || traceNodeCount > 0) && (
-          <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
-            <IconClearTrace />
+        {!browsingMemory.value && (
+          <RailButton
+            label="Arrange"
+            detail={edgeCount > 0 ? 'graph-aware' : 'grid'}
+            onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
+          >
+            <IconArrange />
           </RailButton>
         )}
-        <RailButton
-          label={minimapVisible ? 'Hide minimap' : 'Show minimap'}
-          active={minimapVisible}
-          onClick={onToggleMinimap}
-        >
-          <IconMinimap />
-        </RailButton>
-        <RailButton label="Snapshots" active={snapshotOpen} onClick={onToggleSnapshot} btnRef={snapshotBtnRef}>
-          <IconSnapshot />
-        </RailButton>
+        <div class="rail-spacer" />
         <span class="toolbar-menu-anchor">
           <RailButton
-            label="Theme"
-            detail={CANVAS_THEME_META[activeTheme].label}
-            menuOpen={openMenu === 'theme'}
-            ariaLabel="Choose theme"
-            active={openMenu === 'theme'}
-            onClick={toggleMenu('theme')}
+            label="Settings"
+            detail="Appearance, board tools, beta features, and feedback"
+            ariaLabel="Settings"
+            menuOpen={openMenu !== null}
+            active={openMenu !== null || snapshotOpen}
+            onClick={toggleSettings}
+            btnRef={snapshotBtnRef}
           >
-            {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M4 7h9M17 7h3M4 17h3M11 17h9M13 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0M7 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0" />
+            </svg>
           </RailButton>
+          {openMenu === 'settings' && (
+            <div class="toolbar-menu rail-settings-menu" style={sideMenuStyle} role="menu" aria-label="Settings">
+              <SettingsItem
+                label="Theme"
+                description="Choose the canvas appearance. Your choice is saved with the board."
+                hint={`${CANVAS_THEME_META[activeTheme].label} ›`}
+                onClick={() => setOpenMenu('theme')}
+              />
+              {!browsingMemory.value && (
+                <>
+                  <SettingsItem
+                    label="Snapshots"
+                    description="Save a board checkpoint, compare changes, or restore an earlier version."
+                    onClick={choose(onToggleSnapshot)}
+                  />
+                  <SettingsItem
+                    label="Minimap"
+                    description="Show a small overview of the board. Drag its viewport to move around the canvas."
+                    checked={minimapVisible}
+                    hint={minimapVisible ? 'On' : 'Off'}
+                    onClick={choose(onToggleMinimap)}
+                  />
+                </>
+              )}
+              <SettingsItem
+                label="Keyboard shortcuts"
+                description="See shortcuts for creating cards, selecting, navigating, and editing the canvas."
+                hint="?"
+                onClick={choose(onOpenShortcuts)}
+              />
+              <div class="toolbar-menu-divider" role="separator" />
+              <span class="settings-caption">Beta features · workspace-wide · off by default</span>
+              <SettingsItem
+                label="Agent sessions"
+                beta
+                checked={agentSessionsEnabled.value}
+                disabled={!workspaceSettings.value || savingSettings}
+                description="Show session chips, tasks, timeline, steering composer, and receipts. Turning off hides these without ending attached agents. Approvals and edit protections remain available. Saved for this workspace."
+                onClick={() => void setBeta('agentSessions')}
+              />
+              <SettingsItem
+                label="Knowledge lifecycle"
+                beta
+                checked={knowledgeLifecycleEnabled.value}
+                disabled={!workspaceSettings.value || savingSettings}
+                description="This turns on context lifecycle, where boards and cards decay over time as their relevance fades. Includes Review, review policies, categories, and due or retired indicators. Turning off hides lifecycle tools without deleting their data or drafts. Saved for this workspace."
+                onClick={() => void setBeta('knowledgeLifecycle')}
+              />
+              {settingsError && (
+                <p class="settings-error" role="alert">
+                  Could not save settings. Try again.
+                </p>
+              )}
+              {!agentSessionsEnabled.value &&
+                (attachedSessions.value.length > 0 ||
+                  pendingGates.value.length > 0 ||
+                  heldGates.value.length > 0 ||
+                  scopeFence.value) && (
+                  <SettingsItem
+                    label="Agent controls"
+                    description="Review pending approvals, inspect or clear the write scope, or end an existing attachment without enabling the session beta."
+                    onClick={choose(() => (sessionPanelOpened.value = true))}
+                  />
+                )}
+              <div class="toolbar-menu-divider" role="separator" />
+              {!isHostedWorkbench() && !browsingMemory.value && (
+                <>
+                  <SettingsItem
+                    label="Trace"
+                    description="Show execution traces sent by connected tools. Turning off keeps existing traces. This does not start an agent."
+                    toggle
+                    checked={isTraceOn}
+                    onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
+                  />
+                  {(isTraceOn || traceNodeCount > 0) && (
+                    <SettingsItem
+                      label="Clear trace"
+                      description="Remove recorded execution traces from this board without changing whether trace capture is enabled."
+                      onClick={choose(() => sendIntent('trace-clear'))}
+                    />
+                  )}
+                </>
+              )}
+              <SettingsItem
+                label="Send feedback"
+                description="Report a problem or suggestion. Review the feedback before sending."
+                onClick={choose(() => setFeedbackOpen(true))}
+              />
+            </div>
+          )}
           {openMenu === 'theme' && (
             <div class="toolbar-menu" style={sideMenuStyle} role="menu" aria-label="Theme">
+              <button type="button" role="menuitem" class="toolbar-menu-item" onClick={() => setOpenMenu('settings')}>
+                <span>‹ Settings</span>
+              </button>
               {CANVAS_THEMES.map((name) => (
                 <button
                   key={name}
@@ -459,9 +637,6 @@ export function ToolRail({
             </div>
           )}
         </span>
-        <RailButton label="Shortcuts" shortcut="?" onClick={onOpenShortcuts}>
-          <IconShortcuts />
-        </RailButton>
       </div>
       {feedbackOpen && <FeedbackDialog onClose={() => setFeedbackOpen(false)} />}
     </>