ompchamber 0.3.0

package/src/client/components/layout/session-sidebar/Modals.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Clock, Columns, FolderOpen, Home, Maximize2, Plus, Send, Settings2, Terminal, X } from 'lucide-preact';
+import { SettingsModal } from '@/client/components/settings/Modal';
+import { FolderPicker } from '@/client/components/common/FolderPicker';
+
+export { SettingsModal };
+export { AboutModal } from '@/client/components/layout/session-sidebar/about-modal';
+
+interface NewWorkspaceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Submit handler: name (required unless derived from path) + optional omp
+   *  project path. Return a rejected promise to keep the modal open on error. */
+  onCreate?: (input: { name: string; path?: string }) => Promise<void> | void;
+}
+
+export function NewWorkspaceModal({ isOpen, onClose, onCreate }: NewWorkspaceModalProps) {
+  const [name, setName] = useState('');
+  const [path, setPath] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setName('');
+      setPath('');
+      setBusy(false);
+      setError(null);
+      setPickerOpen(false);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handlePickPath = (picked: string) => {
+    setPath(picked);
+    setPickerOpen(false);
+    // Convenience: derive the folder name from the picked path when the user
+    // has not typed a custom name yet.
+    if (!name.trim()) {
+      const base = picked.replace(/[\\/]+$/, '').split(/[\\/]/).pop() || '';
+      if (base) setName(base);
+    }
+  };
+
+  const handleCreate = async () => {
+    if (!onCreate) {
+      onClose();
+      return;
+    }
+    if (!name.trim() && !path.trim()) {
+      setError('Enter a name or a project path.');
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await onCreate({ name: name.trim(), path: path.trim() || undefined });
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-ink/20 z-50 flex items-center justify-center">
+      <div className="bg-paper border border-ink/10 rounded-lg shadow-xl w-96 p-4 flex flex-col">
+        <div className="flex justify-between items-center mb-4 border-b border-ink/10 pb-2">
+          <h3 className="font-semibold text-sm">New Workspace</h3>
+          <X size={14} className="cursor-pointer hover:text-ink/60" onClick={onClose} />
+        </div>
+        <div className="text-sm text-ink/80 py-2 space-y-3">
+          <div>
+            <label className="block text-xs font-semibold mb-1 text-ink">Workspace Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.currentTarget.value)}
+              placeholder="e.g. bofis-pro"
+              className="w-full bg-paper border border-ink/20 rounded px-3 py-2 outline-none focus:border-ink/50 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold mb-1 text-ink">
+              Project Path <span className="text-ink/40 font-normal">(optional — binds omp sessions)</span>
+            </label>
+            <div className="flex items-center space-x-2">
+              <div className="flex-1 flex items-center bg-paper border border-ink/20 rounded overflow-hidden focus-within:border-ink/50">
+                <div className="px-2 text-ink/40 bg-ink/5 h-full flex items-center border-r border-ink/10">
+                  <Home size={14} />
+                </div>
+                <input
+                  type="text"
+                  value={path}
+                  onChange={(e) => setPath(e.currentTarget.value)}
+                  placeholder="~/projects/my-project"
+                  className="w-full px-3 py-2 outline-none text-sm bg-transparent"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={() => setPickerOpen(true)}
+                className="px-3 py-2 bg-ink/5 border border-ink/10 rounded text-xs font-medium hover:bg-ink/10 transition-colors flex items-center space-x-1.5 flex-shrink-0"
+              >
+                <FolderOpen size={13} />
+                <span>Browse</span>
+              </button>
+            </div>
+          </div>
+          {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+        <div className="mt-4 flex justify-end space-x-2">
+          <button
+            className="px-3 py-1.5 text-xs font-medium text-ink/60 hover:text-ink transition-colors"
+            onClick={onClose}
+            disabled={busy}
+          >
+            Cancel
+          </button>
+          <button
+            className="px-4 py-1.5 text-xs font-medium bg-ink text-canvas rounded hover:bg-ink/90 transition-colors disabled:opacity-50"
+            onClick={handleCreate}
+            disabled={busy}
+          >
+            {busy ? 'Creating…' : 'Create Workspace'}
+          </button>
+        </div>
+      </div>
+      {pickerOpen && (
+        <FolderPicker
+          initialPath={path || undefined}
+          onSelect={handlePickPath}
+          onClose={() => setPickerOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+interface SchedulerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function SchedulerModal({ isOpen, onClose }: SchedulerModalProps) {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 bg-ink/20 z-50 flex items-center justify-center p-4">
+      <div className="bg-paper border border-ink/10 rounded-lg shadow-xl w-full max-w-2xl flex flex-col overflow-hidden">
+        <div className="flex justify-between items-center p-4 border-b border-ink/10 bg-paper">
+          <div className="flex items-center space-x-2 text-ink">
+            <Clock size={16} />
+            <h3 className="font-semibold text-sm">Schedule Chat / Task</h3>
+          </div>
+          <X size={16} className="cursor-pointer hover:text-ink/60" onClick={onClose} />
+        </div>
+        
+        <div className="p-4 bg-canvas">
+          <div className="w-full bg-paper border border-ink/20 rounded-md focus-within:border-ink transition-colors flex flex-col shadow-sm">
+            <div className="flex items-center px-3 py-2 border-b border-ink/5 text-ink/60 space-x-2">
+              <button className="hover:text-ink transition-colors"><Plus size={14} /></button>
+              <button className="hover:text-ink transition-colors"><Columns size={14} /></button>
+              <button className="hover:text-ink transition-colors"><Maximize2 size={14} /></button>
+              
+              <div className="flex-1"></div>
+              
+              <div className="flex items-center space-x-2 text-xs text-ink">
+                <span className="font-medium">Schedule:</span>
+                <select className="bg-transparent border border-ink/20 rounded px-1.5 py-0.5 outline-none focus:border-ink/50">
+                  <option value="once">Once</option>
+                  <option value="every">Every</option>
+                  <option value="cron">Cron</option>
+                </select>
+                <input type="text" placeholder="e.g. 5 mins, 0 0 * * *" className="w-32 bg-transparent border border-ink/20 rounded px-2 py-0.5 outline-none focus:border-ink/50" />
+              </div>
+            </div>
+            
+            <textarea 
+              placeholder="Describe your scheduled task, ask a question, or paste commands..." 
+              className="w-full bg-transparent border-none px-4 py-4 text-sm focus:outline-none resize-none text-ink placeholder-ink/40 min-h-[120px]"
+            />
+            
+            <div className="flex items-center justify-between px-3 py-2 border-t border-ink/5">
+              <div className="flex items-center space-x-3 text-ink/60 text-xs">
+                <div className="flex items-center space-x-1 hover:text-ink cursor-pointer">
+                  <Settings2 size={14} />
+                  <span>Default</span>
+                </div>
+                <div className="flex items-center space-x-1 hover:text-ink cursor-pointer">
+                  <Terminal size={14} />
+                  <span>[CMD] DeepSeek V4 Flash</span>
+                </div>
+              </div>
+              <button 
+                onClick={onClose}
+                className="flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded bg-ink text-canvas hover:bg-ink/80 transition-colors text-xs font-medium"
+              >
+                <span>Schedule Task</span>
+                <Send size={12} className="ml-px" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/SessionItem.tsx

@@ -0,0 +1,145 @@
+import type { TargetedMouseEvent } from 'preact';
+import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, Loader2, Pencil } from 'lucide-preact';
+import { useInlineRename } from '@/client/hooks/ui/inline-rename';
+
+export interface SessionItemProps {
+  title: string;
+  isActive?: boolean;
+  isArchived?: boolean;
+  status?: 'stream' | 'finish' | 'abort' | 'error';
+  onClick?: () => void;
+  onArchive?: () => void;
+  onRename?: (name: string) => void;
+  expandable?: boolean;
+  isExpanded?: boolean;
+  hasSubagents?: boolean;
+  onToggleExpand?: (e: TargetedMouseEvent<HTMLElement>) => void;
+}
+
+export function SessionItem({
+  title,
+  isActive = false,
+  isArchived = false,
+  status,
+  onClick,
+  onArchive,
+  onRename,
+  expandable = false,
+  isExpanded = false,
+  hasSubagents = false,
+  onToggleExpand,
+}: SessionItemProps) {
+  const showChevron = Boolean(expandable && hasSubagents && onToggleExpand);
+  const {
+    isEditing,
+    draft,
+    setDraft,
+    inputRef,
+    startRename,
+    handleKeyDown,
+    handleBlur,
+  } = useInlineRename(title, onRename);
+
+  return (
+    <div
+      onClick={isEditing ? undefined : onClick}
+      className={`group/item relative flex items-center w-full rounded-lg px-2 py-1.5 cursor-pointer text-xs transition-colors select-none ${
+        isActive
+          ? 'bg-ink/10 font-medium text-ink'
+          : 'text-ink/75 hover:text-ink hover:bg-ink/5'
+      }`}
+    >
+      {/* One 16px slot owns both icons: the run-status indicator (spinner /
+          check) shows at rest, and the expand toggle takes the slot over on
+          hover — or permanently while the roster is open. Never two icons.
+          The toggle is pointer-inert while invisible so the slot keeps
+          selecting the session until the chevron is what you see. */}
+      <span className="relative w-4 h-4 shrink-0">
+        {showChevron && onToggleExpand && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleExpand(e);
+            }}
+            title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            aria-expanded={isExpanded}
+            className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer text-ink/40 transition-opacity hover:text-ink ${
+              isExpanded
+                ? ''
+                : 'pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
+            }`}
+          >
+            {isExpanded ? <ChevronDown size={13} className="text-ink/70" /> : <ChevronRight size={13} />}
+          </button>
+        )}
+        {status && !(showChevron && isExpanded) && (
+          <span
+            className={`absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
+              showChevron ? 'group-hover/item:opacity-0 peer-focus-visible:opacity-0' : ''
+            }`}
+          >
+            {status === 'stream' ? (
+              <Loader2 size={12} className="animate-spin" />
+            ) : (
+              <Check size={12} />
+            )}
+          </span>
+        )}
+      </span>
+
+      {/* Gap between icon and text */}
+      <span className="w-2 shrink-0" />
+
+      {/* Session Title - aligned straight with Folder Name */}
+      {isEditing ? (
+        <input
+          ref={inputRef}
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.currentTarget.value)}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="flex-1 min-w-0 bg-paper border border-ink/25 rounded px-1 py-0.5 text-xs text-ink outline-none focus:border-ink/50"
+        />
+      ) : (
+        <span className="flex-1 min-w-0 truncate leading-snug">
+          {title.charAt(0).toUpperCase() + title.slice(1)}
+        </span>
+      )}
+
+      {/* Quick Actions: Rename / Archive on Hover */}
+      {!isEditing && (onRename || onArchive) && (
+        <div className="absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-0.5 opacity-0 group-hover/item:opacity-100 transition-opacity">
+          {onRename && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                startRename();
+              }}
+              title="Rename session"
+              className="p-1 text-ink/40 hover:text-ink bg-paper/90 hover:bg-ink/10 rounded shadow-xs cursor-pointer"
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+          {onArchive && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onArchive();
+              }}
+              title={isArchived ? 'Unarchive session' : 'Archive session'}
+              className="p-1 text-ink/40 hover:text-ink bg-paper/90 hover:bg-ink/10 rounded shadow-xs cursor-pointer"
+            >
+              {isArchived ? <ArchiveRestore size={12} /> : <Archive size={12} />}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/SessionList.tsx

@@ -0,0 +1,52 @@
+import { Category } from '@/client/components/layout/session-sidebar/CategoryItem';
+import { scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
+
+interface SessionSidebarSessionListProps {
+  folders: any[];
+  activeSessionId: number | string | null;
+  searchQuery: string;
+  showArchived: boolean;
+  sessionStatus: Record<string, 'stream' | 'finish' | 'abort' | 'error'>;
+  isScrolling: boolean;
+  onScroll: () => void;
+  onSelectSession: (id: number | string) => void;
+  onNewSessionForFolder: (id: number) => void;
+}
+
+export function SessionSidebarSessionList({
+  folders,
+  activeSessionId,
+  searchQuery,
+  showArchived,
+  sessionStatus,
+  isScrolling,
+  onScroll,
+  onSelectSession,
+  onNewSessionForFolder,
+}: SessionSidebarSessionListProps) {
+  return (
+    <div 
+      onScroll={onScroll}
+      className={`flex-1 scrollbar-overlay-container p-2 space-y-4 ${scrollbarFadeClass(isScrolling)}`}
+    >
+      {folders.length === 0 ? (
+        <div className="text-center py-8 text-xs text-ink/40">
+          {searchQuery ? 'No results found.' : 'No workspaces available.'}
+        </div>
+      ) : (
+        folders.map(folder => (
+          <Category 
+            key={folder.id} 
+            folder={folder} 
+            activeSessionId={activeSessionId}
+            onSelectSession={onSelectSession}
+            onNewSessionForFolder={onNewSessionForFolder}
+            forceExpanded={!!searchQuery}
+            showArchived={showArchived}
+            sessionStatus={sessionStatus}
+          />
+        ))
+      )}
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/Skeleton.tsx

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Placeholder for the session list while the first `/api/sessions/list`
+ * fetch is in flight. Pure chrome — two workspace blocks with a few session
+ * rows each, matching the real list's spacing so the swap-in is stable.
+ */
+
+const PLACEHOLDER_FOLDERS = [3, 2];
+
+export function SessionListSkeleton() {
+  return (
+    <div className="flex-1 p-2 space-y-4" aria-hidden="true">
+      {PLACEHOLDER_FOLDERS.map((rows, folderIndex) => (
+        <div key={folderIndex} className="space-y-1.5">
+          <div className="flex items-center gap-2 px-1 py-1.5">
+            <span className="w-3.5 h-3.5 rounded-sm animate-pulse bg-ink/10" />
+            <span className="h-3 w-24 rounded animate-pulse bg-ink/10" />
+          </div>
+          {Array.from({ length: rows }, (_, rowIndex) => (
+            <div key={rowIndex} className="flex items-center gap-2 rounded px-2 py-1.5">
+              <span className="w-4 h-4 rounded-full animate-pulse bg-ink/10" />
+              <span
+                className="h-3 rounded animate-pulse bg-ink/10"
+                style={{ width: `${58 - (rowIndex % 3) * 12}%` }}
+              />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/SubagentList.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { SubagentStatusIcon } from '@/client/components/common/SubagentStatusIcon';
+import { isRecord } from '@/shared/lib/util/guards';
+import { fetchSubagentHistory, historyEntryToSubagentInfo } from '@/shared/lib/omp/subagent/history/client';
+import { mergeSubagentRoster, parseSubagentLifecycle, parseSubagentProgress, parseSubagentRosterResponse } from '@/shared/lib/omp/subagent/parse';
+import type { SubagentInfo, SubagentProgress } from '@/shared/types';
+
+type SubagentListProps = {
+  sessionId: string | number;
+  isActiveSession: boolean;
+};
+
+type SubagentFrameDetail = { sessionId?: string; payload?: unknown };
+
+const PROGRESS_STATUS: Record<NonNullable<SubagentProgress['status']>, SubagentInfo['status']> = {
+  pending: 'started', running: 'started', completed: 'completed', failed: 'failed', aborted: 'aborted',
+};
+
+/** Progress frames arrive AgentProgress-shaped; some wrappers nest the snapshot. */
+function readProgress(payload: unknown): SubagentProgress | undefined {
+  const direct = parseSubagentProgress(payload);
+  if (!isRecord(payload) || !isRecord(payload.progress)) return direct;
+  const nested = parseSubagentProgress(payload.progress);
+  return nested ? { ...nested, id: nested.id ?? direct?.id, index: nested.index ?? direct?.index } : direct;
+}
+
+/** Fold one progress frame into the roster entry it names (id, else index). */
+function applyProgress(roster: SubagentInfo[], progress: SubagentProgress): SubagentInfo[] {
+  return roster.map((entry) => {
+    if (progress.id !== undefined) {
+      if (entry.id !== progress.id) return entry;
+    } else if (progress.index === undefined || progress.index < 0 || entry.index !== progress.index) {
+      return entry;
+    }
+    const status = progress.status && entry.status === 'started'
+      ? PROGRESS_STATUS[progress.status] ?? entry.status
+      : entry.status;
+    return { ...entry, status, progress: { ...entry.progress, ...progress }, lastUpdate: Date.now() };
+  });
+}
+
+/**
+ * Subagent roster nested under a session row: renders clean, readable subagent
+ * items matching the minimalist sidebar layout while preserving interactive inspection.
+ */
+export function SubagentList({ sessionId, isActiveSession }: SubagentListProps) {
+  const [searchParams] = useSearchParams();
+  const viewedSubagentId = searchParams.get('subagent');
+  const [subagents, setSubagents] = useState<SubagentInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // History pass: the roster floor for every session.
+  useEffect(() => {
+    let cancelled = false;
+    const sid = String(sessionId);
+    setSubagents([]);
+    setIsLoading(true);
+    void fetchSubagentHistory(sid)
+      .then((entries) => {
+        if (cancelled || !entries) return;
+        const roster = entries.map(historyEntryToSubagentInfo);
+        setSubagents((prev) => mergeSubagentRoster(prev, roster));
+      })
+      .finally(() => { if (!cancelled) setIsLoading(false); });
+    return () => { cancelled = true; };
+  }, [sessionId]);
+
+  // Live pass: active session only.
+  useEffect(() => {
+    if (!isActiveSession) return;
+    let cancelled = false;
+    const sid = String(sessionId);
+    const requestedAt = Date.now();
+    const detailOf = (event: Event): SubagentFrameDetail | null => {
+      const detail = (event as CustomEvent<SubagentFrameDetail>).detail;
+      return detail && detail.sessionId === sid ? detail : null;
+    };
+
+    const onLifecycle = (event: Event) => {
+      const entry = parseSubagentLifecycle(detailOf(event)?.payload);
+      if (entry) {
+        setSubagents((prev) => mergeSubagentRoster(prev, [entry]));
+      }
+    };
+    const onProgress = (event: Event) => {
+      const progress = readProgress(detailOf(event)?.payload);
+      if (progress) setSubagents((prev) => applyProgress(prev, progress));
+    };
+
+    window.addEventListener('subagent_lifecycle', onLifecycle);
+    window.addEventListener('subagent_progress', onProgress);
+
+    fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'get_subagents' }),
+    })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((body: unknown) => {
+        if (cancelled || !isRecord(body)) return;
+        const payload = 'data' in body ? body.data : body;
+        setSubagents((prev) => mergeSubagentRoster(prev, parseSubagentRosterResponse(payload), requestedAt));
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+      window.removeEventListener('subagent_lifecycle', onLifecycle);
+      window.removeEventListener('subagent_progress', onProgress);
+    };
+  }, [isActiveSession, sessionId]);
+
+  const hint = isLoading ? 'Loading subagents…' : subagents.length === 0 ? 'No subagent activity' : null;
+
+  return (
+    <div className="pl-6 pr-0 space-y-0.5 py-0.5">
+      {hint ? (
+        <div className="px-2 py-1 text-xs italic text-ink/40 flex items-center">
+          <span className="w-4 h-4 shrink-0" />
+          <span className="w-2 shrink-0" />
+          <span className="flex-1 min-w-0 truncate">{hint}</span>
+        </div>
+      ) : (
+        subagents.map((subagent) => {
+          const taskText = subagent.task ?? subagent.description ?? subagent.assignment ?? subagent.agent ?? '';
+          const isViewed = subagent.id === viewedSubagentId;
+          return (
+            <button
+              key={subagent.id}
+              type="button"
+              title={taskText}
+              onClick={() => window.dispatchEvent(new CustomEvent('omp:view-subagent', { detail: { sessionId: String(sessionId), subagent } }))}
+              className={`w-full flex items-center text-left text-xs rounded-md px-2 py-1 cursor-pointer transition-colors select-none group/subagent ${isViewed ? 'bg-ink/10 font-medium text-ink' : 'text-ink/70 hover:text-ink hover:bg-ink/5'}`}
+            >
+              {/* Subagent status icon slot - aligned straight with session item text */}
+              <span className="w-4 h-4 flex items-center justify-center shrink-0">
+                <SubagentStatusIcon status={subagent.status} live={isActiveSession && subagent.status === 'started'} size={11} />
+              </span>
+
+              {/* Gap between subagent icon and task text */}
+              <span className="w-2 shrink-0" />
+
+              {/* Subagent task description text */}
+              <span className="flex-1 min-w-0 truncate leading-snug">{taskText}</span>
+            </button>
+          );
+        })
+      )}
+    </div>
+  );
+}