@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/ProjectHeader.css

@@ -0,0 +1,60 @@
+.vgai-project-header {
+  position: relative;
+  display: flex;
+  height: var(--vgai-command-bar-height);
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 0 var(--vgai-space-4);
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-chrome);
+  border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  font-size: var(--vgai-font-base);
+  pointer-events: auto;
+  user-select: none;
+  box-sizing: border-box;
+}
+.vgai-project-header-left {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1;
+}
+.vgai-project-trigger {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-3);
+  overflow: hidden;
+  white-space: nowrap;
+}
+.vgai-project-app-menus,
+.vgai-project-transport {
+  flex: 0 0 auto;
+}
+.vgai-project-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 190px;
+  margin-top: var(--vgai-space-1);
+}
+.vgai-project-path {
+  display: block;
+  max-width: 320px;
+  padding: var(--vgai-space-2) var(--vgai-space-4);
+}
+.vgai-project-versions {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--vgai-space-2) var(--vgai-space-6);
+  padding: var(--vgai-space-3) var(--vgai-space-4) var(--vgai-space-4);
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-font-sm);
+}
+.vgai-project-header-right {
+  min-width: 0;
+  flex: 1;
+}
+.vgai-project-header-right > .vgai-btn {
+  padding-inline: var(--vgai-space-4);
+}

package/src/components/ProjectHeader.tsx

@@ -1,14 +1,42 @@
-import { useEffect, useReducer, useRef, useState } from 'react';
+import { faMessage } from '@fortawesome/free-solid-svg-icons';
+import { useEffect, useReducer, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  Button,
+  DisclosureIcon,
+  EditorIcon,
+  Inline,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  MenuTrigger,
+  Text,
+  themeVars,
+} from '../design-system';
 import { revealInFinder } from '../editor-api';
 import { getEditorMode } from '../editor-mode';
+import {
+  harnessChatIndicator,
+  harnessChatIndicatorVersion,
+  subscribeHarnessChatIndicator,
+} from '../harness-chat-indicator';
+import {
+  harnessChat,
+  harnessChatLayoutVersion,
+  subscribeHarnessChatLayout,
+  toggleHarnessChatCollapsed,
+} from '../harness-chat-layout';
 import { getCurrentProject, onProjectChange } from '../project-manager';
-import { SaveStatus } from './SaveStatus';
+import { ApplicationMenus } from './ApplicationMenus';
+import { PlayBar } from './PlayBar';
+import './ProjectHeader.css';
 
 export function ProjectHeader({
   onReturnToProjectScreen,
 }: {
   onReturnToProjectScreen?: (() => void) | undefined;
 }) {
+  useSyncExternalStore(subscribeHarnessChatLayout, harnessChatLayoutVersion);
+  useSyncExternalStore(subscribeHarnessChatIndicator, harnessChatIndicatorVersion);
   const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
   useEffect(() => onProjectChange(forceUpdate), []);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -16,7 +44,12 @@ export function ProjectHeader({
 
   const project = getCurrentProject();
   const projectName = project?.config.name ?? 'No Project';
+  const projectVersion = project?.config.version ?? null;
+  const engineVersion = project?.config.engine.version ?? null;
+  const manifestVersion = project?.config.manifestVersion ?? null;
   const projectPath = project?.rootPath ?? '';
+  const chatLayout = harnessChat();
+  const agentState = harnessChatIndicator();
 
   // Close menu on outside click
   useEffect(() => {
@@ -30,145 +63,177 @@ export function ProjectHeader({
     return () => document.removeEventListener('mousedown', handler);
   }, [menuOpen]);
 
-  const menuItemStyle: React.CSSProperties = {
-    display: 'block',
-    width: '100%',
-    background: 'none',
-    border: 'none',
-    color: '#c5c8ce',
-    fontSize: 11,
-    padding: '6px 8px',
-    textAlign: 'left' as const,
-    cursor: 'pointer',
-    borderRadius: 3,
-  };
-
   return (
-    <div
-      style={{
-        height: 28,
-        flexShrink: 0,
-        display: 'flex',
-        alignItems: 'center',
-        background: '#2c2c2c',
-        borderBottom: '1px solid #333',
-        padding: '0 8px',
-        pointerEvents: 'auto',
-        userSelect: 'none',
-        fontSize: 11,
-      }}
-    >
+    <header className="vgai-project-header">
+      {/* W5 (W4-reviewer candidate — transport narrow-width overlap guard):
+          the header is now THREE flex columns — name (shrinkable, ellipsized)
+          | transport (fixed) | right spacer — replacing the W4 absolute
+          centering, which let the transport cluster overlap the project name
+          at narrow widths. Equal-flex side columns keep the transport
+          visually centered whenever space allows; flex items cannot overlap
+          when it doesn't. */}
       {/* Project name — clickable dropdown trigger */}
-      <div ref={menuRef} style={{ position: 'relative' }}>
-        <button
-          type="button"
+      <div ref={menuRef} className="vgai-project-header-left">
+        <MenuTrigger
+          data-testid="project-menu-trigger"
+          aria-label={`${projectName} project menu`}
+          title={projectPath || projectName}
           onClick={() => setMenuOpen((v) => !v)}
-          style={{
-            background: menuOpen ? '#3a3a3a' : 'none',
-            border: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-            cursor: 'pointer',
-            padding: '2px 6px',
-            borderRadius: 3,
+          onKeyDown={(event) => {
+            if (event.key !== 'ArrowDown') return;
+            event.preventDefault();
+            setMenuOpen(true);
           }}
+          className="vgai-project-trigger"
         >
-          <span
+          <Text
             data-testid="project-name"
             data-project={projectName}
-            style={{ fontWeight: 600, color: '#c5c8ce', fontSize: 11 }}
+            data-project-version={projectVersion ?? undefined}
+            variant="label"
+            truncate
           >
             {projectName}
-          </span>
-          {projectPath && (
-            <span
-              style={{
-                color: '#555',
-                fontSize: 10,
-                maxWidth: 250,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-              title={projectPath}
-            >
-              {projectPath}
-            </span>
-          )}
-          <span style={{ color: '#555', fontSize: 9 }}>▾</span>
-        </button>
+          </Text>
+          <DisclosureIcon direction="down" tone="dim" />
+        </MenuTrigger>
+        <Inline onPointerDown={() => setMenuOpen(false)} className="vgai-project-app-menus">
+          <ApplicationMenus />
+        </Inline>
 
         {menuOpen && (
-          <div
-            style={{
-              position: 'absolute',
-              top: '100%',
-              left: 0,
-              marginTop: 2,
-              background: '#2c2c2c',
-              border: '1px solid #444',
-              borderRadius: 4,
-              boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
-              zIndex: 9999,
-              minWidth: 180,
-              padding: 4,
+          <Menu
+            autoFocusFirst
+            onDismiss={() => {
+              const trigger = menuRef.current?.querySelector<HTMLButtonElement>(
+                '[data-testid="project-menu-trigger"]',
+              );
+              setMenuOpen(false);
+              requestAnimationFrame(() => trigger?.focus());
             }}
+            className="vgai-project-menu"
           >
+            {projectPath && (
+              <Text
+                data-testid="project-menu-path"
+                title={projectPath}
+                variant="caption"
+                tone="dim"
+                selectable
+                truncate
+                className="vgai-project-path"
+              >
+                {projectPath}
+              </Text>
+            )}
+            {projectVersion && engineVersion && manifestVersion !== null && (
+              <>
+                {projectPath && <MenuSeparator />}
+                <div data-testid="project-version-summary" className="vgai-project-versions">
+                  <span>Project</span>
+                  <Text variant="code" tone="muted">
+                    v{projectVersion}
+                  </Text>
+                  <span>Engine</span>
+                  <Text variant="code" tone="muted">
+                    v{engineVersion}
+                  </Text>
+                  <span>Format</span>
+                  <Text variant="code" tone="muted">
+                    v{manifestVersion}
+                  </Text>
+                </div>
+                <MenuSeparator />
+              </>
+            )}
             {/* Phase A cleanup: browser mode has no OS path to reveal (File
                 System Access doesn't expose one, and `rootPath` there is a
                 sentinel like 'fsa'/'browser', not a filesystem path) — hidden
                 outright rather than shown-but-broken. Not a navigation path,
                 so no dead-end risk. */}
             {projectPath && getEditorMode() === 'server' && (
-              <button
-                type="button"
-                onClick={() => {
+              <MenuItem
+                onSelect={() => {
                   setMenuOpen(false);
                   revealInFinder(projectPath);
                 }}
-                style={menuItemStyle}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = '#3a3a3a';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'none';
-                }}
               >
                 Show in Finder
-              </button>
+              </MenuItem>
             )}
+            <MenuItem
+              data-testid="project-menu-history"
+              onSelect={() => {
+                setMenuOpen(false);
+                window.dispatchEvent(new CustomEvent('editor:show-history-tab'));
+              }}
+            >
+              {/* §8 naming: `Undo History`, never plain `History` (git/version
+                  confusion). Opens its on-demand Dockview panel wherever the
+                  user last placed it. */}
+              Undo History…
+            </MenuItem>
             {onReturnToProjectScreen && (
               <>
-                {projectPath && getEditorMode() === 'server' && (
-                  <div style={{ height: 1, background: '#444', margin: '4px 0' }} />
-                )}
-                <button
-                  type="button"
-                  onClick={() => {
+                {projectPath && getEditorMode() === 'server' && <MenuSeparator />}
+                <MenuItem
+                  onSelect={() => {
                     setMenuOpen(false);
                     onReturnToProjectScreen();
                   }}
-                  style={menuItemStyle}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background = '#3a3a3a';
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background = 'none';
-                  }}
                 >
                   Switch Project...
-                </button>
+                </MenuItem>
               </>
             )}
-          </div>
+          </Menu>
         )}
       </div>
 
-      {/* Save status — right aligned */}
-      <div style={{ marginLeft: 'auto' }}>
-        <SaveStatus />
-      </div>
-    </div>
+      {/* W4 (§4.1/§9 W4, inventory row V4 + the recorded always-visible-
+          transport work item): the global TRANSPORT cluster lives in the
+          command bar — reachable regardless of which center document is
+          active (asset/story docs used to hide play/pause/stop entirely).
+          Centered in the row, matching the §4.1 mock's `>  ||  >`. */}
+      <Inline data-testid="header-transport" className="vgai-project-transport" align="center">
+        <PlayBar />
+      </Inline>
+      {/* Agent is a Dockview panel, while the Supercode controller is not.
+          This header control can restore the panel without implying that
+          hiding it stopped the underlying followed/controlled session. */}
+      <Inline className="vgai-project-header-right" justify="end" align="center">
+        <Button
+          variant="ghost"
+          data-testid="header-agent-toggle"
+          aria-pressed={!chatLayout.collapsed}
+          aria-label={chatLayout.collapsed ? 'Open Agent panel' : 'Hide Agent panel'}
+          title={`${agentState.controlled ? 'Controlled by this editor' : agentState.following ? 'Following an external session' : 'No active coding session'}${agentState.needsInput ? ' · needs input' : ''}`}
+          onClick={toggleHarnessChatCollapsed}
+        >
+          <EditorIcon icon={faMessage} />
+          <span>Agent</span>
+          <span
+            aria-hidden
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: themeVars.shape.full,
+              background: agentState.needsInput
+                ? themeVars.semantic.warning
+                : agentState.working
+                  ? themeVars.accent.default
+                  : agentState.controlled
+                    ? themeVars.semantic.success
+                    : agentState.following
+                      ? themeVars.semantic.dynamic
+                      : themeVars.content.dim,
+            }}
+          />
+        </Button>
+      </Inline>
+      {/* SaveStatus moved OUT of this command header (H3): status is status,
+          not a command — it renders in the W4 status bar
+          (`status-contributions.tsx`). */}
+    </header>
   );
 }