mixdog 1.4.1 → 1.4.2

package/src/tui/components/Picker.jsx

@@ -19,6 +19,8 @@ import { theme } from '../theme.mjs';
 import { ConfirmBar, clampConfirmFocus } from './ConfirmBar.jsx';
 import { truncatePanelText as truncateText } from './panel-cell-text.mjs';
 import { PickerItemRow } from './picker/PickerItemRow.jsx';
+import { SignInUrl, isSignInCopyKey, signInUrlNote, useCopyUrl } from './SignInUrl.jsx';
+import { signInUrlLayout } from './sign-in-url-layout.mjs';
 import {
   ADJUST_HELP,
   CONFIRM_HELP,
@@ -43,6 +45,10 @@ export function Picker({
   onHighlight,
   title,
   description = '',
+  // Optional sign-in URL, drawn complete and borderless under the panel (never
+  // truncated like `description`); Ctrl+Y copies it. `copyText` overrides the clipboard.
+  detail = '',
+  copyText,
   footer = '',
   help,
   columns = 80,
@@ -89,7 +95,21 @@ export function Picker({
   const footerGap = footerLines.length > 0 ? Math.max(0, Math.floor(Number(footerGapRows) || 0)) : 0;
   const footerReserveRows = footerLines.length > 0 ? footerLines.length + footerGap : 0;
   const confirmReserveRows = hasConfirm && footerLines.length === 0 ? 2 : 0;
-  const effectiveVisibleLimit = Math.max(1, visibleLimit - footerReserveRows - confirmReserveRows);
+  const detailText = String(detail || '').trim();
+  // The URL is drawn under the panel (no border). Its rows (wrapped URL + copy
+  // hint) come out of the list so the total height is unchanged. It gets the
+  // rows left beside up to two list rows (one, if that leaves nothing) and
+  // degrades step by step (see sign-in-url-layout.mjs) until it fits.
+  const rowsAfterChrome = visibleLimit - footerReserveRows - confirmReserveRows;
+  const keptListRows = rowsAfterChrome - Math.min(items.length, 2) >= 1 ? Math.min(items.length, 2) : 1;
+  const urlLayout = signInUrlLayout(detailText, columns, rowsAfterChrome - keptListRows);
+  const detailRows = urlLayout.rows;
+  const copyUrl = useCopyUrl(detailText, copyText);
+  const handleKey = (input, key, item, index) => {
+    if (detailText && isSignInCopyKey(input, key)) copyUrl.copy();
+    else onKey?.(input, key, item, index);
+  };
+  const effectiveVisibleLimit = Math.max(1, visibleLimit - footerReserveRows - confirmReserveRows - detailRows);
   let helpText = help;
   if (!helpText) {
     if (hasConfirm) helpText = CONFIRM_HELP;
@@ -112,7 +132,7 @@ export function Picker({
     onLeft,
     onRight,
     onTab,
-    onKey,
+    onKey: handleKey,
     effectiveVisibleLimit,
     hasConfirm,
     confirmButtons,
@@ -124,8 +144,9 @@ export function Picker({
   // line so a multi-line description (e.g. ToolApproval) cannot push the title
   // off the top. The slot is always reserved so panel chrome is a constant 6
   // rows (title + blank + desc + blank + 2 border), matching PICKER_CHROME_ROWS.
+  // With no hint row under the URL, the description row carries the copy note.
   const panelDescription = truncateText(
-    String(description || '')
+    String(!urlLayout.hint && detailText ? signInUrlNote(copyUrl.status) : description || '')
       .replace(/\s+/g, ' ')
       .trim(),
     Math.max(0, columns - 4)
@@ -134,6 +155,7 @@ export function Picker({
   if (items.length === 0) {
     const loadingRows = loading
       ? Array.from({ length: visibleLimit }, (_, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: identical blank placeholder rows have no identity besides position
           <Text key={`loading-${index}`} color={theme.inactive}>
             {' '}
           </Text>
@@ -253,6 +275,7 @@ export function Picker({
               const attachConfirm = hasConfirm && index === footerLines.length - 1;
               return (
                 <Box
+                  // biome-ignore lint/suspicious/noArrayIndexKey: footer lines are positional and may repeat text
                   key={`footer-${index}`}
                   flexDirection="row"
                   width="100%"
@@ -277,6 +300,7 @@ export function Picker({
           </>
         ) : null}
       </Box>
+      <SignInUrl url={detailText} layout={urlLayout} status={copyUrl.status} />
     </Box>
   );
 }

package/src/tui/components/SignInUrl.jsx

@@ -0,0 +1,68 @@
+/**
+ * components/SignInUrl.jsx — a sign-in URL shown OUTSIDE any bordered panel.
+ *
+ * Inside a bordered panel a wrapped URL carries the `│` border and padding on
+ * every row, so a terminal selection copies junk. Here the rows are plain text
+ * with no border, the URL is an OSC 8 hyperlink whose target is the complete
+ * URL (click it, or "Copy link" in the terminal), and SIGN_IN_COPY_KEY copies the
+ * exact URL through the clipboard helper. `layout` (sign-in-url-layout.mjs) may shorten
+ * the visible label to fit the panel; the link target and the copy stay complete.
+ */
+import { useState } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../theme.mjs';
+import { copyToClipboard } from '../app/clipboard.mjs';
+
+const SAFE_URL_RE = /^https?:\/\//i;
+
+// OSC 8 needs no support probe: a terminal that does not know the hyperlink
+// sequence ignores it and shows the label (its documented fallback). Only
+// http(s) targets are linked.
+const linkedUrl = (url, label) => (SAFE_URL_RE.test(url) ? `\x1b]8;;${url}\x07${label}\x1b]8;;\x07` : label);
+
+const STATUS_TEXT = {
+  copied: 'URL copied',
+  sent: 'Sent to terminal clipboard (not confirmed)',
+  failed: 'Copy failed: no clipboard available, use the link above',
+};
+
+/** The one key that copies a sign-in URL in every panel, with or without a focused text input. */
+const SIGN_IN_COPY_KEY = 'Ctrl+Y';
+export const isSignInCopyKey = (input, key) => Boolean(key?.ctrl) && String(input || '').toLowerCase() === 'y';
+
+/** The copy-key note, or what the last copy did. */
+export const signInUrlNote = (status) => STATUS_TEXT[status] || `${SIGN_IN_COPY_KEY} copies the full URL`;
+
+/** { copy, status } — status is '', 'copied', 'sent' (OSC 52 only) or 'failed'. */
+export function useCopyUrl(url, copyText = (text) => copyToClipboard(text, { confirm: true })) {
+  const [status, setStatus] = useState('');
+  const copy = () => {
+    if (!url) return;
+    Promise.resolve()
+      .then(() => copyText(url))
+      .then((how) => setStatus(how === 'terminal' ? 'sent' : 'copied'))
+      .catch(() => setStatus('failed'));
+  };
+  return { copy, status };
+}
+
+export function SignInUrl({ url, layout, status = '' }) {
+  const text = String(url || '').trim();
+  if (!text || layout.rows === 0) return null;
+  return (
+    // flexShrink 0 everywhere: the layout reserved exactly these rows, and in a
+    // height-constrained panel (fillHeight) yoga would otherwise shrink the
+    // wrapped URL Text below its row count, so the hint row lands on the
+    // URL's last row. The panel's bordered box gives the rows up instead.
+    <Box flexDirection="column" flexShrink={0} width="100%">
+      <Text color={theme.text} wrap={layout.compact ? 'truncate-end' : 'wrap'} flexShrink={0}>
+        {linkedUrl(text, layout.label)}
+      </Text>
+      {layout.hint ? (
+        <Text color={theme.subtle} wrap="truncate-end" flexShrink={0}>
+          {signInUrlNote(status)}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}

package/src/tui/components/TextEntryPanel.jsx

@@ -9,6 +9,8 @@ import { clearSelection, lineEnd, lineStart, moveCursor, replaceSelection, selec
 import { textEntryReservedRows } from '../app/text-layout.mjs';
 import { createTextEntryCursorAnchor, singleLine } from './text-entry-layout.mjs';
 import { renderTextEntryValue } from './text-entry-value.jsx';
+import { SignInUrl, isSignInCopyKey, signInUrlNote, useCopyUrl } from './SignInUrl.jsx';
+import { signInUrlLayout } from './sign-in-url-layout.mjs';
 import { canSubmitTextEntry } from '../app/text-entry-policy.mjs';
 import { truncatePanelText as truncateText } from './panel-cell-text.mjs';
 import { applyEditChord, createVerticalMover } from './prompt-input/edit-chords.mjs';
@@ -23,10 +25,53 @@ import {
 } from './prompt-input/edit-helpers.mjs';
 import { isCsiPrivateReply } from './prompt-input/key-signals.mjs';
 
+/** The bordered panel: title row, hint row and the editable value. `boxRef`
+ *  is the value box the cursor anchor is installed on. */
+function TextEntryFrame({ title, helpText, hintText, multiline, promptLabel, boxRef, contentHeight, renderedValue }) {
+  return (
+    <Box borderStyle="round" borderColor={theme.promptBorder} paddingX={1} width="100%" flexDirection="column">
+      <Box flexDirection="row" justifyContent="space-between">
+        <Text color={theme.panelTitle}>{title}</Text>
+        <Text color={theme.subtle}>{helpText}</Text>
+      </Box>
+      <Text> </Text>
+      <Text color={theme.subtle}>{hintText || ' '}</Text>
+      <Text> </Text>
+      {multiline ? (
+        <Box flexDirection="row" width="100%" alignItems="flex-start" backgroundColor={surfaceBackground()}>
+          <Text color={theme.inactive}>{promptLabel}</Text>
+          <Box
+            ref={boxRef}
+            flexGrow={1}
+            flexDirection="column"
+            height={contentHeight}
+            overflow="hidden"
+            backgroundColor={surfaceBackground()}
+          >
+            <Text color={theme.text} wrap="hard">
+              {renderedValue}
+            </Text>
+          </Box>
+        </Box>
+      ) : (
+        <Box ref={boxRef} flexDirection="row" width="100%" backgroundColor={surfaceBackground()}>
+          <Text color={theme.inactive}>{promptLabel}</Text>
+          <Text color={theme.text} wrap="truncate">
+            {renderedValue}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
 export function TextEntryPanel({
   title,
   hint = '',
   detail = '',
+  copyText,
+  // Rows the panel can give the detail URL block (row-budgets.mjs); unbounded when unknown.
+  urlMaxRows = Number.POSITIVE_INFINITY,
   initialValue = '',
   // Blank submit = the documented reset/clear action for some prompt kinds
   // (system shell → auto, provider auto-clear → built-in, profile title →
@@ -56,6 +101,11 @@ export function TextEntryPanel({
   const preferredColumnRef = useRef(null);
   const { isRawModeSupported } = useStdin();
   draftRef.current = draft;
+  // Optional sign-in URL (e.g. the OAuth URL), drawn complete and borderless
+  // under the panel — in the live panel only, never pushed to the transcript, so
+  // it disappears when the panel closes instead of lingering in scrollback.
+  const detailText = String(detail || '').trim();
+  const copyUrl = useCopyUrl(detailText, copyText);
 
   const flushImmediate = () => {
     let node = boxRef.current;
@@ -81,6 +131,7 @@ export function TextEntryPanel({
 
   const moveDraftVertically = createVerticalMover({ draftRef, contentWidthRef, preferredColumnRef, commitDraft });
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset only when the prompt (title/initialValue) changes; commitDraft is recreated every render and only touches refs/setState
   useEffect(() => {
     const value = String(initialValue || '');
     commitDraft({ value, cursor: value.length, selectionAnchor: null });
@@ -133,6 +184,7 @@ export function TextEntryPanel({
     (input, key) => {
       const rawSource = String(input ?? '');
       const rawInput = normalizePastedText(input);
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: matches the ESC byte of SGR mouse reports
       if (/(?:\x1b)?\[<\d+;\d+;\d+[Mm]/.test(rawSource)) return;
       // Safety net: drop CSI-private replies/fragments (\x1b[?<n>u / \x1b[?...c);
       // a volunteered report must never type into the field.
@@ -230,6 +282,10 @@ export function TextEntryPanel({
         updateDraft((d) => moveCursor(d, lineEnd(d.value, d.cursor), { extend: key.shift }));
         return;
       }
+      if (detailText && isSignInCopyKey(input, key)) {
+        copyUrl.copy();
+        return;
+      }
       if (applyEditChord(key, inputKey, updateDraft)) return;
       if (rawInput && !key.ctrl && !key.meta) {
         updateDraft((d) => insertText(d, rawInput));
@@ -256,12 +312,14 @@ export function TextEntryPanel({
   cursorEnabledRef.current = isRawModeSupported;
   installCursorAnchor();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only anchor install; the helpers are per-render closures over refs
   useLayoutEffect(() => {
     if (!installCursorAnchor()) return;
     bumpCursorAnchorEpoch((epoch) => epoch + 1);
     queueMicrotask(flushImmediate);
   }, []);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: title/multiline/draft are deliberate triggers to re-flush after content changes; flushImmediate is a per-render ref closure
   useLayoutEffect(() => {
     if (!isRawModeSupported) return;
     queueMicrotask(flushImmediate);
@@ -279,55 +337,27 @@ export function TextEntryPanel({
   // Standard panel rhythm: title row, blank, single-line hint, blank, content.
   // The hint is collapsed to one line and width-truncated so a long manual
   // OAuth URL can never wrap and push the bordered title off the top.
-  const hintText = truncateText(singleLine(hint), Math.max(0, columns - 4));
-  // Optional wrapped detail block (e.g. the manual OAuth URL). Lives INSIDE the
-  // live panel — never pushed to the transcript — so it disappears completely
-  // when the panel closes instead of lingering in terminal scrollback.
-  const detailText = String(detail || '').trim();
+  // The URL block gets the rows the panel really has (urlMaxRows) and degrades
+  // to fit; with no hint row under the URL, the hint row carries the copy note.
+  const urlLayout = signInUrlLayout(detailText, columns, urlMaxRows);
+  const hintText = truncateText(
+    !urlLayout.hint && detailText ? signInUrlNote(copyUrl.status) : singleLine(hint),
+    Math.max(0, columns - 4)
+  );
 
   return (
     <Box flexDirection="column" flexShrink={0} width="100%">
-      <Box borderStyle="round" borderColor={theme.promptBorder} paddingX={1} width="100%" flexDirection="column">
-        <Box flexDirection="row" justifyContent="space-between">
-          <Text color={theme.panelTitle}>{title}</Text>
-          <Text color={theme.subtle}>{helpText}</Text>
-        </Box>
-        <Text> </Text>
-        <Text color={theme.subtle}>{hintText || ' '}</Text>
-        {detailText ? (
-          <Box flexDirection="column" width="100%">
-            <Text> </Text>
-            <Text color={theme.subtle} wrap="wrap">
-              {detailText}
-            </Text>
-          </Box>
-        ) : null}
-        <Text> </Text>
-        {multiline ? (
-          <Box flexDirection="row" width="100%" alignItems="flex-start" backgroundColor={surfaceBackground()}>
-            <Text color={theme.inactive}>{promptLabel}</Text>
-            <Box
-              ref={boxRef}
-              flexGrow={1}
-              flexDirection="column"
-              height={contentHeight}
-              overflow="hidden"
-              backgroundColor={surfaceBackground()}
-            >
-              <Text color={theme.text} wrap="hard">
-                {renderedValue}
-              </Text>
-            </Box>
-          </Box>
-        ) : (
-          <Box ref={boxRef} flexDirection="row" width="100%" backgroundColor={surfaceBackground()}>
-            <Text color={theme.inactive}>{promptLabel}</Text>
-            <Text color={theme.text} wrap="truncate">
-              {renderedValue}
-            </Text>
-          </Box>
-        )}
-      </Box>
+      <TextEntryFrame
+        title={title}
+        helpText={helpText}
+        hintText={hintText}
+        multiline={multiline}
+        promptLabel={promptLabel}
+        boxRef={boxRef}
+        contentHeight={contentHeight}
+        renderedValue={renderedValue}
+      />
+      <SignInUrl url={detailText} layout={urlLayout} status={copyUrl.status} />
     </Box>
   );
 }

package/src/tui/components/sign-in-url-layout.mjs

@@ -0,0 +1,24 @@
+// components/sign-in-url-layout.mjs — row budget for a borderless sign-in URL block.
+//
+// `maxRows` is the height the panel can actually give the block. The block
+// degrades until it fits, and ONLY the visible text shrinks: the OSC 8 link
+// target and the clipboard copy always use the full URL.
+//   1. full URL wrapped over its rows + a copy-hint row
+//   2. one row with the URL's start and `…` + the hint row
+//   3. that one row alone (hint dropped)
+//   4. nothing (0 rows); the panel's own description/hint row carries the copy note
+import { wrappedDetailRows } from '../app/text-layout.mjs';
+import { truncatePanelText } from './panel-cell-text.mjs';
+
+export function signInUrlLayout(url, columns, maxRows) {
+  const text = String(url || '').trim();
+  if (!text) return { compact: false, rows: 0, hint: false, label: '' };
+  const width = Math.max(1, Math.floor(Number(columns) || 1));
+  const max = Math.max(0, Math.floor(Number(maxRows)));
+  const fullRows = wrappedDetailRows(text, width) + 1;
+  if (fullRows <= max) return { compact: false, rows: fullRows, hint: true, label: text };
+  const label = truncatePanelText(text, width);
+  if (max >= 2) return { compact: true, rows: 2, hint: true, label };
+  if (max >= 1) return { compact: true, rows: 1, hint: false, label };
+  return { compact: true, rows: 0, hint: false, label: '' };
+}