master

Author: shmuel hizmi

packages/wmux-client-terminal/src/components/FocusContext.tsx

@@ -9,27 +9,35 @@ interface PrefixContextValue {
   /** True when Ctrl+B was pressed and control mode is active */
   readonly prefixRef: MutableRefObject<boolean>;
   readonly searchOpenRef: MutableRefObject<boolean>;
+  readonly copyModeRef: MutableRefObject<boolean>;
   readonly activeTabId: string;
+  readonly copyMode: boolean;
 }
 
 const PrefixContext = createContext<PrefixContextValue>({
   prefixRef: { current: false },
   searchOpenRef: { current: false },
+  copyModeRef: { current: false },
   activeTabId: "",
+  copyMode: false,
 });
 
 export const PrefixProvider = ({
   prefixRef,
   searchOpenRef,
+  copyModeRef,
   activeTabId,
+  copyMode,
   children,
 }: {
   readonly prefixRef: MutableRefObject<boolean>;
   readonly searchOpenRef: MutableRefObject<boolean>;
+  readonly copyModeRef: MutableRefObject<boolean>;
   readonly activeTabId: string;
+  readonly copyMode: boolean;
   readonly children: ReactNode;
 }): ReactNode => (
-  <PrefixContext.Provider value={{ prefixRef, searchOpenRef, activeTabId }}>
+  <PrefixContext.Provider value={{ prefixRef, searchOpenRef, copyModeRef, activeTabId, copyMode }}>
     {children}
   </PrefixContext.Provider>
 );

packages/wmux-client-terminal/src/components/StatusBar.tsx

@@ -7,11 +7,24 @@ const WARN = "#ffd60a";
 
 interface StatusBarProps {
   readonly prefixActive: boolean;
+  readonly copyMode: boolean;
 }
 
-export const StatusBar = ({ prefixActive }: StatusBarProps): ReactNode => (
+export const StatusBar = ({ prefixActive, copyMode }: StatusBarProps): ReactNode => (
   <box height={1} flexDirection="row" paddingX={1} gap={2}>
-    {prefixActive ? (
+    {copyMode ? (
+      <>
+        <text fg={WARN}>
+          <strong>COPY</strong>
+        </text>
+        <text fg={MUTED}>
+          select text with mouse
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>esc</span> exit
+        </text>
+      </>
+    ) : prefixActive ? (
       <>
         <text fg={WARN}>
           <strong>wmux</strong>
@@ -34,6 +47,9 @@ export const StatusBar = ({ prefixActive }: StatusBarProps): ReactNode => (
         <text fg={MUTED}>
           <span fg={ACCENT}>w</span> web
         </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>c</span> copy
+        </text>
         <text fg={MUTED}>
           <span fg={ACCENT}>{"\u23ce"}</span> exit
         </text>
@@ -42,9 +58,14 @@ export const StatusBar = ({ prefixActive }: StatusBarProps): ReactNode => (
         </text>
       </>
     ) : (
-      <text fg={MUTED}>
-        <span fg={ACCENT}>^B</span> enter wmux controls
-      </text>
+      <>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>^B</span> controls
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>^Cc</span> copy
+        </text>
+      </>
     )}
   </box>
 );

packages/wmux-client-terminal/src/components/WmuxApp.tsx

@@ -81,6 +81,10 @@ export const WmuxApp = (props: {
   const [prefixVisible, setPrefixVisible] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const searchOpenRef = useRef(false);
+  const [copyMode, setCopyMode] = useState(false);
+  const copyModeRef = useRef(false);
+  const copyPrefixRef = useRef(false);
+  const copyPrefixTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const activatePrefix = useCallback(() => {
     prefixRef.current = true;
@@ -97,6 +101,21 @@ export const WmuxApp = (props: {
     setSearchOpen(false);
   }, []);
 
+  const enterCopyMode = useCallback(() => {
+    copyModeRef.current = true;
+    setCopyMode(true);
+    copyPrefixRef.current = false;
+    if (copyPrefixTimerRef.current) {
+      clearTimeout(copyPrefixTimerRef.current);
+      copyPrefixTimerRef.current = null;
+    }
+  }, []);
+
+  const exitCopyMode = useCallback(() => {
+    copyModeRef.current = false;
+    setCopyMode(false);
+  }, []);
+
   const allNavItems = useMemo(() => buildAllNavigationItems(categories), [categories]);
 
   const registry = useMemo(() => {
@@ -131,6 +150,37 @@ export const WmuxApp = (props: {
     // ── Search overlay handles its own keys ──────────────
     if (searchOpenRef.current) return;
 
+    // ── Copy mode: only Escape exits ────────────────────
+    if (copyModeRef.current) {
+      if (key.name === "escape") exitCopyMode();
+      return;
+    }
+
+    // ── Copy prefix: Ctrl+C was pressed, waiting for 'c' ──
+    if (copyPrefixRef.current) {
+      copyPrefixRef.current = false;
+      if (copyPrefixTimerRef.current) {
+        clearTimeout(copyPrefixTimerRef.current);
+        copyPrefixTimerRef.current = null;
+      }
+      if (key.name === "c" && !key.ctrl) {
+        enterCopyMode();
+        return;
+      }
+      // Non-'c' key: fall through to normal handling
+    }
+
+    // ── Ctrl+C: set copy prefix (deferred so Ctrl+C reaches PTY) ──
+    if (key.ctrl && key.name === "c" && !prefixRef.current) {
+      setTimeout(() => { copyPrefixRef.current = true; }, 0);
+      if (copyPrefixTimerRef.current) clearTimeout(copyPrefixTimerRef.current);
+      copyPrefixTimerRef.current = setTimeout(() => {
+        copyPrefixRef.current = false;
+        copyPrefixTimerRef.current = null;
+      }, 500);
+      return;
+    }
+
     // ── Ctrl+B: toggle control mode ─────────────────────
     if (key.ctrl && key.name === "b") {
       if (prefixRef.current) {
@@ -214,6 +264,13 @@ export const WmuxApp = (props: {
       return;
     }
 
+    // Copy mode
+    if (key.name === "c") {
+      consumePrefix();
+      enterCopyMode();
+      return;
+    }
+
     // Exit control mode (+ start process if idle)
     if (key.name === "enter" || key.name === "return") {
       const activeCat = categories.find((c) => c.name === activeCategory);
@@ -244,7 +301,7 @@ export const WmuxApp = (props: {
   const activeChild = registry.get(activeTabId);
 
   return (
-    <PrefixProvider prefixRef={prefixRef} searchOpenRef={searchOpenRef} activeTabId={activeTabId}>
+    <PrefixProvider prefixRef={prefixRef} searchOpenRef={searchOpenRef} copyModeRef={copyModeRef} activeTabId={activeTabId} copyMode={copyMode}>
       <box
         flexDirection="column"
         width={width}
@@ -299,7 +356,7 @@ export const WmuxApp = (props: {
         <box height={1} backgroundColor={BORDER_COLOR} />
 
         {/* Status bar */}
-        <StatusBar prefixActive={prefixVisible} />
+        <StatusBar prefixActive={prefixVisible} copyMode={copyMode} />
       </box>
     </PrefixProvider>
   );

packages/wmux-client-terminal/src/components/WmuxTerminal.tsx

@@ -32,8 +32,8 @@ const renderSegment = (seg: StyledSegment, key: number): ReactNode => {
   return <span key={key} fg={seg.fg} bg={seg.bg}>{inner}</span>;
 };
 
-const renderLine = (line: StyledLine, key: number): ReactNode => (
-  <text key={key}>
+const renderLine = (line: StyledLine, key: number, selectable?: boolean): ReactNode => (
+  <text key={key} selectable={selectable}>
     {line.segments.length === 0
       ? " "
       : line.segments.map((seg, j) => renderSegment(seg, j))}
@@ -44,7 +44,7 @@ export const WmuxTerminal = (props: WmuxTerminalProps): ReactNode => {
   const { id, output, status } = props;
   const sendInput = props.onInput.mutate;
   const sendResize = props.onResize.mutate;
-  const { prefixRef, searchOpenRef, activeTabId } = usePrefixContext();
+  const { prefixRef, searchOpenRef, copyModeRef, activeTabId, copyMode } = usePrefixContext();
 
   const [lines, setLines] = useState<readonly StyledLine[]>([]);
   const { width, height } = useTerminalDimensions();
@@ -67,6 +67,7 @@ export const WmuxTerminal = (props: WmuxTerminalProps): ReactNode => {
     if (key.ctrl && key.name === "b") return; // prefix key, handled by WmuxApp
     if (prefixRef.current) return;            // control mode active, handled by WmuxApp
     if (searchOpenRef.current) return;        // search overlay is open
+    if (copyModeRef.current) return;          // copy mode active
 
     const data = key.sequence;
     if (data) {
@@ -116,8 +117,8 @@ export const WmuxTerminal = (props: WmuxTerminalProps): ReactNode => {
           </text>
         </box>
       ) : null}
-      <scrollbox flexGrow={1} stickyScroll stickyStart="bottom">
-        {lines.map((line, i) => renderLine(line, i))}
+      <scrollbox flexGrow={1} stickyScroll={!copyMode} stickyStart="bottom">
+        {lines.map((line, i) => renderLine(line, i, copyMode || undefined))}
       </scrollbox>
     </box>
   );