@bramblex/codex-workbench 0.1.2 → 0.1.4

package/src/ui/workbench.js

@@ -0,0 +1,657 @@
+'use strict';
+
+const path = require('path');
+const blessed = require('blessed');
+const { printList, printShow } = require('../cli-output');
+const { deleteSessionFile } = require('../model/session-store');
+const { localTime, shortId, truncate } = require('../model/format');
+const {
+  LOCAL_SOURCE,
+  createSourceDirectory,
+  listSourceDirectories,
+  loadWorkbenchSessions,
+  runSourceNewSession,
+  runSourceSessionCommand,
+  sourceById,
+  updateSourceMetadata,
+} = require('../services/session-sources');
+const { usableCwd } = require('../services/codex-runner');
+const { createDirectoryPicker } = require('./directory-picker');
+
+async function runWorkbench() {
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    return printList(loadWorkbenchSessions().sessions);
+  }
+
+  let sessions = [];
+  let sources = [];
+  let sourceErrors = [];
+  let groups = [];
+  let groupIndex = 0;
+  let selected = 0;
+  let message = '';
+  let syncingList = false;
+  let syncingProjects = false;
+  let projectWidth = 32;
+  let activePanel = 'projects';
+
+  const screen = blessed.screen({
+    smartCSR: true,
+    fullUnicode: true,
+    title: 'Codex Workbench',
+  });
+
+  const header = blessed.box({
+    parent: screen,
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    padding: { left: 1, right: 1 },
+    style: { fg: 'white', bg: 'blue' },
+    content: 'Codex Workbench',
+  });
+
+  const projectsList = blessed.list({
+    parent: screen,
+    label: ' Projects ',
+    top: 3,
+    left: 0,
+    width: projectWidth,
+    bottom: 3,
+    border: 'line',
+    mouse: true,
+    keys: true,
+    vi: false,
+    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'green' } },
+    style: {
+      border: { fg: 'green' },
+      selected: { fg: 'black', bg: 'green', bold: true },
+      item: { fg: 'white' },
+    },
+  });
+
+  const sessionsList = blessed.list({
+    parent: screen,
+    label: ' Sessions ',
+    top: 3,
+    left: projectWidth,
+    right: 0,
+    height: '40%',
+    border: 'line',
+    mouse: true,
+    keys: true,
+    vi: false,
+    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'cyan' } },
+    style: {
+      border: { fg: 'cyan' },
+      selected: { fg: 'black', bg: 'cyan', bold: true },
+      item: { fg: 'white' },
+    },
+  });
+
+  const detailBox = blessed.log({
+    parent: screen,
+    label: ' Details ',
+    top: '50%',
+    left: projectWidth,
+    right: 0,
+    bottom: 3,
+    border: 'line',
+    padding: { left: 1, right: 1 },
+    scrollable: true,
+    mouse: true,
+    keys: true,
+    vi: true,
+    alwaysScroll: true,
+    tags: false,
+    parseTags: false,
+    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'cyan' } },
+    style: { border: { fg: 'cyan' }, fg: 'white' },
+  });
+
+  const status = blessed.box({
+    parent: screen,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 3,
+    padding: { left: 1, right: 1 },
+    style: { fg: 'white', bg: 'black' },
+  });
+
+  const prompt = blessed.prompt({
+    parent: screen,
+    border: 'line',
+    height: 8,
+    width: '70%',
+    top: 'center',
+    left: 'center',
+    padding: { left: 1, right: 1 },
+    style: { border: { fg: 'yellow' }, fg: 'white', bg: 'black' },
+  });
+
+  const question = blessed.question({
+    parent: screen,
+    border: 'line',
+    height: 6,
+    width: '70%',
+    top: 'center',
+    left: 'center',
+    padding: { left: 1, right: 1 },
+    style: { border: { fg: 'red' }, fg: 'white', bg: 'black' },
+  });
+
+  const sessionsForSource = (sourceId) => sessions.filter((session) => session.sourceId === sourceId);
+
+  const buildGroups = () => {
+    const nextGroups = [{ kind: 'all', label: 'All', source: null, cwd: null }];
+    for (const source of sources) {
+      const sourceSessions = sessionsForSource(source.id);
+      nextGroups.push({ kind: 'source', source, cwd: null });
+      const cwds = [...new Set(sourceSessions.map((session) => session.cwd))];
+      for (const cwd of cwds) {
+        nextGroups.push({ kind: 'project', source, cwd });
+      }
+    }
+    return nextGroups;
+  };
+
+  const currentGroup = () => groups[groupIndex] || groups[0] || { kind: 'all', source: null, cwd: null };
+
+  const currentSessions = () => {
+    const group = currentGroup();
+    if (group.kind === 'all') return sessions;
+    if (group.kind === 'source') return sessionsForSource(group.source.id);
+    return sessions.filter((session) => session.sourceId === group.source.id && session.cwd === group.cwd);
+  };
+
+  const selectedSession = () => currentSessions()[selected] || null;
+
+  const groupDisplayName = (group) => {
+    if (group.kind === 'all') return 'All sources';
+    if (group.kind === 'source') return group.source.label;
+    return `${group.source.label}: ${group.cwd}`;
+  };
+
+  const projectLabel = (group) => {
+    if (group.kind === 'all') return `All (${sessions.length})`;
+    if (group.kind === 'source') {
+      const count = sessionsForSource(group.source.id).length;
+      return `${truncate(group.source.label, Math.max(10, projectWidth - 6))} (${count})`;
+    }
+    const count = sessions.filter((session) => session.sourceId === group.source.id && session.cwd === group.cwd).length;
+    const base = path.basename(group.cwd) || group.cwd;
+    return `  ${truncate(base, Math.max(10, projectWidth - 12))} (${count})`;
+  };
+
+  const sessionLabel = (session) => {
+    const flags = [
+      session.name ? 'renamed' : '',
+      session.note ? 'note' : '',
+    ].filter(Boolean).join(',');
+    const title = session.name || session.first || session.last || '(no prompt)';
+    const flagText = flags ? `[${flags}]` : '';
+    return `${shortId(session.id)}  ${String(session.turns).padStart(2)}t  ${truncate(localTime(session.updatedAt), 18)}  ${flagText} ${truncate(title, 90)}`;
+  };
+
+  const detailContent = (session) => {
+    if (!session) return 'No sessions in this project.';
+    const title = session.name || session.first || session.last || '(no prompt)';
+    return [
+      title,
+      '',
+      `id:       ${session.id}`,
+      `source:   ${session.sourceLabel || 'Local'}`,
+      `cwd:      ${session.cwd}`,
+      `started:  ${localTime(session.startedAt)}`,
+      `updated:  ${localTime(session.updatedAt)}`,
+      `turns:    ${session.turns}`,
+      session.note ? `note:     ${session.note}` : '',
+      '',
+      `last user:      ${session.last || session.first || ''}`,
+      '',
+      `last assistant: ${session.lastAssistant || ''}`,
+    ].filter((line) => line !== '').join('\n');
+  };
+
+  const setMessage = (text, isError = false) => {
+    message = text || 'Ready';
+    status.style.fg = isError ? 'red' : 'white';
+  };
+
+  const reload = () => {
+    const state = loadWorkbenchSessions();
+    sources = state.sources;
+    sourceErrors = state.errors;
+    sessions = state.sessions.filter((s) => !s.archived && !s.hidden);
+    groups = buildGroups();
+    if (groupIndex >= groups.length) groupIndex = Math.max(0, groups.length - 1);
+    const visible = currentSessions();
+    if (selected >= visible.length) selected = Math.max(0, visible.length - 1);
+    if (sourceErrors.length && (!message || message === 'Ready')) {
+      const first = sourceErrors[0];
+      const detail = `${first.source.label}: ${first.error}`;
+      const prefix = sourceErrors.length === 1 ? 'Remote source failed' : `${sourceErrors.length} remote sources failed`;
+      setMessage(`${prefix}: ${truncate(detail, 100)}`, true);
+    }
+  };
+
+  const applyLayout = () => {
+    const width = screen.width || 80;
+    const height = screen.height || 24;
+    projectWidth = Math.min(42, Math.max(24, Math.floor(width * 0.28)));
+    const top = 3;
+    const bottom = 3;
+    const available = Math.max(10, height - top - bottom);
+    const sessionsHeight = Math.max(7, Math.floor(available * 0.45));
+
+    projectsList.width = projectWidth;
+    projectsList.top = top;
+    projectsList.bottom = bottom;
+
+    sessionsList.left = projectWidth;
+    sessionsList.top = top;
+    sessionsList.height = sessionsHeight;
+
+    detailBox.left = projectWidth;
+    detailBox.top = top + sessionsHeight;
+    detailBox.bottom = bottom;
+  };
+
+  const syncProjects = () => {
+    const items = groups.length ? groups.map(projectLabel) : ['No projects'];
+    syncingProjects = true;
+    projectsList.clearItems();
+    projectsList.setItems(items);
+    projectsList.select(groupIndex);
+    projectsList.scrollTo(groupIndex);
+    syncingProjects = false;
+  };
+
+  const syncList = () => {
+    const visible = currentSessions();
+    const listRows = Math.max(1, (sessionsList.height || Math.floor((screen.height || 24) * 0.4)) - 2);
+    const items = visible.length ? visible.map(sessionLabel) : ['No sessions in this project.'];
+    while (items.length < listRows) items.push('');
+    syncingList = true;
+    sessionsList.clearItems();
+    sessionsList.setItems(items);
+    selected = Math.min(selected, Math.max(0, visible.length - 1));
+    sessionsList.childBase = 0;
+    sessionsList.childOffset = 0;
+    sessionsList.select(selected);
+    sessionsList.scrollTo(0);
+    syncingList = false;
+  };
+
+  const setPanelLabel = (panel, title, focused, fg) => {
+    panel.setLabel(focused ? ` > ${title} ` : `   ${title} `);
+    if (!panel._label) return;
+    panel._label.style.fg = focused ? fg : 'white';
+    panel._label.style.bg = 'default';
+    panel._label.style.bold = focused;
+  };
+
+  const updateFocusStyles = () => {
+    const projectFocused = activePanel === 'projects';
+    const sessionsFocused = activePanel === 'sessions';
+    const detailFocused = activePanel === 'details';
+
+    projectsList.style.border.fg = projectFocused ? 'green' : 'gray';
+    sessionsList.style.border.fg = sessionsFocused ? 'cyan' : 'gray';
+    detailBox.style.border.fg = detailFocused ? 'yellow' : 'gray';
+    projectsList.style.selected.bg = projectFocused ? 'green' : 'gray';
+    projectsList.style.selected.fg = 'black';
+    sessionsList.style.selected.bg = sessionsFocused ? 'cyan' : 'gray';
+    sessionsList.style.selected.fg = 'black';
+
+    setPanelLabel(projectsList, `Sources (${sources.length})`, projectFocused, 'green');
+    setPanelLabel(sessionsList, 'Sessions', sessionsFocused, 'cyan');
+    setPanelLabel(detailBox, 'Details', detailFocused, 'yellow');
+
+    const firstLine = message || 'Ready';
+    if (projectFocused) {
+      status.setContent(`${firstLine}\nProjects: ↑/↓ select project  n new project  →/Enter sessions  Tab focus  q quit`);
+    } else if (detailFocused) {
+      status.setContent(`${firstLine}\nDetails: ↑/↓ scroll  n new session  ← sessions  → projects  Tab focus  q quit`);
+    } else {
+      status.setContent(`${firstLine}\nSessions: ↑/↓ select  Enter resume  r rename  n new session  f fork  v view  o note  a archive  d delete  q quit`);
+    }
+  };
+
+  const render = () => {
+    applyLayout();
+    const visible = currentSessions();
+    header.setContent(` Codex Workbench\n ${visible.length}/${sessions.length} visible  ${groupDisplayName(currentGroup())}`);
+    detailBox.setContent(detailContent(selectedSession()));
+    updateFocusStyles();
+    screen.render();
+  };
+
+  const focusPanel = (panel, panelName) => {
+    activePanel = panelName;
+    panel.focus();
+    updateFocusStyles();
+    screen.render();
+  };
+
+  const askInput = (label, initial = '') => new Promise((resolve) => {
+    prompt.setFront();
+    prompt.input(label, initial, (err, value) => resolve(err ? null : value));
+  });
+
+  const askConfirm = (label) => new Promise((resolve) => {
+    question.setFront();
+    question.ask(label, (err, answer) => resolve(!err && Boolean(answer)));
+  });
+
+  const directoryPicker = createDirectoryPicker({
+    askInput,
+    focusOnClose: () => focusPanel(projectsList, 'projects'),
+    screen,
+    truncate,
+  });
+
+  const promptOpen = () => prompt.visible || question.visible || directoryPicker.isOpen();
+
+  const leaveScreen = () => {
+    screen.destroy();
+  };
+
+  const refreshAfterAction = (text, isError = false, focusCwd = null, focusSourceId = null) => {
+    setMessage(text, isError);
+    reload();
+    if (focusCwd) {
+      const nextGroupIndex = groups.findIndex((group) => {
+        return group.kind === 'project' &&
+          group.cwd === focusCwd &&
+          (!focusSourceId || group.source.id === focusSourceId);
+      });
+      if (nextGroupIndex !== -1) groupIndex = nextGroupIndex;
+    }
+    syncProjects();
+    syncList();
+    render();
+  };
+
+  const selectGroup = (index) => {
+    if (!groups.length) return;
+    groupIndex = Math.max(0, Math.min(groups.length - 1, index));
+    selected = 0;
+    syncProjects();
+    syncList();
+    render();
+  };
+
+  const runCodexAndReturn = (command, session, args = [], doneText = `${command} finished.`) => {
+    screen.leave();
+    let status = 0;
+    try {
+      status = runSourceSessionCommand(session, command, args);
+    } finally {
+      screen.enter();
+    }
+    if (status === 0) refreshAfterAction(doneText);
+    else refreshAfterAction(`${command} exited with code ${status}.`, true);
+    return status;
+  };
+
+  const currentProjectCwd = () => {
+    const group = currentGroup();
+    if (group.kind === 'project') return group.cwd;
+    const session = selectedSession();
+    if (session && session.cwd && session.cwd !== '(unknown)') return session.cwd;
+    if (group.kind === 'source' && group.source.remote) return '.';
+    return process.cwd();
+  };
+
+  const currentSource = () => {
+    const group = currentGroup();
+    if (group.kind === 'source' || group.kind === 'project') return group.source;
+    if (activePanel === 'projects') return LOCAL_SOURCE;
+    const session = selectedSession();
+    return session ? sourceById(sources, session.sourceId) : LOCAL_SOURCE;
+  };
+
+  const currentDirectoryStart = () => {
+    const group = currentGroup();
+    if (group.kind === 'project') return group.cwd;
+    return currentSource().remote ? '.' : currentProjectCwd();
+  };
+
+  const directoryOpsForSource = (source) => ({
+    listDirectories: (dir) => listSourceDirectories(source, dir),
+    createDirectory: (parent, name) => createSourceDirectory(source, parent, name),
+  });
+
+  const runNewCodexAndReturn = (cwd, args = []) => {
+    const source = currentSource();
+    const resolvedCwd = source.remote ? cwd : usableCwd(cwd);
+    screen.leave();
+    let status = 0;
+    try {
+      status = runSourceNewSession(source, resolvedCwd, args);
+    } finally {
+      screen.enter();
+    }
+    const label = source.remote ? `${source.label}: ${resolvedCwd}` : resolvedCwd;
+    if (status === 0) refreshAfterAction(`New session finished in ${label}.`, false, resolvedCwd, source.id);
+    else refreshAfterAction(`new session exited with code ${status}.`, true, resolvedCwd, source.id);
+    return status;
+  };
+
+  const runAction = async (action) => {
+    if (promptOpen()) return;
+    const session = selectedSession();
+    if (!session) return;
+    try {
+      await action(session);
+    } catch (err) {
+      setMessage(`error: ${err.message}`, true);
+      render();
+    }
+  };
+
+  reload();
+  if (!sourceErrors.length) setMessage('Ready');
+  applyLayout();
+  syncProjects();
+  syncList();
+
+  projectsList.on('select item', (_item, index) => {
+    if (syncingProjects) return;
+    activePanel = 'projects';
+    selectGroup(index);
+  });
+
+  projectsList.on('focus', () => {
+    activePanel = 'projects';
+    updateFocusStyles();
+  });
+
+  sessionsList.on('focus', () => {
+    activePanel = 'sessions';
+    updateFocusStyles();
+  });
+
+  detailBox.on('focus', () => {
+    activePanel = 'details';
+    updateFocusStyles();
+  });
+
+  projectsList.key(['j', 'down'], () => {
+    if (promptOpen()) return;
+    selectGroup(groupIndex + 1);
+  });
+
+  projectsList.key(['k', 'up'], () => {
+    if (promptOpen()) return;
+    selectGroup(groupIndex - 1);
+  });
+
+  projectsList.key(['right', 'l', 'enter'], () => {
+    if (promptOpen()) return;
+    focusPanel(sessionsList, 'sessions');
+  });
+
+  sessionsList.on('select item', (_item, index) => {
+    if (syncingList) return;
+    activePanel = 'sessions';
+    const visible = currentSessions();
+    if (index >= visible.length) {
+      selected = Math.max(0, visible.length - 1);
+      sessionsList.select(selected);
+      return;
+    }
+    selected = Math.min(index, Math.max(0, visible.length - 1));
+    detailBox.setContent(detailContent(selectedSession()));
+    screen.render();
+  });
+
+  sessionsList.key(['enter'], () => runAction((session) => {
+    runCodexAndReturn('resume', session);
+  }));
+
+  sessionsList.key(['j'], () => {
+    if (promptOpen()) return;
+    sessionsList.down();
+    screen.render();
+  });
+
+  sessionsList.key(['k'], () => {
+    if (promptOpen()) return;
+    sessionsList.up();
+    screen.render();
+  });
+
+  sessionsList.key(['left', 'h'], () => {
+    if (promptOpen()) return;
+    focusPanel(projectsList, 'projects');
+  });
+
+  sessionsList.key(['right', 'l'], () => {
+    if (promptOpen()) return;
+    focusPanel(detailBox, 'details');
+  });
+
+  detailBox.key(['left', 'h'], () => {
+    if (promptOpen()) return;
+    focusPanel(sessionsList, 'sessions');
+  });
+
+  detailBox.key(['right', 'l'], () => {
+    if (promptOpen()) return;
+    focusPanel(projectsList, 'projects');
+  });
+
+  screen.on('resize', () => {
+    applyLayout();
+    if (directoryPicker.isOpen()) directoryPicker.applyLayout();
+    syncProjects();
+    syncList();
+    render();
+  });
+
+  screen.key(['tab'], () => {
+    if (promptOpen()) return;
+    if (activePanel === 'projects') focusPanel(sessionsList, 'sessions');
+    else if (activePanel === 'sessions') focusPanel(detailBox, 'details');
+    else focusPanel(projectsList, 'projects');
+  });
+
+  screen.key(['S-tab'], () => {
+    if (promptOpen()) return;
+    if (activePanel === 'details') focusPanel(sessionsList, 'sessions');
+    else if (activePanel === 'sessions') focusPanel(projectsList, 'projects');
+    else focusPanel(detailBox, 'details');
+  });
+
+  screen.key(['q', 'escape', 'C-c'], () => {
+    if (promptOpen()) return;
+    leaveScreen();
+    process.exit(0);
+  });
+
+  screen.key(['f'], () => runAction((session) => {
+    runCodexAndReturn('fork', session);
+  }));
+
+  screen.key(['v'], () => runAction((session) => {
+    leaveScreen();
+    printShow(session);
+    process.exit(0);
+  }));
+
+  screen.key(['n'], async () => {
+    if (promptOpen()) return;
+    if (activePanel === 'projects') {
+      const source = currentSource();
+      const dir = await directoryPicker.ask(currentDirectoryStart(), directoryOpsForSource(source));
+      if (!dir) {
+        setMessage('New project cancelled.');
+        return render();
+      }
+      runNewCodexAndReturn(dir);
+      return;
+    }
+    runNewCodexAndReturn(currentProjectCwd());
+  });
+
+  screen.key(['r'], () => runAction(async (session) => {
+    const name = await askInput('Name', session.name || '');
+    if (name === null) return render();
+    const status = updateSourceMetadata(session, { name });
+    refreshAfterAction(status === 0 ? 'Renamed.' : `rename exited with code ${status}.`, status !== 0);
+  }));
+
+  screen.key(['o'], () => runAction(async (session) => {
+    const note = await askInput('Note', session.note || '');
+    if (note === null) return render();
+    const status = updateSourceMetadata(session, { note });
+    refreshAfterAction(status === 0 ? 'Note saved.' : `note exited with code ${status}.`, status !== 0);
+  }));
+
+  screen.key(['a'], () => runAction((session) => {
+    runCodexAndReturn('archive', session, [], `Archived ${shortId(session.id)}.`);
+  }));
+
+  screen.key(['d'], () => runAction(async (session) => {
+    const confirmed = await askConfirm(`Delete ${shortId(session.id)}? Enter/y to confirm, n/Esc to cancel`);
+    if (!confirmed) {
+      setMessage('Delete cancelled.');
+      return render();
+    }
+    const status = runCodexAndReturn('delete', session, ['--force'], `Deleted ${shortId(session.id)}.`);
+    if (status !== 0) {
+      if (session.sourceRemote) {
+        const hideSession = await askConfirm(`Remote delete failed for ${shortId(session.id)}. Hide from remote workbench instead?`);
+        if (hideSession) {
+          updateSourceMetadata(session, { hidden: true });
+          refreshAfterAction(`Hidden ${shortId(session.id)}.`);
+        }
+        return;
+      }
+      const removeFile = await askConfirm(`Codex could not delete ${shortId(session.id)}. Delete its session file?`);
+      if (removeFile) {
+        deleteSessionFile(session);
+        refreshAfterAction(`Deleted file for ${shortId(session.id)}.`);
+        return;
+      }
+      const hideSession = await askConfirm(`Hide ${shortId(session.id)} from workbench instead?`);
+      if (hideSession) {
+        updateSourceMetadata(session, { hidden: true });
+        refreshAfterAction(`Hidden ${shortId(session.id)}.`);
+      }
+    }
+  }));
+
+  projectsList.focus();
+  render();
+
+  return new Promise(() => {});
+}
+
+module.exports = {
+  runWorkbench,
+};