@mecha.im/cli 0.3.4

package/agent/dashboard/src/pixel-engine/components/SettingsModal.tsx

@@ -0,0 +1,213 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { isSoundEnabled, setSoundEnabled } from '../notificationSound.js';
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  isDebugMode: boolean;
+  onToggleDebugMode: () => void;
+  onExportLayout?: () => void;
+  onImportLayout?: () => void;
+}
+
+const menuItemBase: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '6px 10px',
+  fontSize: '24px',
+  color: 'rgba(255, 255, 255, 0.8)',
+  background: 'transparent',
+  border: 'none',
+  borderRadius: 0,
+  cursor: 'pointer',
+  textAlign: 'left',
+};
+
+export function SettingsModal({
+  isOpen,
+  onClose,
+  isDebugMode,
+  onToggleDebugMode,
+  onExportLayout,
+  onImportLayout,
+}: SettingsModalProps) {
+  const [hovered, setHovered] = useState<string | null>(null);
+  const [soundLocal, setSoundLocal] = useState(isSoundEnabled);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Focus trap + Escape key handling
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    // Focus the dialog on open
+    dialogRef.current?.focus();
+    return () => window.removeEventListener('keydown', handler);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Dark backdrop — click to close */}
+      <div
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 49,
+        }}
+      />
+      {/* Centered modal */}
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Settings"
+        tabIndex={-1}
+        style={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 50,
+          background: 'var(--pixel-bg)',
+          border: '2px solid var(--pixel-border)',
+          borderRadius: 0,
+          padding: '4px',
+          boxShadow: 'var(--pixel-shadow)',
+          minWidth: 200,
+          outline: 'none',
+        }}
+      >
+        {/* Header with title and X button */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '4px 10px',
+            borderBottom: '1px solid var(--pixel-border)',
+            marginBottom: '4px',
+          }}
+        >
+          <span style={{ fontSize: '24px', color: 'rgba(255, 255, 255, 0.9)' }}>Settings</span>
+          <button
+            onClick={onClose}
+            onMouseEnter={() => setHovered('close')}
+            onMouseLeave={() => setHovered(null)}
+            style={{
+              background: hovered === 'close' ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+              border: 'none',
+              borderRadius: 0,
+              color: 'rgba(255, 255, 255, 0.6)',
+              fontSize: '24px',
+              cursor: 'pointer',
+              padding: '0 4px',
+              lineHeight: 1,
+            }}
+          >
+            X
+          </button>
+        </div>
+        {/* Menu items */}
+        <button
+          onClick={() => {
+            onExportLayout?.();
+            onClose();
+          }}
+          onMouseEnter={() => setHovered('export')}
+          onMouseLeave={() => setHovered(null)}
+          style={{
+            ...menuItemBase,
+            background: hovered === 'export' ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+          }}
+        >
+          Export Layout
+        </button>
+        <button
+          onClick={() => {
+            onImportLayout?.();
+            onClose();
+          }}
+          onMouseEnter={() => setHovered('import')}
+          onMouseLeave={() => setHovered(null)}
+          style={{
+            ...menuItemBase,
+            background: hovered === 'import' ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+          }}
+        >
+          Import Layout
+        </button>
+        <button
+          onClick={() => {
+            const newVal = !isSoundEnabled();
+            setSoundEnabled(newVal);
+            setSoundLocal(newVal);
+            localStorage.setItem('mecha-office-sound', String(newVal));
+          }}
+          onMouseEnter={() => setHovered('sound')}
+          onMouseLeave={() => setHovered(null)}
+          style={{
+            ...menuItemBase,
+            background: hovered === 'sound' ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+          }}
+        >
+          <span>Sound Notifications</span>
+          <span
+            style={{
+              width: 14,
+              height: 14,
+              border: '2px solid rgba(255, 255, 255, 0.5)',
+              borderRadius: 0,
+              background: soundLocal ? 'rgba(90, 140, 255, 0.8)' : 'transparent',
+              flexShrink: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '12px',
+              lineHeight: 1,
+              color: '#fff',
+            }}
+          >
+            {soundLocal ? 'X' : ''}
+          </span>
+        </button>
+        <button
+          onClick={onToggleDebugMode}
+          onMouseEnter={() => setHovered('debug')}
+          onMouseLeave={() => setHovered(null)}
+          style={{
+            ...menuItemBase,
+            background: hovered === 'debug' ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+          }}
+        >
+          <span>Debug View</span>
+          {isDebugMode && (
+            <span
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: 'rgba(90, 140, 255, 0.8)',
+                flexShrink: 0,
+              }}
+            />
+          )}
+        </button>
+      </div>
+    </>
+  );
+}

package/agent/dashboard/src/pixel-engine/components/ToolOverlay.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from 'react';
+
+import { CHARACTER_SITTING_OFFSET_PX, TOOL_OVERLAY_VERTICAL_OFFSET } from '../constants.js';
+import type { SubagentCharacter } from '../types.js';
+import type { OfficeState } from '../engine/officeState.js';
+import type { ToolActivity } from '../types.js';
+import { CharacterState, TILE_SIZE } from '../types.js';
+
+interface ToolOverlayProps {
+  officeState: OfficeState;
+  agents: number[];
+  agentTools: Record<number, ToolActivity[]>;
+  subagentCharacters: SubagentCharacter[];
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  zoom: number;
+  panRef: React.RefObject<{ x: number; y: number }>;
+}
+
+/** Derive a short human-readable activity string from tools/status */
+function getActivityText(
+  agentId: number,
+  agentTools: Record<number, ToolActivity[]>,
+  isActive: boolean,
+): string {
+  const tools = agentTools[agentId];
+  if (tools && tools.length > 0) {
+    // Find the latest non-done tool
+    const activeTool = [...tools].reverse().find((t) => !t.done);
+    if (activeTool) {
+      if (activeTool.permissionWait) return 'Needs approval';
+      return activeTool.status;
+    }
+    // All tools done but agent still active (mid-turn) — keep showing last tool status
+    if (isActive) {
+      const lastTool = tools[tools.length - 1];
+      if (lastTool) return lastTool.status;
+    }
+  }
+
+  return 'Idle';
+}
+
+export function ToolOverlay({
+  officeState,
+  agents,
+  agentTools,
+  subagentCharacters,
+  containerRef,
+  zoom,
+  panRef,
+}: ToolOverlayProps) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    let rafId = 0;
+    const tick = () => {
+      setTick((n) => n + 1);
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  const el = containerRef.current;
+  if (!el) return null;
+  const rect = el.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  const canvasW = Math.round(rect.width * dpr);
+  const canvasH = Math.round(rect.height * dpr);
+  const layout = officeState.getLayout();
+  const mapW = layout.cols * TILE_SIZE * zoom;
+  const mapH = layout.rows * TILE_SIZE * zoom;
+  const deviceOffsetX = Math.floor((canvasW - mapW) / 2) + Math.round(panRef.current.x);
+  const deviceOffsetY = Math.floor((canvasH - mapH) / 2) + Math.round(panRef.current.y);
+
+  const selectedId = officeState.selectedAgentId;
+  const hoveredId = officeState.hoveredAgentId;
+
+  // All character IDs
+  const allIds = [...agents, ...subagentCharacters.map((s) => s.id)];
+
+  return (
+    <>
+      {allIds.map((id) => {
+        const ch = officeState.characters.get(id);
+        if (!ch) return null;
+
+        const isSelected = selectedId === id;
+        const isHovered = hoveredId === id;
+        const isSub = ch.isSubagent;
+
+        // Only show for hovered or selected agents
+        if (!isSelected && !isHovered) return null;
+
+        // Position above character
+        const sittingOffset = ch.state === CharacterState.TYPE ? CHARACTER_SITTING_OFFSET_PX : 0;
+        const screenX = (deviceOffsetX + ch.x * zoom) / dpr;
+        const screenY =
+          (deviceOffsetY + (ch.y + sittingOffset - TOOL_OVERLAY_VERTICAL_OFFSET) * zoom) / dpr;
+
+        // Get activity text
+        const subHasPermission = isSub && ch.bubbleType === 'permission';
+        let activityText: string;
+        if (isSub) {
+          if (subHasPermission) {
+            activityText = 'Needs approval';
+          } else {
+            const sub = subagentCharacters.find((s) => s.id === id);
+            activityText = sub ? sub.label : 'Subtask';
+          }
+        } else {
+          activityText = getActivityText(id, agentTools, ch.isActive);
+        }
+
+        // Determine dot color
+        const tools = agentTools[id];
+        const hasPermission = subHasPermission || tools?.some((t) => t.permissionWait && !t.done);
+        const hasActiveTools = tools?.some((t) => !t.done);
+        const isActive = ch.isActive;
+
+        let dotColor: string | null = null;
+        if (hasPermission) {
+          dotColor = 'var(--pixel-status-permission)';
+        } else if (isActive && hasActiveTools) {
+          dotColor = 'var(--pixel-status-active)';
+        }
+
+        return (
+          <div
+            key={id}
+            style={{
+              position: 'absolute',
+              left: screenX,
+              top: screenY - 24,
+              transform: 'translateX(-50%)',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              pointerEvents: isSelected ? 'auto' : 'none',
+              zIndex: isSelected ? 'var(--pixel-overlay-selected-z)' : 'var(--pixel-overlay-z)',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 5,
+                background: 'var(--pixel-bg)',
+                border: isSelected
+                  ? '2px solid var(--pixel-border-light)'
+                  : '2px solid var(--pixel-border)',
+                borderRadius: 0,
+                padding: isSelected ? '3px 6px 3px 8px' : '3px 8px',
+                boxShadow: 'var(--pixel-shadow)',
+                whiteSpace: 'nowrap',
+                maxWidth: 220,
+              }}
+            >
+              {dotColor && (
+                <span
+                  className={isActive && !hasPermission ? 'pixel-agents-pulse' : undefined}
+                  style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: '50%',
+                    background: dotColor,
+                    flexShrink: 0,
+                  }}
+                />
+              )}
+              <div style={{ overflow: 'hidden' }}>
+                <span
+                  style={{
+                    fontSize: isSub ? '20px' : '22px',
+                    fontStyle: isSub ? 'italic' : undefined,
+                    color: 'var(--pixel-text)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: 'block',
+                  }}
+                >
+                  {activityText}
+                </span>
+                {ch.folderName && (
+                  <span
+                    style={{
+                      fontSize: '16px',
+                      color: 'var(--pixel-text-dim)',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      display: 'block',
+                    }}
+                  >
+                    {ch.folderName}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+}

package/agent/dashboard/src/pixel-engine/components/ZoomControls.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  ZOOM_LEVEL_FADE_DELAY_MS,
+  ZOOM_LEVEL_FADE_DURATION_SEC,
+  ZOOM_LEVEL_HIDE_DELAY_MS,
+  ZOOM_MAX,
+  ZOOM_MIN,
+} from '../constants.js';
+
+interface ZoomControlsProps {
+  zoom: number;
+  onZoomChange: (zoom: number) => void;
+}
+
+const btnBase: React.CSSProperties = {
+  width: 40,
+  height: 40,
+  padding: 0,
+  background: 'var(--pixel-bg)',
+  color: 'var(--pixel-text)',
+  border: '2px solid var(--pixel-border)',
+  borderRadius: 0,
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: 'var(--pixel-shadow)',
+};
+
+export function ZoomControls({ zoom, onZoomChange }: ZoomControlsProps) {
+  const [hovered, setHovered] = useState<'minus' | 'plus' | null>(null);
+  const [showLevel, setShowLevel] = useState(false);
+  const [fadeOut, setFadeOut] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const fadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevZoomRef = useRef(zoom);
+
+  const minDisabled = zoom <= ZOOM_MIN;
+  const maxDisabled = zoom >= ZOOM_MAX;
+
+  // Show zoom level briefly when zoom changes
+  useEffect(() => {
+    if (zoom === prevZoomRef.current) return;
+    prevZoomRef.current = zoom;
+
+    // Clear existing timers
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (fadeTimerRef.current) clearTimeout(fadeTimerRef.current);
+
+    setShowLevel(true);
+    setFadeOut(false);
+
+    // Start fade after delay
+    fadeTimerRef.current = setTimeout(() => {
+      setFadeOut(true);
+    }, ZOOM_LEVEL_FADE_DELAY_MS);
+
+    // Hide completely after delay
+    timerRef.current = setTimeout(() => {
+      setShowLevel(false);
+      setFadeOut(false);
+    }, ZOOM_LEVEL_HIDE_DELAY_MS);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (fadeTimerRef.current) clearTimeout(fadeTimerRef.current);
+    };
+  }, [zoom]);
+
+  return (
+    <>
+      {/* Zoom level indicator at top-center */}
+      {showLevel && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 10,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 'var(--pixel-controls-z)',
+            background: 'var(--pixel-bg)',
+            border: '2px solid var(--pixel-border)',
+            borderRadius: 0,
+            padding: '4px 12px',
+            boxShadow: 'var(--pixel-shadow)',
+            fontSize: '26px',
+            color: 'var(--pixel-text)',
+            userSelect: 'none',
+            opacity: fadeOut ? 0 : 1,
+            transition: `opacity ${ZOOM_LEVEL_FADE_DURATION_SEC}s ease-out`,
+            pointerEvents: 'none',
+          }}
+        >
+          {zoom}x
+        </div>
+      )}
+
+      {/* Vertically stacked round buttons — top-left */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 8,
+          left: 8,
+          zIndex: 'var(--pixel-controls-z)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+        }}
+      >
+        <button
+          onClick={() => onZoomChange(zoom + 1)}
+          disabled={maxDisabled}
+          onMouseEnter={() => setHovered('plus')}
+          onMouseLeave={() => setHovered(null)}
+          style={{
+            ...btnBase,
+            background:
+              hovered === 'plus' && !maxDisabled ? 'var(--pixel-btn-hover-bg)' : btnBase.background,
+            cursor: maxDisabled ? 'default' : 'pointer',
+            opacity: maxDisabled ? 'var(--pixel-btn-disabled-opacity)' : 1,
+          }}
+          title="Zoom in (Ctrl+Scroll)"
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <line
+              x1="9"
+              y1="3"
+              x2="9"
+              y2="15"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+            <line
+              x1="3"
+              y1="9"
+              x2="15"
+              y2="9"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+        <button
+          onClick={() => onZoomChange(zoom - 1)}
+          disabled={minDisabled}
+          onMouseEnter={() => setHovered('minus')}
+          onMouseLeave={() => setHovered(null)}
+          style={{
+            ...btnBase,
+            background:
+              hovered === 'minus' && !minDisabled
+                ? 'var(--pixel-btn-hover-bg)'
+                : btnBase.background,
+            cursor: minDisabled ? 'default' : 'pointer',
+            opacity: minDisabled ? 'var(--pixel-btn-disabled-opacity)' : 1,
+          }}
+          title="Zoom out (Ctrl+Scroll)"
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <line
+              x1="3"
+              y1="9"
+              x2="15"
+              y2="9"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      </div>
+    </>
+  );
+}