ompchamber 0.8.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",
@@ -51,6 +51,7 @@
     "@shikijs/themes": "^4.4.3",
     "@tailwindcss/typography": "^0.5.20",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "dompurify": "^3.4.15",
     "elysia": "^1.4.30",

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

@@ -29,7 +29,7 @@ export function Category({
   onNewSessionForFolder: (id: number) => void;
   forceExpanded?: boolean;
   showArchived?: boolean;
-  sessionStatus?: Record<string, 'stream' | 'finish' | 'abort' | 'error'>;
+  sessionStatus?: Record<string, 'stream' | 'finish' | 'abort'>;
 }) {
   const [isOpen, setIsOpen] = useState(folder.isExpanded || false);
   const [showMenu, setShowMenu] = useState(false);

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

@@ -6,7 +6,7 @@ export interface SessionItemProps {
   title: string;
   isActive?: boolean;
   isArchived?: boolean;
-  status?: 'stream' | 'finish' | 'abort' | 'error';
+  status?: 'stream' | 'finish' | 'abort';
   /** The session's agent is blocked on a question until the user answers it. */
   awaitingInput?: boolean;
   onClick?: () => void;

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

@@ -6,7 +6,7 @@ interface SessionSidebarSessionListProps {
   activeSessionId: number | string | null;
   searchQuery: string;
   showArchived: boolean;
-  sessionStatus: Record<string, 'stream' | 'finish' | 'abort' | 'error'>;
+  sessionStatus: Record<string, 'stream' | 'finish' | 'abort'>;
   isScrolling: boolean;
   onScroll: () => void;
   onSelectSession: (id: number | string) => void;

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -17,7 +17,7 @@ interface MobileSessionCategoryProps {
   isExpanded: boolean;
   onToggleExpand: () => void;
   showArchived?: boolean;
-  sessionStatus?: Record<string, 'stream' | 'finish' | 'abort' | 'error'>;
+  sessionStatus?: Record<string, 'stream' | 'finish' | 'abort'>;
 }
 
 export function MobileSessionCategory({

package/src/client/components/mobile/mobile-session-sidebar/List.tsx

@@ -7,7 +7,7 @@ interface MobileSessionListProps {
   activeSessionId: number | string | null;
   expandedFolders: Record<number, boolean>;
   showArchived: boolean;
-  sessionStatus: Record<string, 'stream' | 'finish' | 'abort' | 'error'>;
+  sessionStatus: Record<string, 'stream' | 'finish' | 'abort'>;
   isScrolling: boolean;
   onScroll: () => void;
   onSelectSession: (id: number | string) => void;

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -5,7 +5,7 @@ import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 export interface MobileSessionRowProps {
   session: SessionItemData;
   isActive: boolean;
-  status?: 'stream' | 'finish' | 'abort' | 'error';
+  status?: 'stream' | 'finish' | 'abort';
   /** Relative age of the session, or null when no usable timestamp exists. */
   timeAgo: string | null;
   showTreeGlyph?: boolean;
@@ -64,7 +64,7 @@ export function MobileSessionRow({
         <div className="flex items-center space-x-1.5 min-w-0 pr-2">
           <span className="w-4 flex-shrink-0 flex items-center justify-center">
             {status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
-            {(status === 'finish' || status === 'abort' || status === 'error') && <Check size={13} className="text-ink/50" />}
+            {(status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
           </span>
           {showTreeGlyph && <span className="text-ink/40 text-xs flex-shrink-0 font-mono">&gt;</span>}
           <span className="text-xs truncate leading-snug">

package/src/client/components/workspace/chat-timeline/ComposerDock.tsx

@@ -13,7 +13,8 @@ interface ComposerDockProps {
   provider?: string;
   providerNames?: Record<string, string>;
   messageQueue: QueuedMessage[];
-  setMessageQueue: Dispatch<SetStateAction<QueuedMessage[]>>;
+  onRemoveQueueItem: (id: string) => void;
+  onReorderQueue: (orderedIds: string[]) => void;
   onEditQueueItem: (item: QueuedMessage) => void;
   onSendNowQueueItem: (item: QueuedMessage) => void;
   steeringQueue: QueuedMessage[];
@@ -49,7 +50,8 @@ export function ComposerDock({
   provider,
   providerNames,
   messageQueue,
-  setMessageQueue,
+  onRemoveQueueItem,
+  onReorderQueue,
   onEditQueueItem,
   onSendNowQueueItem,
   steeringQueue,
@@ -87,13 +89,18 @@ export function ComposerDock({
         )}
         <QueueList
           queue={messageQueue}
-          setQueue={setMessageQueue}
+          onRemove={onRemoveQueueItem}
+          onReorder={onReorderQueue}
           onEdit={onEditQueueItem}
           onSendNow={onSendNowQueueItem}
         />
         <QueueList
           queue={steeringQueue}
-          setQueue={setSteeringQueue}
+          onRemove={(id) => setSteeringQueue((q) => q.filter((i) => i.id !== id))}
+          onReorder={(orderedIds) => setSteeringQueue((prev) => {
+            const byId = new Map(prev.map((i) => [i.id, i]));
+            return orderedIds.map((id) => byId.get(id)).filter((i): i is QueuedMessage => Boolean(i));
+          })}
           isSteering
         />
         <ChatInput

package/src/client/components/workspace/chat-timeline/QueueList.tsx

@@ -1,4 +1,3 @@
-import type { Dispatch, SetStateAction } from 'preact/compat';
 import { useRef } from 'preact/hooks';
 import { GripVertical, Pencil, Send, X } from 'lucide-preact';
 import type { QueuedMessage } from '@/shared/types';
@@ -7,7 +6,10 @@ export type { QueuedMessage };
 
 interface QueueListProps {
   queue: QueuedMessage[];
-  setQueue: Dispatch<SetStateAction<QueuedMessage[]>>;
+  /** Reorder handler (drag-and-drop): receives the new id order. */
+  onReorder?: (orderedIds: string[]) => void;
+  /** Remove one row by id. */
+  onRemove?: (id: string) => void;
   /** True when every row in this panel is a steering delivery. */
   isSteering?: boolean;
   onEdit?: (item: QueuedMessage) => void;
@@ -20,18 +22,18 @@ const KIND_LABEL: Record<string, string> = {
   followup: 'follow-up',
 };
 
-export function QueueList({ queue, setQueue, isSteering = false, onEdit, onSendNow }: QueueListProps) {
+export function QueueList({ queue, onReorder, onRemove, isSteering = false, onEdit, onSendNow }: QueueListProps) {
   const dragItem = useRef<number | null>(null);
   const dragOverItem = useRef<number | null>(null);
 
   const handleSort = () => {
     if (dragItem.current === null || dragOverItem.current === null) return;
-    const _queue = [...queue];
-    const draggedItemContent = _queue.splice(dragItem.current, 1)[0];
-    _queue.splice(dragOverItem.current, 0, draggedItemContent);
+    const ids = queue.map((i) => i.id);
+    const draggedId = ids.splice(dragItem.current, 1)[0];
+    ids.splice(dragOverItem.current, 0, draggedId);
     dragItem.current = null;
     dragOverItem.current = null;
-    setQueue(_queue);
+    onReorder?.(ids);
   };
 
   if (queue.length === 0) return null;
@@ -80,13 +82,15 @@ export function QueueList({ queue, setQueue, isSteering = false, onEdit, onSendN
               <Pencil size={12} />
             </button>
           )}
-          <button
-            onClick={() => setQueue(q => q.filter(i => i.id !== item.id))}
-            className="text-ink/40 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
-            title="Remove"
-          >
-            <X size={14} />
-          </button>
+          {onRemove && (
+            <button
+              onClick={() => onRemove(item.id)}
+              className="text-ink/40 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Remove"
+            >
+              <X size={14} />
+            </button>
+          )}
         </div>
       ))}
     </div>

package/src/client/components/workspace/chat-timeline/index.tsx

@@ -49,7 +49,8 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     loadOlder,
     generatingVerb,
     messageQueue,
-    setMessageQueue,
+    removeMessage,
+    reorderMessages,
     steeringQueue,
     setSteeringQueue,
     inputValue,
@@ -243,7 +244,8 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                 provider={sessionProvider}
                 providerNames={providerNames}
                 messageQueue={messageQueue}
-                setMessageQueue={setMessageQueue}
+                onRemoveQueueItem={removeMessage}
+                onReorderQueue={reorderMessages}
                 onEditQueueItem={handleEditQueueItem}
                 onSendNowQueueItem={handleSendNowQueueItem}
                 steeringQueue={steeringQueue}

package/src/client/components/workspace/git-panel/BranchToolbar.tsx

@@ -113,7 +113,7 @@ export function GitBranchToolbar({
         <button
           type="button"
           onClick={onSync}
-          disabled={isBusy || (syncCount.ahead === 0 && syncCount.behind === 0)}
+          disabled={isBusy}
           title={
             syncCount.ahead > 0 && syncCount.behind > 0
               ? `Pull ${syncCount.behind} then push ${syncCount.ahead} commit(s)`
@@ -121,7 +121,7 @@ export function GitBranchToolbar({
                 ? `Push ${syncCount.ahead} commit(s)`
                 : syncCount.behind > 0
                   ? `Pull ${syncCount.behind} commit(s)`
-                  : 'Up to date'
+                  : 'Up to date — sync anyway'
           }
           className="flex items-center gap-1 p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
         >

package/src/client/components/workspace/git-panel/index.tsx

@@ -34,6 +34,10 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     const params = new URLSearchParams();
     if (rootPath) params.set('root', rootPath);
     if (targetRepo && targetRepo !== '.') params.set('repo', targetRepo);
+    // The toolbar's ↑ahead ↓behind badge is what this asks for; it makes the
+    // loader refresh the branch's remote-tracking ref before counting, so the
+    // numbers describe origin rather than the last fetch.
+    params.set('sync', '1');
     params.set('t', String(Date.now()));
     fetcher.load(`/api/fs/git?${params.toString()}`);
   };
@@ -200,7 +204,7 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     if (!enabled || pollingRepos || rescanningRepos) return;
     setExtraRepos(repos);
     setRescanningRepos(true);
-    const params = new URLSearchParams({ rescan: '1' });
+    const params = new URLSearchParams({ rescan: '1', sync: '1' });
     if (rootPath) params.set('root', rootPath);
     if (activeRepo !== '.') params.set('repo', activeRepo);
     params.set('t', String(Date.now()));

package/src/client/components/workspace/terminal-panel/Header.tsx

@@ -1,23 +1,46 @@
-import { Loader2, Terminal } from 'lucide-preact';
+import { Loader2, RotateCw, Terminal } from 'lucide-preact';
 import { GitRepoDropdown } from '@/client/components/workspace/file-explorer/GitRepoDropdown';
+import type { TerminalStatus } from '@/client/hooks/workspace/terminal';
 
 interface TerminalHeaderProps {
-  isRunning: boolean;
+  status: TerminalStatus;
+  exitCode: number | null;
   rootPath?: string;
   activeRepo: string;
   onSelectRepo: (repo: string) => void;
-  bunVersion?: string;
-  nodeVersion?: string;
+  /** Working directory the shell actually runs in. */
+  cwd?: string;
+  shell?: string;
+  gitBranch?: string;
+  onRestart: () => void;
 }
 
+const STATUS_LABEL: Record<TerminalStatus, string> = {
+  connecting: 'CONNECTING',
+  running: 'LIVE',
+  exited: 'EXITED',
+  error: 'ERROR',
+};
+
+const STATUS_CLASS: Record<TerminalStatus, string> = {
+  connecting: 'bg-warning/10 text-warning border-warning/20',
+  running: 'bg-success/10 text-success border-success/20',
+  exited: 'bg-ink/5 text-ink/60 border-ink/15',
+  error: 'bg-error/10 text-error border-error/20',
+};
+
 export function TerminalHeader({
-  isRunning,
+  status,
+  exitCode,
   rootPath,
   activeRepo,
   onSelectRepo,
-  bunVersion,
-  nodeVersion,
+  cwd,
+  shell,
+  gitBranch,
+  onRestart,
 }: TerminalHeaderProps) {
+  const shellName = shell ? shell.split('/').pop() : '';
   return (
     <div className="h-10 px-3 border-b border-ink/10 bg-paper flex items-center justify-between flex-shrink-0 select-none">
       {/* Left cluster: Title, Status, Repo */}
@@ -29,22 +52,31 @@ export function TerminalHeader({
           </span>
         </div>
 
-        {isRunning && (
-          <span className="inline-flex items-center space-x-1 px-1.5 py-0.5 rounded text-[10px] font-mono bg-warning/10 text-warning border border-warning/20 animate-pulse">
-            <Loader2 size={10} className="animate-spin" />
-            <span className="hidden xs:inline">RUNNING</span>
-          </span>
-        )}
+        <span
+          className={`inline-flex items-center space-x-1 px-1.5 py-0.5 rounded text-[10px] font-mono border ${STATUS_CLASS[status]}`}
+          title={status === 'exited' && exitCode !== null ? `Shell exited with code ${exitCode}` : undefined}
+        >
+          {status === 'connecting' && <Loader2 size={10} className="animate-spin" />}
+          <span>{status === 'exited' && exitCode !== null ? `EXIT ${exitCode}` : STATUS_LABEL[status]}</span>
+        </span>
 
         <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={onSelectRepo} />
+
+        <button
+          type="button"
+          onClick={onRestart}
+          title="Kill this shell and start a new one"
+          className="p-1 rounded text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer flex-shrink-0"
+        >
+          <RotateCw size={12} />
+        </button>
       </div>
 
-      {bunVersion && (
-        <span className="hidden sm:flex items-center space-x-2 text-[10px] font-mono text-ink/40 flex-shrink-0">
-          <span>Bun {bunVersion}</span>
-          {nodeVersion && <span>Node {nodeVersion}</span>}
-        </span>
-      )}
+      <span className="hidden sm:flex items-center space-x-2 text-[10px] font-mono text-ink/40 flex-shrink-0 min-w-0">
+        {cwd && <span className="truncate max-w-[280px]" title={cwd}>{cwd}</span>}
+        {gitBranch && <span>{gitBranch}</span>}
+        {shellName && <span>{shellName}</span>}
+      </span>
     </div>
   );
 }