gitspace 0.2.0-rc.1

package/src/shared/components/Inbox.tsx

@@ -0,0 +1,446 @@
+/**
+ * Inbox - Shared Hook
+ *
+ * Hook that manages inbox notification state and actions.
+ * Used by both web and TUI renderers.
+ */
+
+import { useState, useCallback, useMemo, useEffect } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Inbox item type */
+export type InboxItemType = 'exit' | 'title' | 'idle' | 'bell';
+
+/** Inbox item from tmux-lite */
+export interface InboxItem {
+  id: string;
+  sessionId: string;
+  sessionName: string;
+  type: InboxItemType;
+  context: string;
+  timestamp: number;
+  read: boolean;
+  processTitle?: string;
+  exitCode?: number;
+}
+
+/** Parsed session name components */
+export interface ParsedSessionName {
+  project: string;
+  workspace: string;
+  session: string;
+}
+
+/** Session group in hierarchical view */
+export interface SessionGroup {
+  session: string;
+  items: InboxItem[];
+}
+
+/** Workspace group in hierarchical view */
+export interface WorkspaceGroup {
+  workspace: string;
+  sessions: SessionGroup[];
+  totalItems: number;
+}
+
+/** Project group in hierarchical view */
+export interface ProjectGroup {
+  project: string;
+  workspaces: WorkspaceGroup[];
+  totalItems: number;
+}
+
+/** Display item types for flattened list */
+export type InboxDisplayItem =
+  | { type: 'project-header'; project: string; totalItems: number }
+  | { type: 'workspace-header'; workspace: string; itemCount: number; isFirstWorkspace: boolean }
+  | { type: 'session-header'; session: string; itemCount: number; isFirstSession: boolean }
+  | { type: 'item'; item: InboxItem; flatIndex: number };
+
+/** Props for useInbox hook */
+export interface UseInboxProps {
+  items: InboxItem[];
+  unreadCount: number;
+  onClearItem: (itemId: string) => Promise<void>;
+  onClearAll: () => Promise<void>;
+  onMarkRead: (itemId: string) => Promise<void>;
+  onAttachSession: (sessionId: string) => Promise<void>;
+  onClose: () => void;
+}
+
+/** Return type of useInbox hook */
+export interface UseInboxReturn {
+  // Display data
+  displayItems: InboxDisplayItem[];
+  flatItems: InboxItem[];
+  hierarchical: ProjectGroup[];
+  selectedIndex: number;
+  viewingSessionId: string | null;
+  sessionThreadItems: InboxItem[];
+  unreadCount: number;
+
+  // Computed flags
+  isEmpty: boolean;
+  isViewingThread: boolean;
+
+  // Actions
+  moveUp: () => void;
+  moveDown: () => void;
+  selectIndex: (index: number) => void;
+  openThread: () => void;
+  closeThread: () => void;
+  deleteSelected: () => Promise<void>;
+  deleteThread: () => Promise<void>;
+  clearAll: () => Promise<void>;
+  attachToSession: () => Promise<void>;
+  close: () => void;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/** Parse session name into project/workspace/session */
+export function parseSessionName(sessionName: string): ParsedSessionName {
+  if (!sessionName || typeof sessionName !== 'string') {
+    return { project: 'unknown', workspace: 'unknown', session: 'unknown' };
+  }
+  const parts = sessionName.split(':');
+  return {
+    project: parts[0] || 'unknown',
+    workspace: parts[1] || 'unknown',
+    session: parts[2] || 'unknown',
+  };
+}
+
+/** Get icon for inbox item type */
+export function getInboxIcon(item: InboxItem): string {
+  if (item.type === 'exit') return item.exitCode === 0 ? '✅' : '❌';
+  if (item.type === 'title') return '📝';
+  if (item.type === 'idle') return '⏸️';
+  return '🔔';
+}
+
+/** Get label for inbox item type */
+export function getInboxTypeLabel(item: InboxItem): string {
+  if (item.type === 'exit') return item.exitCode === 0 ? 'Completed' : `Exit code ${item.exitCode}`;
+  if (item.type === 'title') return 'Title Change';
+  if (item.type === 'idle') return 'Activity Complete';
+  return 'Bell';
+}
+
+/** Format relative time */
+export function formatTimeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+/** Group inbox items hierarchically by project > workspace > session */
+function groupInboxHierarchically(items: InboxItem[]): ProjectGroup[] {
+  // Filter out invalid items and sort by timestamp (most recent first)
+  const validItems = items.filter(item =>
+    item &&
+    typeof item === 'object' &&
+    item.sessionName &&
+    typeof item.sessionName === 'string' &&
+    item.sessionName !== 'undefined'
+  );
+  const sortedItems = [...validItems].sort((a, b) => b.timestamp - a.timestamp);
+
+  // Three-level grouping: project → workspace → session
+  const projectMap = new Map<string, Map<string, Map<string, InboxItem[]>>>();
+  const projectLatest = new Map<string, number>();
+  const workspaceLatest = new Map<string, number>();
+  const sessionLatest = new Map<string, number>();
+
+  for (const item of sortedItems) {
+    const { project, workspace, session } = parseSessionName(item.sessionName);
+    const wsKey = `${project}:${workspace}`;
+    const sessKey = `${project}:${workspace}:${session}`;
+
+    // Track latest timestamp for sorting groups
+    if (!projectLatest.has(project) || item.timestamp > projectLatest.get(project)!) {
+      projectLatest.set(project, item.timestamp);
+    }
+    if (!workspaceLatest.has(wsKey) || item.timestamp > workspaceLatest.get(wsKey)!) {
+      workspaceLatest.set(wsKey, item.timestamp);
+    }
+    if (!sessionLatest.has(sessKey) || item.timestamp > sessionLatest.get(sessKey)!) {
+      sessionLatest.set(sessKey, item.timestamp);
+    }
+
+    if (!projectMap.has(project)) {
+      projectMap.set(project, new Map());
+    }
+    const workspaceMap = projectMap.get(project)!;
+
+    if (!workspaceMap.has(workspace)) {
+      workspaceMap.set(workspace, new Map());
+    }
+    const sessionMap = workspaceMap.get(workspace)!;
+
+    if (!sessionMap.has(session)) {
+      sessionMap.set(session, []);
+    }
+    sessionMap.get(session)!.push(item);
+  }
+
+  const result: ProjectGroup[] = [];
+  for (const [project, workspaceMap] of projectMap) {
+    const workspaces: WorkspaceGroup[] = [];
+    let projectTotal = 0;
+
+    for (const [workspace, sessionMap] of workspaceMap) {
+      const sessions: SessionGroup[] = [];
+      let workspaceTotal = 0;
+
+      for (const [session, sessionItems] of sessionMap) {
+        sessions.push({ session, items: sessionItems });
+        workspaceTotal += sessionItems.length;
+      }
+
+      // Sort sessions by most recent
+      const wsKey = `${project}:${workspace}`;
+      sessions.sort((a, b) => {
+        const aKey = `${wsKey}:${a.session}`;
+        const bKey = `${wsKey}:${b.session}`;
+        return (sessionLatest.get(bKey) || 0) - (sessionLatest.get(aKey) || 0);
+      });
+
+      workspaces.push({ workspace, sessions, totalItems: workspaceTotal });
+      projectTotal += workspaceTotal;
+    }
+
+    // Sort workspaces by most recent
+    workspaces.sort((a, b) => {
+      const aKey = `${project}:${a.workspace}`;
+      const bKey = `${project}:${b.workspace}`;
+      return (workspaceLatest.get(bKey) || 0) - (workspaceLatest.get(aKey) || 0);
+    });
+
+    result.push({ project, workspaces, totalItems: projectTotal });
+  }
+
+  // Sort projects by most recent
+  result.sort((a, b) => (projectLatest.get(b.project) || 0) - (projectLatest.get(a.project) || 0));
+
+  return result;
+}
+
+/** Build flat display items from hierarchical groups */
+function buildInboxDisplay(items: InboxItem[]): { displayItems: InboxDisplayItem[]; flatItems: InboxItem[] } {
+  const hierarchical = groupInboxHierarchically(items);
+  const displayItems: InboxDisplayItem[] = [];
+  const flatItems: InboxItem[] = [];
+  let flatIndex = 0;
+
+  for (const projectGroup of hierarchical) {
+    displayItems.push({
+      type: 'project-header',
+      project: projectGroup.project,
+      totalItems: projectGroup.totalItems,
+    });
+
+    projectGroup.workspaces.forEach((wsGroup, wsIdx) => {
+      displayItems.push({
+        type: 'workspace-header',
+        workspace: wsGroup.workspace,
+        itemCount: wsGroup.totalItems,
+        isFirstWorkspace: wsIdx === 0,
+      });
+
+      wsGroup.sessions.forEach((sessGroup, sessIdx) => {
+        displayItems.push({
+          type: 'session-header',
+          session: sessGroup.session,
+          itemCount: sessGroup.items.length,
+          isFirstSession: sessIdx === 0,
+        });
+
+        for (const item of sessGroup.items) {
+          displayItems.push({ type: 'item', item, flatIndex });
+          flatItems.push(item);
+          flatIndex++;
+        }
+      });
+    });
+  }
+
+  return { displayItems, flatItems };
+}
+
+/** Get items for a specific session thread */
+function getSessionItems(items: InboxItem[], sessionId: string): InboxItem[] {
+  return items
+    .filter((item) => item.sessionId === sessionId)
+    .sort((a, b) => b.timestamp - a.timestamp);
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export function useInbox(props: UseInboxProps): UseInboxReturn {
+  const {
+    items,
+    unreadCount,
+    onClearItem,
+    onClearAll,
+    onMarkRead,
+    onAttachSession,
+    onClose,
+  } = props;
+
+  // Local UI state
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [viewingSessionId, setViewingSessionId] = useState<string | null>(null);
+
+  // Build display data
+  const { displayItems, flatItems } = useMemo(
+    () => buildInboxDisplay(items),
+    [items]
+  );
+
+  const hierarchical = useMemo(
+    () => groupInboxHierarchically(items),
+    [items]
+  );
+
+  // Session thread items (when viewing a thread)
+  const sessionThreadItems = useMemo(
+    () => (viewingSessionId ? getSessionItems(items, viewingSessionId) : []),
+    [items, viewingSessionId]
+  );
+
+  // Computed
+  const isEmpty = items.length === 0;
+  const isViewingThread = viewingSessionId !== null;
+
+  // Clamp selectedIndex when items change
+  useEffect(() => {
+    if (flatItems.length === 0) {
+      setSelectedIndex(0);
+    } else if (selectedIndex >= flatItems.length) {
+      setSelectedIndex(Math.max(0, flatItems.length - 1));
+    }
+  }, [flatItems.length, selectedIndex]);
+
+  // Actions
+  const moveUp = useCallback(() => {
+    setSelectedIndex((i) => Math.max(0, i - 1));
+  }, []);
+
+  const moveDown = useCallback(() => {
+    if (flatItems.length === 0) return; // Don't move if no items
+    setSelectedIndex((i) => Math.min(flatItems.length - 1, i + 1));
+  }, [flatItems.length]);
+
+  const selectIndex = useCallback(
+    (index: number) => {
+      setSelectedIndex(Math.max(0, Math.min(index, flatItems.length - 1)));
+    },
+    [flatItems.length]
+  );
+
+  const openThread = useCallback(async () => {
+    if (flatItems.length === 0) return;
+
+    const item = flatItems[selectedIndex];
+    if (item) {
+      // Mark thread as read
+      const threadItems = items.filter((i) => i.sessionId === item.sessionId && !i.read);
+      for (const threadItem of threadItems) {
+        await onMarkRead(threadItem.id);
+      }
+      setViewingSessionId(item.sessionId);
+    }
+  }, [flatItems, selectedIndex, items, onMarkRead]);
+
+  const closeThread = useCallback(() => {
+    setViewingSessionId(null);
+  }, []);
+
+  const deleteSelected = useCallback(async () => {
+    if (flatItems.length === 0) return;
+
+    const item = flatItems[selectedIndex];
+    if (item) {
+      await onClearItem(item.id);
+      // Adjust selection if needed
+      if (selectedIndex >= flatItems.length - 1 && flatItems.length > 1) {
+        setSelectedIndex(flatItems.length - 2);
+      }
+    }
+  }, [flatItems, selectedIndex, onClearItem]);
+
+  const deleteThread = useCallback(async () => {
+    if (!viewingSessionId) return;
+
+    for (const item of sessionThreadItems) {
+      await onClearItem(item.id);
+    }
+    // Adjust selection and go back to list
+    const newFlatItems = flatItems.filter((i) => i.sessionId !== viewingSessionId);
+    const newIndex = selectedIndex >= newFlatItems.length ? Math.max(0, newFlatItems.length - 1) : selectedIndex;
+    setSelectedIndex(newIndex);
+    setViewingSessionId(null);
+  }, [viewingSessionId, sessionThreadItems, flatItems, selectedIndex, onClearItem]);
+
+  const clearAll = useCallback(async () => {
+    await onClearAll();
+    setSelectedIndex(0);
+    setViewingSessionId(null);
+  }, [onClearAll]);
+
+  const attachToSession = useCallback(async () => {
+    const sessionId = viewingSessionId || (flatItems[selectedIndex]?.sessionId);
+    if (sessionId) {
+      await onAttachSession(sessionId);
+    }
+  }, [viewingSessionId, flatItems, selectedIndex, onAttachSession]);
+
+  const close = useCallback(() => {
+    if (viewingSessionId) {
+      setViewingSessionId(null);
+    } else {
+      onClose();
+    }
+  }, [viewingSessionId, onClose]);
+
+  return {
+    // Display data
+    displayItems,
+    flatItems,
+    hierarchical,
+    selectedIndex,
+    viewingSessionId,
+    sessionThreadItems,
+    unreadCount,
+
+    // Computed flags
+    isEmpty,
+    isViewingThread,
+
+    // Actions
+    moveUp,
+    moveDown,
+    selectIndex,
+    openThread,
+    closeThread,
+    deleteSelected,
+    deleteThread,
+    clearAll,
+    attachToSession,
+    close,
+  };
+}

package/src/shared/components/Inbox.tui.tsx

@@ -0,0 +1,262 @@
+/**
+ * Inbox - TUI Display Component
+ *
+ * Dumb presentational component for OpenTUI.
+ * Receives all state and actions from useInbox hook.
+ */
+
+import type { UseInboxReturn } from './Inbox.js';
+import {
+  parseSessionName,
+  getInboxIcon,
+  getInboxTypeLabel,
+  formatTimeAgo,
+} from './Inbox.js';
+
+// ============================================================================
+// Colors
+// ============================================================================
+
+const COLORS = {
+  border: '#555555',
+  borderFocused: '#00AAFF',
+  text: '#FFFFFF',
+  textDim: '#888888',
+  selected: '#00AAFF',
+  title: '#00FF88',
+  statusBar: '#333333',
+  loading: '#FFAA00',
+  project: '#00FF88',
+  workspace: '#FFAA00',
+  session: '#888888',
+  unread: '#FFFFFF',
+  read: '#666666',
+};
+
+// ============================================================================
+// Props
+// ============================================================================
+
+interface InboxTUIProps extends UseInboxReturn {
+  focused?: boolean;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function InboxTUI(props: InboxTUIProps) {
+  const {
+    displayItems,
+    flatItems,
+    selectedIndex,
+    viewingSessionId,
+    sessionThreadItems,
+    unreadCount,
+    isEmpty,
+    isViewingThread,
+    focused = true,
+  } = props;
+
+  // Thread detail view
+  if (isViewingThread && viewingSessionId) {
+    const sessionName = sessionThreadItems[0]?.sessionName;
+    const sessionParts = sessionName ? parseSessionName(sessionName) : null;
+    const sessionLabel = sessionParts
+      ? `${sessionParts.project} / ${sessionParts.workspace} / ${sessionParts.session}`
+      : 'Session';
+    const maxLinesPerItem = 8;
+
+    return (
+      <box flexDirection="column" width="100%" height="100%">
+        <box
+          flexDirection="column"
+          border
+          borderStyle="single"
+          borderColor={focused ? COLORS.borderFocused : COLORS.border}
+          flexGrow={1}
+          margin={1}
+        >
+          <text fg={COLORS.title} paddingLeft={1} height={1}>
+            {` 📥 ${sessionLabel}${sessionThreadItems.length > 0 ? ` (${sessionThreadItems.length} notification${sessionThreadItems.length > 1 ? 's' : ''})` : ''} `}
+          </text>
+          <box flexDirection="column" padding={1} flexGrow={1} overflow="scroll">
+            {sessionThreadItems.length > 0 ? (
+              sessionThreadItems.map((item, itemIdx) => {
+                const timeAgo = formatTimeAgo(item.timestamp);
+                const typeLabel = getInboxTypeLabel(item);
+                const icon = getInboxIcon(item);
+                const lines = item.context.split('\n');
+                const previewLines = lines.slice(0, maxLinesPerItem);
+                const remainingLines = Math.max(0, lines.length - previewLines.length);
+
+                return (
+                  <box
+                    key={item.id}
+                    flexDirection="column"
+                    marginBottom={itemIdx === sessionThreadItems.length - 1 ? 0 : 1}
+                  >
+                    <text fg={COLORS.title} height={1}>
+                      {icon} {typeLabel} · {timeAgo}
+                    </text>
+                    {item.processTitle && (
+                      <text fg={COLORS.loading} height={1}>
+                        Process: {item.processTitle}
+                      </text>
+                    )}
+                    <box flexDirection="column" paddingLeft={1} marginTop={1}>
+                      {previewLines.map((line, lineIdx) => (
+                        <text key={lineIdx} fg={COLORS.textDim} height={1}>
+                          {line}
+                        </text>
+                      ))}
+                      {remainingLines > 0 && (
+                        <text fg={COLORS.textDim} height={1}>
+                          ... ({remainingLines} more lines)
+                        </text>
+                      )}
+                    </box>
+                  </box>
+                );
+              })
+            ) : (
+              <text fg={COLORS.textDim} height={1}>
+                No notifications for this session.
+              </text>
+            )}
+          </box>
+        </box>
+        <box width="100%" height={1} backgroundColor={COLORS.statusBar}>
+          <text fg={COLORS.textDim}>
+            {' '}[a] Attach to session  [x] Delete  [Esc] Back to list
+          </text>
+        </box>
+      </box>
+    );
+  }
+
+  // Empty state
+  if (isEmpty) {
+    return (
+      <box flexDirection="column" width="100%" height="100%">
+        <box
+          flexDirection="column"
+          border
+          borderStyle="single"
+          borderColor={focused ? COLORS.borderFocused : COLORS.border}
+          flexGrow={1}
+          margin={1}
+        >
+          <text fg={COLORS.title} paddingLeft={1} height={1}>
+            {' '}📥 INBOX{' '}
+          </text>
+          <box
+            flexDirection="column"
+            padding={1}
+            flexGrow={1}
+            justifyContent="center"
+            alignItems="center"
+          >
+            <text fg={COLORS.textDim}>No notifications</text>
+          </box>
+        </box>
+        <box width="100%" height={1} backgroundColor={COLORS.statusBar}>
+          <text fg={COLORS.textDim}> [Esc] Back</text>
+        </box>
+      </box>
+    );
+  }
+
+  // List view
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <box
+        flexDirection="column"
+        border
+        borderStyle="single"
+        borderColor={focused ? COLORS.borderFocused : COLORS.border}
+        flexGrow={1}
+        margin={1}
+      >
+        <text fg={COLORS.title} paddingLeft={1} height={1}>
+          {` 📥 INBOX ${unreadCount > 0 ? `(${unreadCount} unread)` : ''} `}
+        </text>
+        <box flexDirection="column" padding={1} flexGrow={1} overflow="scroll">
+          {displayItems.map((displayItem, displayIdx) => {
+            if (displayItem.type === 'project-header') {
+              return (
+                <box key={`project-${displayItem.project}`} flexDirection="column">
+                  {displayIdx > 0 && <text height={1}> </text>}
+                  <text fg={COLORS.project} height={1}>
+                    ┌─ 📁 {displayItem.project} ({displayItem.totalItems}{' '}
+                    notification{displayItem.totalItems > 1 ? 's' : ''})
+                  </text>
+                </box>
+              );
+            }
+
+            if (displayItem.type === 'workspace-header') {
+              return (
+                <box key={`workspace-${displayItem.workspace}`} flexDirection="column">
+                  {!displayItem.isFirstWorkspace && (
+                    <text fg={COLORS.border} height={1}>
+                      │
+                    </text>
+                  )}
+                  <text fg={COLORS.workspace} height={1}>
+                    │  ┌─ 📂 {displayItem.workspace}
+                  </text>
+                </box>
+              );
+            }
+
+            if (displayItem.type === 'session-header') {
+              return (
+                <box key={`session-${displayItem.session}`} flexDirection="column">
+                  <text fg={COLORS.session} height={1}>
+                    │  │  ├─ 💻 {displayItem.session}
+                  </text>
+                </box>
+              );
+            }
+
+            // Item
+            const { item } = displayItem;
+            const isSelected = displayItem.flatIndex === selectedIndex;
+            const timeAgo = formatTimeAgo(item.timestamp);
+            const icon = getInboxIcon(item);
+            const readIndicator = item.read ? ' ' : '•';
+            const prefix = isSelected ? '▶' : ' ';
+            const processInfo = item.processTitle || '';
+            const context = item.context.split('\n')[0].substring(0, 40);
+
+            return (
+              <box key={item.id} flexDirection="column">
+                <text
+                  fg={isSelected ? COLORS.selected : item.read ? COLORS.read : COLORS.unread}
+                  height={1}
+                >
+                  │  │  │   {prefix}
+                  {readIndicator} {icon} {processInfo}
+                  {processInfo ? ' · ' : ''}
+                  {timeAgo}
+                </text>
+                <text
+                  fg={isSelected ? COLORS.selected : COLORS.textDim}
+                  height={1}
+                >
+                  │  │  │      {context}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+      </box>
+      <box width="100%" height={1} backgroundColor={COLORS.statusBar}>
+        <text fg={COLORS.textDim}>
+          {' '}[↑↓] Navigate  [Enter] View  [x] Delete  [c] Clear all  [Esc] Back
+        </text>
+      </box>
+    </box>
+  );
+}