tmuxes 0.1.8 → 0.1.9

package/client/src/components/FileViewer.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useRef, useState } from 'react';
+import type { FilePreview, OpenFile } from '../types';
+import { api, ApiError } from '../api';
+import { useSettings } from '../settings';
+import { useI18n } from '../i18n';
+
+interface Props {
+  file: OpenFile;
+  onClose: () => void;
+}
+
+/** New undo checkpoint after this idle gap, so a burst of typing collapses
+ *  into a single undo step. */
+const COALESCE_MS = 500;
+
+/** Read-only preview + editor for a text file. Editable only when the file is
+ *  text and was not truncated (saving a truncated preview would lose data). */
+export function FileViewer({ file, onClose }: Props) {
+  const { settings } = useSettings();
+  const { t } = useI18n();
+  const taRef = useRef<HTMLTextAreaElement>(null);
+  const lastEditRef = useRef(0);
+
+  const [preview, setPreview] = useState<FilePreview | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const [text, setText] = useState('');
+  const [baseline, setBaseline] = useState('');
+  const [past, setPast] = useState<string[]>([]);
+  const [future, setFuture] = useState<string[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const editable = !!preview && !preview.binary && !preview.truncated;
+  const dirty = editable && text !== baseline;
+
+  // Load (or reload) the file.
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setLoadError(null);
+    setSaveError(null);
+    setPreview(null);
+    setPast([]);
+    setFuture([]);
+    lastEditRef.current = 0;
+    api
+      .getFile(file.targetId, file.session, file.path)
+      .then((p) => {
+        if (cancelled) return;
+        setPreview(p);
+        setText(p.content);
+        setBaseline(p.content);
+      })
+      .catch((e) => {
+        if (!cancelled) setLoadError(e instanceof ApiError ? e.message : t.failedReadFile);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [file.targetId, file.session, file.path, t.failedReadFile]);
+
+  const onType = (next: string) => {
+    const now = Date.now();
+    if (now - lastEditRef.current > COALESCE_MS) {
+      setPast((p) => [...p, text]); // checkpoint = value at start of this burst
+      setFuture([]);
+    }
+    lastEditRef.current = now;
+    setText(next);
+  };
+
+  // Flat functional updates (no nested setState) so the handlers are
+  // StrictMode-safe; past/future/text come from the current render.
+  const undo = () => {
+    if (past.length === 0) return;
+    const prev = past[past.length - 1];
+    setFuture((f) => [...f, text]);
+    setPast((p) => p.slice(0, -1));
+    setText(prev);
+    lastEditRef.current = 0;
+  };
+
+  const redo = () => {
+    if (future.length === 0) return;
+    const next = future[future.length - 1];
+    setPast((p) => [...p, text]);
+    setFuture((f) => f.slice(0, -1));
+    setText(next);
+    lastEditRef.current = 0;
+  };
+
+  const save = async () => {
+    if (!editable || !dirty || saving) return;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await api.saveFile(file.targetId, file.session, file.path, text);
+      setBaseline(text);
+    } catch (e) {
+      setSaveError(e instanceof ApiError ? e.message : t.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const mod = e.metaKey || e.ctrlKey;
+    const k = e.key.toLowerCase();
+    if (mod && k === 's') {
+      e.preventDefault();
+      void save();
+    } else if (mod && k === 'z' && !e.shiftKey) {
+      e.preventDefault();
+      undo();
+    } else if (mod && (k === 'y' || (k === 'z' && e.shiftKey))) {
+      e.preventDefault();
+      redo();
+    } else if (e.key === 'Tab') {
+      e.preventDefault();
+      const ta = taRef.current;
+      if (!ta) return;
+      const start = ta.selectionStart;
+      const end = ta.selectionEnd;
+      onType(text.slice(0, start) + '  ' + text.slice(end));
+      requestAnimationFrame(() => {
+        ta.selectionStart = ta.selectionEnd = start + 2;
+      });
+    }
+  };
+
+  const requestClose = () => {
+    if (dirty && !confirm(t.discardUnsaved)) return;
+    onClose();
+  };
+
+  return (
+    <div className="viewer">
+      <div className="viewer-head">
+        <span className="viewer-name" title={file.path}>
+          {dirty && <span className="dirty-dot" title={t.unsavedChanges}>●</span>}
+          {file.name}
+        </span>
+        <span className="viewer-path">{file.path}</span>
+        <div className="viewer-head-spacer" />
+        {editable && (
+          <>
+            <button onClick={undo} disabled={past.length === 0} title={t.undo}>
+              ↶
+            </button>
+            <button onClick={redo} disabled={future.length === 0} title={t.redo}>
+              ↷
+            </button>
+            <button className="primary" onClick={() => void save()} disabled={!dirty || saving} title={t.saveShortcut}>
+              {saving ? t.saving : t.save}
+            </button>
+          </>
+        )}
+        {preview?.truncated && <span className="viewer-note">{t.truncatedReadOnly}</span>}
+        <button onClick={requestClose} title={t.closeFile}>
+          ✕
+        </button>
+      </div>
+
+      {saveError && <div className="viewer-msg error">{saveError}</div>}
+
+      <div className="viewer-body">
+        {loading && <div className="viewer-msg">{t.loading}</div>}
+        {loadError && <div className="viewer-msg error">{loadError}</div>}
+        {preview && preview.binary && <div className="viewer-msg">{t.binaryNotShown}</div>}
+        {preview && !preview.binary && editable && (
+          <textarea
+            ref={taRef}
+            className="viewer-editor"
+            style={{ fontSize: settings.viewerFontSize }}
+            value={text}
+            spellCheck={false}
+            onChange={(e) => onType(e.target.value)}
+            onKeyDown={onKeyDown}
+          />
+        )}
+        {preview && !preview.binary && !editable && (
+          <pre className="viewer-pre" style={{ fontSize: settings.viewerFontSize }}>
+            {preview.content}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/components/SessionRow.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import type { SessionInfo } from '../types';
+import { ago, isValidSessionName } from '../util';
+import { useAttention } from '../attention';
+import { isSessionActive } from '../activity';
+import { agentStatusLabel, attentionText, attentionTitle, useI18n } from '../i18n';
+
+interface Props {
+  targetId: string;
+  session: SessionInfo;
+  selected: boolean;
+  nowMs: number;
+  depth?: number;
+  onSelect: () => void;
+  onRename: (newName: string) => void;
+  onKill: () => void;
+  onDragStart?: (e: React.DragEvent) => void;
+}
+
+export function SessionRow({
+  targetId,
+  session,
+  selected,
+  nowMs,
+  depth = 0,
+  onSelect,
+  onRename,
+  onKill,
+  onDragStart,
+}: Props) {
+  const attention = useAttention();
+  const { language, t } = useI18n();
+  const reason = attention.reasonFor(targetId, session.name);
+  const active = isSessionActive(session);
+  const [renaming, setRenaming] = useState(false);
+  const [draft, setDraft] = useState(session.name);
+
+  const commitRename = () => {
+    const next = draft.trim();
+    if (next && next !== session.name && isValidSessionName(next)) {
+      onRename(next);
+    }
+    setRenaming(false);
+  };
+
+  const status = agentStatusLabel(session, t);
+
+  if (renaming) {
+    return (
+      <div className="session-row" style={{ paddingLeft: 8 + depth * 14 }}>
+        <input
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commitRename();
+            else if (e.key === 'Escape') setRenaming(false);
+          }}
+          onBlur={() => setRenaming(false)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`session-row ${selected ? 'selected' : ''} ${reason ? 'attention' : ''}`}
+      style={{ paddingLeft: 8 + depth * 14 }}
+      draggable={!!onDragStart}
+      onDragStart={onDragStart}
+      onClick={onSelect}
+      title={`${session.name} - ${status} - ${session.windows} ${t.windowsShort}`}
+    >
+      <span className={`dot ${active ? 'active' : 'inactive'}`} title={status} />
+      <span className="name">{session.name}</span>
+      {reason && (
+        <span className={`attn-badge ${reason}`} title={attentionTitle(reason, t)}>
+          {attentionText(reason, t)}
+        </span>
+      )}
+      <span className="meta">
+        {session.windows} {t.windowsShort}{session.created ? ` · ${ago(session.created, nowMs, language)}` : ''}
+      </span>
+      <span className="row-actions">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setDraft(session.name);
+            setRenaming(true);
+          }}
+          title={t.rename}
+        >
+          ✎
+        </button>
+        <button
+          className="danger"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (confirm(t.killConfirm(session.name))) onKill();
+          }}
+          title={t.kill}
+        >
+          ✕
+        </button>
+      </span>
+    </div>
+  );
+}

package/client/src/components/SessionTree.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useState, type DragEvent, type ReactNode } from 'react';
+import type { SessionInfo, Selection } from '../types';
+import type { FoldersApi } from '../folders';
+import { useI18n } from '../i18n';
+import { SessionRow } from './SessionRow';
+
+const DND_TYPE = 'application/x-tmuxes';
+type DragPayload = { kind: 'session'; name: string } | { kind: 'folder'; id: string };
+
+interface Props {
+  targetId: string;
+  sessions: SessionInfo[];
+  folders: FoldersApi;
+  selection: Selection | null;
+  nowMs: number;
+  select: (sel: Selection | null) => void;
+  onRename: (oldName: string, newName: string) => void;
+  onKill: (name: string) => void;
+}
+
+export function SessionTree({ targetId, sessions, folders, selection, nowMs, select, onRename, onKill }: Props) {
+  const { t } = useI18n();
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState('');
+  const [dragOver, setDragOver] = useState<string | null>(null);
+
+  // Drop folder ids that no longer exist from the collapsed set.
+  useEffect(() => {
+    setCollapsed((prev) => {
+      const valid = new Set(folders.folders.map((f) => f.id));
+      const next = new Set([...prev].filter((id) => valid.has(id)));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [folders.folders]);
+
+  const toggleCollapse = (id: string) =>
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  const startDrag = (payload: DragPayload) => (e: DragEvent) => {
+    e.dataTransfer.setData(DND_TYPE, JSON.stringify(payload));
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const allowDrop = (e: DragEvent) => {
+    if (e.dataTransfer.types.includes(DND_TYPE)) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+    }
+  };
+
+  const dropInto = (folderId: string | null) => (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(null);
+    const raw = e.dataTransfer.getData(DND_TYPE);
+    if (!raw) return;
+    let payload: DragPayload;
+    try {
+      payload = JSON.parse(raw) as DragPayload;
+    } catch {
+      return;
+    }
+    if (payload.kind === 'session') folders.moveSession(payload.name, folderId);
+    else folders.moveFolder(payload.id, folderId);
+  };
+
+  const commitFolderRename = () => {
+    if (renamingId && renameDraft.trim()) folders.renameFolder(renamingId, renameDraft.trim());
+    setRenamingId(null);
+  };
+
+  function renderLevel(parentId: string | null, depth: number): ReactNode {
+    const subFolders = folders.folders.filter((f) => f.parentId === parentId);
+    const subSessions = sessions.filter((s) => folders.folderOf(s.name) === parentId);
+    return (
+      <>
+        {subFolders.map((f) => {
+          const isCollapsed = collapsed.has(f.id);
+          return (
+            <div
+              key={f.id}
+              className={`folder ${dragOver === f.id ? 'drop' : ''}`}
+              onDragOver={(e) => {
+                allowDrop(e);
+                e.stopPropagation();
+                setDragOver(f.id);
+              }}
+              onDragLeave={() => setDragOver((p) => (p === f.id ? null : p))}
+              onDrop={dropInto(f.id)}
+            >
+              {renamingId === f.id ? (
+                <div className="folder-head" style={{ paddingLeft: 8 + depth * 14 }}>
+                  <input
+                    autoFocus
+                    value={renameDraft}
+                    onChange={(e) => setRenameDraft(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') commitFolderRename();
+                      else if (e.key === 'Escape') setRenamingId(null);
+                    }}
+                    onBlur={commitFolderRename}
+                  />
+                </div>
+              ) : (
+                <div
+                  className="folder-head"
+                  style={{ paddingLeft: 8 + depth * 14 }}
+                  draggable
+                  onDragStart={startDrag({ kind: 'folder', id: f.id })}
+                  onClick={() => toggleCollapse(f.id)}
+                >
+                  <span className="caret">{isCollapsed ? '▸' : '▾'}</span>
+                  <span className="folder-name" title={f.name}>
+                    {isCollapsed ? '📁' : '📂'} {f.name}
+                  </span>
+                  <span className="folder-actions">
+                    <button
+                      title={t.newSubfolder}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        folders.addFolder(f.id, t.folderDefaultName);
+                        setCollapsed((p) => {
+                          const n = new Set(p);
+                          n.delete(f.id);
+                          return n;
+                        });
+                      }}
+                    >
+                      ＋
+                    </button>
+                    <button
+                      title={t.renameFolder}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setRenameDraft(f.name);
+                        setRenamingId(f.id);
+                      }}
+                    >
+                      ✎
+                    </button>
+                    <button
+                      className="danger"
+                      title={t.deleteFolder}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        folders.deleteFolder(f.id);
+                      }}
+                    >
+                      ✕
+                    </button>
+                  </span>
+                </div>
+              )}
+              {!isCollapsed && <div className="folder-children">{renderLevel(f.id, depth + 1)}</div>}
+            </div>
+          );
+        })}
+        {subSessions.map((s) => (
+          <SessionRow
+            key={s.name}
+            targetId={targetId}
+            session={s}
+            nowMs={nowMs}
+            depth={depth}
+            selected={selection?.targetId === targetId && selection.session === s.name}
+            onSelect={() => select({ targetId, session: s.name })}
+            onRename={(next) => onRename(s.name, next)}
+            onKill={() => onKill(s.name)}
+            onDragStart={startDrag({ kind: 'session', name: s.name })}
+          />
+        ))}
+      </>
+    );
+  }
+
+  const empty = folders.folders.length === 0 && sessions.length === 0;
+
+  return (
+    <div
+      className={`tree ${dragOver === '__root__' ? 'drop-root' : ''}`}
+      onDragOver={(e) => {
+        allowDrop(e);
+        setDragOver('__root__');
+      }}
+      onDragLeave={() => setDragOver((p) => (p === '__root__' ? null : p))}
+      onDrop={dropInto(null)}
+    >
+      {empty && <div className="empty">{t.noSessions}</div>}
+      {renderLevel(null, 0)}
+    </div>
+  );
+}

package/client/src/components/SettingsButton.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { FONT_LIMITS, useSettings, type Language, type Settings } from '../settings';
+import { useI18n } from '../i18n';
+
+function Stepper({
+  label,
+  value,
+  smaller,
+  larger,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  smaller: string;
+  larger: string;
+  onChange: (n: number) => void;
+}) {
+  return (
+    <div className="stepper">
+      <span className="stepper-label">{label}</span>
+      <div className="stepper-controls">
+        <button onClick={() => onChange(value - 1)} disabled={value <= FONT_LIMITS.min} aria-label={smaller}>
+          −
+        </button>
+        <span className="stepper-value">{value}px</span>
+        <button onClick={() => onChange(value + 1)} disabled={value >= FONT_LIMITS.max} aria-label={larger}>
+          +
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label className="toggle">
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+      <span className="toggle-label">{label}</span>
+    </label>
+  );
+}
+
+export function SettingsButton() {
+  const { settings, setSetting, reset } = useSettings();
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+
+  const step =
+    (key: keyof Pick<Settings, 'sidebarFontSize' | 'terminalFontSize' | 'viewerFontSize'>) =>
+    (n: number) =>
+      setSetting(key, n);
+
+  return (
+    <div className="settings">
+      <button className="settings-gear" onClick={() => setOpen((v) => !v)} title={t.settings}>
+        ⚙ {t.settings}
+      </button>
+      {open && (
+        <>
+          <div className="settings-backdrop" onClick={() => setOpen(false)} />
+          <div className="settings-panel" role="dialog">
+            <div className="settings-title">{t.language}</div>
+            <select
+              value={settings.language}
+              onChange={(e) => setSetting('language', e.target.value as Language)}
+            >
+              <option value="zh">{t.chinese}</option>
+              <option value="en">{t.english}</option>
+            </select>
+            <div className="settings-title">{t.fontSizes}</div>
+            <Stepper
+              label={t.sidebar}
+              value={settings.sidebarFontSize}
+              smaller={t.smaller}
+              larger={t.larger}
+              onChange={step('sidebarFontSize')}
+            />
+            <Stepper
+              label={t.terminal}
+              value={settings.terminalFontSize}
+              smaller={t.smaller}
+              larger={t.larger}
+              onChange={step('terminalFontSize')}
+            />
+            <Stepper
+              label={t.fileViewer}
+              value={settings.viewerFontSize}
+              smaller={t.smaller}
+              larger={t.larger}
+              onChange={step('viewerFontSize')}
+            />
+            <div className="settings-title">{t.notifications}</div>
+            <Toggle
+              label={t.alertWhenAgent}
+              checked={settings.notifyAttention}
+              onChange={(v) => setSetting('notifyAttention', v)}
+            />
+            <Toggle
+              label={t.playSound}
+              checked={settings.notifySound}
+              onChange={(v) => setSetting('notifySound', v)}
+            />
+            <div className="settings-actions">
+              <button onClick={reset}>{t.reset}</button>
+              <button className="primary" onClick={() => setOpen(false)}>
+                {t.done}
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}