tmuxes 0.1.8 → 0.1.9

package/client/src/components/Sidebar.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useRef, useState } from 'react';
+import type { OpenFile, Selection, Target } from '../types';
+import { useSettings } from '../settings';
+import { useI18n } from '../i18n';
+import { TargetGroup } from './TargetGroup';
+import { FileExplorer } from './FileExplorer';
+import { SettingsButton } from './SettingsButton';
+
+interface Props {
+  targets: Target[];
+  selection: Selection | null;
+  nowMs: number;
+  loadError: string | null;
+  openFile: OpenFile | null;
+  select: (sel: Selection | null) => void;
+  onRefreshTargets: () => void;
+  onOpenFile: (file: OpenFile) => void;
+}
+
+const MIN_BOTTOM = 120;
+
+export function Sidebar({
+  targets,
+  selection,
+  nowMs,
+  loadError,
+  openFile,
+  select,
+  onRefreshTargets,
+  onOpenFile,
+}: Props) {
+  const { settings } = useSettings();
+  const { t } = useI18n();
+  const [bottomHeight, setBottomHeight] = useState(260);
+  const dragState = useRef<{ startY: number; startH: number } | null>(null);
+
+  const onDividerDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragState.current = { startY: e.clientY, startH: bottomHeight };
+      const onMove = (ev: MouseEvent) => {
+        if (!dragState.current) return;
+        const delta = dragState.current.startY - ev.clientY;
+        const max = window.innerHeight - 220;
+        setBottomHeight(Math.max(MIN_BOTTOM, Math.min(max, dragState.current.startH + delta)));
+      };
+      const onUp = () => {
+        dragState.current = null;
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    },
+    [bottomHeight],
+  );
+
+  const selectedTarget = selection ? targets.find((t) => t.id === selection.targetId) : undefined;
+  const fileBrowsingEnabled = !selectedTarget || selectedTarget.kind !== 'winlocal';
+
+  return (
+    <div className="sidebar" style={{ fontSize: settings.sidebarFontSize }}>
+      <div className="sidebar-header">
+        <h1>tmuxes</h1>
+        <button onClick={onRefreshTargets} title={t.reloadTargets}>
+          ⟳
+        </button>
+      </div>
+
+      <div className="sidebar-top">
+        {loadError && <div className="error-line">{loadError}</div>}
+        {targets.map((t) => (
+          <TargetGroup key={t.id} target={t} selection={selection} nowMs={nowMs} select={select} />
+        ))}
+        {!loadError && targets.length === 0 && <div className="empty">{t.noTargets}</div>}
+      </div>
+
+      <div className="sidebar-vdivider" onMouseDown={onDividerDown} title={t.dragResize} />
+
+      <div className="sidebar-bottom" style={{ height: bottomHeight }}>
+        <div className="section-label">{t.workingDirectory}</div>
+        <FileExplorer
+          selection={selection}
+          openFile={openFile}
+          enabled={fileBrowsingEnabled}
+          pauseOnError={selectedTarget?.kind === 'ssh'}
+          onOpenFile={onOpenFile}
+        />
+      </div>
+
+      <div className="sidebar-footer">
+        <SettingsButton />
+      </div>
+    </div>
+  );
+}

package/client/src/components/StatusBanner.tsx

@@ -0,0 +1,31 @@
+import type { ConnStatus } from '../types';
+import { useI18n } from '../i18n';
+
+interface Props {
+  status: ConnStatus;
+  onReconnect: () => void;
+}
+
+/** Overlay shown while connecting or when the link is degraded. Renders
+ *  nothing once connected so the terminal is unobstructed. */
+export function StatusBanner({ status, onReconnect }: Props) {
+  const { t } = useI18n();
+  if (status.kind === 'connected') return null;
+
+  if (status.kind === 'connecting') {
+    return (
+      <div className="status-banner">
+        <span className="spinner" />
+        <span className="msg">{t.connecting}</span>
+      </div>
+    );
+  }
+
+  const isError = status.kind === 'error' || status.kind === 'ssh';
+  return (
+    <div className={`status-banner ${isError ? 'error' : ''}`}>
+      <span className="msg">{status.message}</span>
+      <button onClick={onReconnect}>{t.reconnect}</button>
+    </div>
+  );
+}

package/client/src/components/TargetGroup.tsx

@@ -0,0 +1,275 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { AttentionReason, SessionInfo, Selection, Target } from '../types';
+import { api, ApiError } from '../api';
+import { isValidSessionName } from '../util';
+import { useFolders } from '../folders';
+import { useAttention } from '../attention';
+import { useI18n } from '../i18n';
+import { SessionTree } from './SessionTree';
+
+interface Props {
+  target: Target;
+  selection: Selection | null;
+  nowMs: number;
+  select: (sel: Selection | null) => void;
+}
+
+const POLL_MS = 5000;
+
+function isAttentionReason(v: string | undefined): v is AttentionReason {
+  return v === 'done' || v === 'decision' || v === 'error';
+}
+
+export function TargetGroup({ target, selection, nowMs, select }: Props) {
+  // Expand the "local-ish" targets by default (local tmux, WSL, native shells).
+  const [expanded, setExpanded] = useState(
+    target.kind === 'local' || target.kind === 'wsl' || target.kind === 'winlocal',
+  );
+  const [sessions, setSessions] = useState<SessionInfo[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [showForm, setShowForm] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newCommand, setNewCommand] = useState('');
+  const [newShell, setNewShell] = useState(target.shells?.[0]?.id ?? '');
+  const [formError, setFormError] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const folders = useFolders(target.id, expanded, target.kind === 'ssh');
+  const attention = useAttention();
+  const { t } = useI18n();
+
+  // Avoid overlapping fetches when a poll and a manual refresh race.
+  const inFlight = useRef(false);
+  // Avoid repeated SSH login failures that can look like brute-force attempts.
+  // Collapse/re-expand the target to retry after fixing keys, VPN, or host access.
+  const pollingPaused = useRef(false);
+  // Last-seen agent hook event key per session; first sight is a baseline.
+  const lastAgentEvent = useRef<Map<string, string>>(new Map());
+  // PermissionRequest can be auto-reviewed by the agent and disappear quickly.
+  // Only notify if the same waiting/decision event survives one more refresh.
+  const decisionCandidates = useRef<Map<string, { key: string; notified: boolean }>>(new Map());
+
+  const eventKey = (s: SessionInfo): string => {
+    if (!s.agentKind || !s.agentState || !s.agentNonce) return '';
+    return [
+      s.agentKind,
+      s.agentState,
+      s.attentionReason ?? '',
+      s.agentEvent ?? '',
+      s.agentNonce,
+    ].join(':');
+  };
+
+  const detectAttention = useCallback(
+    (sessions: SessionInfo[]) => {
+      const present = new Set<string>();
+      for (const s of sessions) {
+        present.add(s.name);
+        const key = eventKey(s);
+        const seen = lastAgentEvent.current.has(s.name);
+        const prev = lastAgentEvent.current.get(s.name);
+        lastAgentEvent.current.set(s.name, key);
+
+        if (s.agentState === 'running') {
+          decisionCandidates.current.delete(s.name);
+          attention.clearAlert(target.id, s.name);
+        } else if (s.agentState === 'waiting' && s.attentionReason === 'decision' && key) {
+          const candidate = decisionCandidates.current.get(s.name);
+          if (candidate?.key === key) {
+            if (seen && !candidate.notified) {
+              attention.fire(target.id, s.name, 'decision');
+              decisionCandidates.current.set(s.name, { key, notified: true });
+            }
+          } else {
+            decisionCandidates.current.set(s.name, { key, notified: false });
+          }
+        } else if (
+          seen &&
+          key &&
+          key !== prev &&
+          isAttentionReason(s.attentionReason)
+        ) {
+          decisionCandidates.current.delete(s.name);
+          attention.fire(target.id, s.name, s.attentionReason);
+        } else {
+          decisionCandidates.current.delete(s.name);
+        }
+      }
+      // Forget sessions that vanished.
+      for (const name of [...lastAgentEvent.current.keys()]) {
+        if (!present.has(name)) {
+          lastAgentEvent.current.delete(name);
+          decisionCandidates.current.delete(name);
+          attention.clearAlert(target.id, name);
+        }
+      }
+    },
+    [attention, target.id],
+  );
+
+  const refresh = useCallback(async () => {
+    if (pollingPaused.current) return;
+    if (inFlight.current) return;
+    inFlight.current = true;
+    setLoading(true);
+    try {
+      const { sessions } = await api.getSessions(target.id);
+      setSessions(sessions);
+      detectAttention(sessions);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : t.failedListSessions);
+      if (target.kind === 'ssh') pollingPaused.current = true;
+    } finally {
+      setLoading(false);
+      inFlight.current = false;
+    }
+  }, [target.id, target.kind, detectAttention, t.failedListSessions]);
+
+  const manualReconnect = useCallback(() => {
+    pollingPaused.current = false;
+    setError(null);
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    if (!expanded) return;
+    pollingPaused.current = false;
+    void refresh();
+    const id = window.setInterval(() => void refresh(), POLL_MS);
+    return () => window.clearInterval(id);
+  }, [expanded, refresh]);
+
+  const submitCreate = async () => {
+    const name = newName.trim();
+    if (name && !isValidSessionName(name)) {
+      setFormError(t.invalidSessionName);
+      return;
+    }
+    setCreating(true);
+    setFormError(null);
+    try {
+      const { name: created } = await api.createSession(target.id, {
+        name: name || undefined,
+        command: newCommand.trim() || undefined,
+        shell: target.kind === 'winlocal' ? newShell || undefined : undefined,
+      });
+      setNewName('');
+      setNewCommand('');
+      setShowForm(false);
+      await refresh();
+      select({ targetId: target.id, session: created });
+    } catch (e) {
+      setFormError(e instanceof ApiError ? e.message : t.failedCreateSession);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleRename = async (oldName: string, next: string) => {
+    try {
+      await api.renameSession(target.id, oldName, next);
+      await refresh();
+      if (selection?.targetId === target.id && selection.session === oldName) {
+        select({ targetId: target.id, session: next });
+      }
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : t.renameFailed);
+    }
+  };
+
+  const handleKill = async (name: string) => {
+    try {
+      await api.killSession(target.id, name);
+      if (selection?.targetId === target.id && selection.session === name) select(null);
+      await refresh();
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : t.killFailed);
+    }
+  };
+
+  return (
+    <div className="target-group">
+      <div className="target-head" onClick={() => setExpanded((v) => !v)}>
+        <span className="caret">{expanded ? '▾' : '▸'}</span>
+        <span className="label">{target.label}</span>
+        <span className="kind">{target.kind}</span>
+        {expanded && loading && <span className="badge loading">…</span>}
+        {expanded && error && (
+          <span className="badge err" title={error}>
+            !
+          </span>
+        )}
+      </div>
+
+      {expanded && (
+        <div className="session-list">
+          {error && (
+            <div className="error-line">
+              <span>{error}</span>
+              {target.kind === 'ssh' && (
+                <button onClick={manualReconnect} disabled={loading}>
+                  {t.reconnect}
+                </button>
+              )}
+            </div>
+          )}
+
+          <SessionTree
+            targetId={target.id}
+            sessions={sessions ?? []}
+            folders={folders}
+            selection={selection}
+            nowMs={nowMs}
+            select={select}
+            onRename={(oldName, next) => void handleRename(oldName, next)}
+            onKill={(name) => void handleKill(name)}
+          />
+
+          <div className="list-toolbar">
+            <button onClick={() => folders.addFolder(null, t.folderDefaultName)} title={t.newFolderTitle}>
+              {t.newFolder}
+            </button>
+            <button onClick={() => setShowForm((v) => !v)}>{t.newSession}</button>
+          </div>
+
+          {showForm && (
+            <div className="create-form" onClick={(e) => e.stopPropagation()}>
+              {target.kind === 'winlocal' && target.shells && target.shells.length > 0 && (
+                <select value={newShell} onChange={(e) => setNewShell(e.target.value)}>
+                  {target.shells.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </select>
+              )}
+              <input
+                autoFocus
+                placeholder={t.nameOptional}
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && void submitCreate()}
+              />
+              <input
+                placeholder={t.commandOptional}
+                value={newCommand}
+                onChange={(e) => setNewCommand(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && void submitCreate()}
+              />
+              {formError && <div className="field-error">{formError}</div>}
+              <div className="row">
+                <button className="primary" disabled={creating} onClick={() => void submitCreate()}>
+                  {t.create}
+                </button>
+                <button onClick={() => setShowForm(false)}>{t.cancel}</button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/TerminalPanel.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useRef, useState } from 'react';
+import { createTerminal, type TerminalHandle } from '../hooks/useTerminal';
+import { createTmuxSocket, type TmuxSocket } from '../hooks/useTmuxSocket';
+import { api, ApiError, terminalSocketUrl } from '../api';
+import type { ConnStatus, LaunchAgent, Target } from '../types';
+import { useI18n } from '../i18n';
+import { StatusBanner } from './StatusBanner';
+
+interface Props {
+  targetId: string;
+  targetKind: Target['kind'];
+  targetLabel: string;
+  session: string;
+  fontSize: number;
+}
+
+const RESIZE_DEBOUNCE_MS = 80;
+
+/** Mounted with key={targetId/session}, so a selection change is a full
+ *  remount — no stale terminal/socket state. */
+export function TerminalPanel({ targetId, targetKind, targetLabel, session, fontSize }: Props) {
+  const { t } = useI18n();
+  const tRef = useRef(t);
+  const hostRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<TerminalHandle | null>(null);
+  const socketRef = useRef<TmuxSocket | null>(null);
+  const [status, setStatus] = useState<ConnStatus>({ kind: 'connecting' });
+  const [generation, setGeneration] = useState(0);
+  const [startingAgent, setStartingAgent] = useState<LaunchAgent | null>(null);
+  const [agentError, setAgentError] = useState<string | null>(null);
+  const terminalRetryUsed = useRef(false);
+
+  useEffect(() => {
+    terminalRetryUsed.current = false;
+  }, [targetId, session]);
+
+  useEffect(() => {
+    tRef.current = t;
+  }, [t]);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    setStatus({ kind: 'connecting' });
+
+    const handle = createTerminal(host, fontSize);
+    handleRef.current = handle;
+    const initial = handle.refit() ?? { cols: 80, rows: 24 };
+    let lastCols = initial.cols;
+    let lastRows = initial.rows;
+    let exited = false;
+
+    const retryOnce = (): boolean => {
+      if (targetKind !== 'ssh' || terminalRetryUsed.current) return false;
+      terminalRetryUsed.current = true;
+      setStatus({ kind: 'connecting' });
+      setGeneration((g) => g + 1);
+      return true;
+    };
+
+    const socket = createTmuxSocket(
+      terminalSocketUrl(targetId, session, initial.cols, initial.rows),
+      {
+        onOpen: () => {
+          /* wait for bytes before declaring connected */
+        },
+        onOutput: (bytes) => {
+          handle.term.write(bytes);
+          setStatus((s) => (s.kind === 'connecting' || s.kind === 'ssh' ? { kind: 'connected' } : s));
+        },
+        onControl: (msg) => {
+          if (msg.type === 'ready') {
+            // Re-assert geometry now that the PTY exists (matters for ssh).
+            socket.resize(handle.term.cols, handle.term.rows);
+          } else if (msg.type === 'ssh') {
+            setStatus((s) => (s.kind === 'connecting' ? { kind: 'ssh', message: msg.message } : s));
+          } else if (msg.type === 'error') {
+            setStatus({ kind: 'error', message: msg.message });
+          } else if (msg.type === 'exit') {
+            exited = true;
+            if (msg.code !== 0 && retryOnce()) return;
+            setStatus({
+              kind: 'disconnected',
+              message:
+                msg.code === 0 || msg.code === null
+                  ? tRef.current.sessionEnded
+                  : tRef.current.sessionEndedExit(msg.code),
+            });
+          }
+        },
+        onClose: () => {
+          if (!exited) {
+            if (retryOnce()) return;
+            setStatus({
+              kind: targetKind === 'ssh' ? 'ssh' : 'disconnected',
+              message:
+                targetKind === 'ssh'
+                  ? tRef.current.sshInterrupted
+                  : tRef.current.disconnected,
+            });
+          }
+        },
+      },
+    );
+
+    socketRef.current = socket;
+    const dataSub = handle.term.onData((d) => socket.sendInput(d));
+    handle.term.focus();
+
+    // Debounced fit on container resize → push new geometry to the PTY.
+    let resizeTimer: number | undefined;
+    const observer = new ResizeObserver(() => {
+      window.clearTimeout(resizeTimer);
+      resizeTimer = window.setTimeout(() => {
+        const geo = handle.refit();
+        if (geo && (geo.cols !== lastCols || geo.rows !== lastRows)) {
+          lastCols = geo.cols;
+          lastRows = geo.rows;
+          socket.resize(geo.cols, geo.rows);
+        }
+      }, RESIZE_DEBOUNCE_MS);
+    });
+    observer.observe(host);
+
+    return () => {
+      window.clearTimeout(resizeTimer);
+      observer.disconnect();
+      dataSub.dispose();
+      socket.close();
+      handle.dispose();
+      handleRef.current = null;
+      socketRef.current = null;
+    };
+  }, [targetId, targetKind, session, generation]);
+
+  // Live-apply terminal font size without remounting (preserves scrollback).
+  useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) return;
+    if (handle.term.options.fontSize === fontSize) return;
+    handle.term.options.fontSize = fontSize;
+    const geo = handle.refit();
+    if (geo) socketRef.current?.resize(geo.cols, geo.rows);
+  }, [fontSize]);
+
+  const launchAgent = async (agent: LaunchAgent) => {
+    setStartingAgent(agent);
+    setAgentError(null);
+    try {
+      await api.launchAgent(targetId, session, agent);
+      handleRef.current?.term.focus();
+    } catch (e) {
+      setAgentError(e instanceof ApiError ? e.message : t.failedLaunchAgent);
+    } finally {
+      setStartingAgent(null);
+    }
+  };
+
+  return (
+    <div className="panel">
+      {targetKind !== 'winlocal' && (
+        <div className="agent-toolbar">
+          <button
+            disabled={startingAgent !== null}
+            onClick={() => void launchAgent('claude')}
+            title={t.runClaude}
+          >
+            claude
+          </button>
+          <button
+            disabled={startingAgent !== null}
+            onClick={() => void launchAgent('codex')}
+            title={t.runCodex}
+          >
+            codex
+          </button>
+          {agentError && <span className="agent-error" title={agentError}>!</span>}
+        </div>
+      )}
+      <div className="term-host" ref={hostRef} />
+      <StatusBanner status={status} onReconnect={() => setGeneration((g) => g + 1)} />
+      {status.kind !== 'connected' && status.kind !== 'connecting' && (
+        <div className="panel-placeholder" style={{ pointerEvents: 'none' }}>
+          <div style={{ opacity: 0.4 }}>
+            {targetLabel} · {session}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}