pi-note 0.37.0 → 0.39.2

package/remote/dialogs.ts

@@ -0,0 +1,150 @@
+import { BorderedLoader, DynamicBorder, getSelectListTheme, keyText, type ExtensionContext } from '@earendil-works/pi-coding-agent';
+import { Editor, Input, Key, matchesKey, truncateToWidth, wrapTextWithAnsi, type Component, type TUI } from '@earendil-works/pi-tui';
+import { clean, cleanUnbounded, editorText, type NativeControl, type NativeView } from './protocol.ts';
+import { heading, inlineHeight } from './menu.ts';
+import { inputValue } from './navigation.ts';
+
+/** One scrollable, geometry-aware document for previews and mandatory review. */
+export async function document(ctx: ExtensionContext, title: string, text: string, signal: AbortSignal, mustReview = false): Promise<boolean> {
+  if (signal.aborted || ctx.mode !== 'tui') return false;
+  const content = cleanUnbounded(text);
+  return !!await ctx.ui.custom<boolean>((tui, theme, keys, done) => {
+    let offset = 0, page = 1, max = 0, geometry = '', usable = false, lines: string[] = [], complete = false;
+    const seen = new Set<number>();
+    const cancel = () => done(false);
+    signal.addEventListener('abort', cancel, { once: true });
+    const component: Component & { dispose(): void; capturesViewportInput: boolean } = {
+      capturesViewportInput: true,
+      render(width) {
+        const height = inlineHeight(tui, width, component);
+        const current = `${width}:${tui.terminal.rows}:${height}`;
+        if (geometry !== current) seen.clear();
+        geometry = current;
+        usable = width >= 28 && height >= 8;
+        if (!usable) return [truncateToWidth('Enlarge terminal · Esc back', width)];
+        const border = new DynamicBorder((s) => theme.fg('border', s)).render(width);
+        lines = content.split('\n').flatMap((s) => wrapTextWithAnsi(s, width));
+        // Reserve wrapped hints even before the final line becomes reviewable.
+        const hint = `${keyText('tui.select.up')}/${keyText('tui.select.down')} scroll · ${keyText('tui.select.pageUp')}/${keyText('tui.select.pageDown')} page · ${keyText('tui.select.cancel')} back`;
+        const hints = wrapTextWithAnsi(hint, width);
+        page = Math.max(1, Math.min(18, height - border.length * 2 - hints.length - 4));
+        max = Math.max(0, lines.length - page); offset = Math.min(offset, max);
+        for (let i = offset; i < Math.min(lines.length, offset + page); i++) seen.add(i);
+        complete = seen.size === lines.length;
+        const status = mustReview ? complete ? `Review complete · ${keyText('tui.select.confirm')} to choose` : `Review ALL lines · ${offset + 1}–${Math.min(lines.length, offset + page)} / ${lines.length}`
+          : `Read-only · ${offset + 1}–${Math.min(lines.length, offset + page)} / ${lines.length}`;
+        return [...border, theme.fg('accent', heading(title, width)), '',
+          ...lines.slice(offset, offset + page), '', truncateToWidth(theme.fg('muted', status), width),
+          ...hints.map((s) => theme.fg('dim', s)), ...border].map((s) => truncateToWidth(s, width));
+      },
+      handleInput(data) {
+        if (keys.matches(data, 'tui.select.cancel') || matchesKey(data, Key.ctrl('c'))) cancel();
+        else if (usable && geometry === `${tui.terminal.columns}:${tui.terminal.rows}:${inlineHeight(tui, tui.terminal.columns, component)}`) {
+          if (mustReview && complete && keys.matches(data, 'tui.select.confirm') && !signal.aborted) done(true);
+          else if (keys.matches(data, 'tui.select.down')) offset = Math.min(max, offset + 1);
+          else if (keys.matches(data, 'tui.select.up')) offset = Math.max(0, offset - 1);
+          else if (keys.matches(data, 'tui.select.pageDown')) offset = Math.min(max, offset + page);
+          else if (keys.matches(data, 'tui.select.pageUp')) offset = Math.max(0, offset - page);
+        }
+        tui.requestRender();
+      },
+      handleMouse(event) {
+        if (!usable || event.type !== 'wheel' || !event.wheelDelta) return;
+        offset = Math.max(0, Math.min(max, offset + (event.wheelDelta > 0 ? 3 : -3)));
+        return { handled: true, render: true };
+      },
+      invalidate() { geometry = ''; },
+      dispose() { signal.removeEventListener('abort', cancel); },
+    };
+    return component;
+  });
+}
+
+export interface Draft { text: string }
+/** Native editors, bounded to the available dock, with exact submitted whitespace. */
+export async function editValue(ctx: ExtensionContext, title: string, view: NativeView, control: NativeControl, draft: Draft, signal: AbortSignal): Promise<NativeControl['value'] | undefined> {
+  if (signal.aborted) return undefined;
+  editorText(draft.text);
+  return ctx.ui.custom<NativeControl['value'] | undefined>((tui, theme, keys, done) => {
+    let editorRows = 20, usable = false, geometry = '', error = '', inputTop = 0, inputHeight = 0;
+    // Editor's public renderer sizes itself to 30% of terminal.rows (minimum five).
+    // Give it this component's budget rather than the whole terminal/dock.
+    const editorTui = { terminal: { get rows() { return editorRows; }, get columns() { return tui.terminal.columns; } }, requestRender: () => tui.requestRender() } as TUI;
+    const widget = control.multiline ? new Editor(editorTui, { borderColor: (s) => theme.fg('border', s), selectList: getSelectListTheme() }) : new Input();
+    if (widget instanceof Editor) { widget.disableSubmit = true; widget.setText(draft.text); }
+    else widget.setValue(draft.text);
+    const initial = widget instanceof Editor ? widget.getExpandedText() : widget.getValue(), original = draft.text;
+    const value = () => {
+      const text = widget instanceof Editor ? widget.getExpandedText() : widget.getValue();
+      return text === initial ? original : text;
+    };
+    const cancel = () => { draft.text = value(); done(undefined); };
+    signal.addEventListener('abort', cancel, { once: true });
+    const component: Component & { focused: boolean; dispose(): void; capturesViewportInput: boolean } = {
+      capturesViewportInput: true,
+      get focused() { return widget.focused; },
+      set focused(focused) { widget.focused = focused; },
+      render(width) {
+        const height = inlineHeight(tui, width, component);
+        geometry = `${width}:${tui.terminal.rows}:${height}`;
+        const border = new DynamicBorder((s) => theme.fg('border', s)).render(width);
+        const hints = wrapTextWithAnsi(`${keyText('tui.input.submit')} review${control.multiline ? ` · ${keyText('tui.input.newLine')} newline` : ''} · ${keyText('tui.select.cancel')} cancel`, width);
+        const help = wrapTextWithAnsi(clean(control.description ?? 'Nothing is saved until you review and confirm.'), width).slice(0, 2);
+        const header = [...border, theme.fg('accent', heading(title, width)), ...help.map((s) => theme.fg('muted', s)), ''];
+        const errors = error ? wrapTextWithAnsi(error, width).slice(0, 2) : [];
+        const normalization = original.includes('\t') ? [truncateToWidth('Editing expands tabs to spaces; review the exact change.', width)] : [];
+        const budget = height - header.length - errors.length - normalization.length - hints.length - border.length - 1;
+        usable = width >= 28 && budget >= (control.multiline ? 7 : 1);
+        if (!usable) return [truncateToWidth('Enlarge terminal · Esc back', width)];
+        editorRows = Math.floor(Math.max(5, budget - 2) / 0.3);
+        const rows = widget.render(width);
+        inputTop = header.length; inputHeight = rows.length;
+        return [...header, ...rows, ...errors.map((s) => theme.fg('error', s)), ...normalization.map((s) => theme.fg('muted', s)), '', ...hints.map((s) => theme.fg('dim', s)), ...border]
+          .map((s) => truncateToWidth(s, width));
+      },
+      handleInput(data) {
+        if (keys.matches(data, 'tui.select.cancel') || matchesKey(data, Key.ctrl('c'))) cancel();
+        else if (usable && geometry === `${tui.terminal.columns}:${tui.terminal.rows}:${inlineHeight(tui, tui.terminal.columns, component)}`) {
+          if (keys.matches(data, 'tui.input.submit') && !keys.matches(data, 'tui.input.newLine')) {
+            draft.text = value();
+            try { done(inputValue(control, draft.text, view)); }
+            catch (cause) { error = cause instanceof Error ? cause.message : 'Invalid value.'; }
+          } else {
+            const previous = value();
+            widget.handleInput(data);
+            try { editorText(value()); draft.text = value(); error = ''; }
+            catch {
+              if (widget instanceof Editor) widget.setText(previous); else widget.setValue(previous);
+              error = 'Unsupported terminal controls in pasted text.';
+            }
+          }
+        }
+        tui.requestRender();
+      },
+      handleMouse(event) {
+        if (!usable || event.y < inputTop || event.y >= inputTop + inputHeight) return;
+        return widget.handleMouse?.({ ...event, y: event.y - inputTop });
+      },
+      invalidate() { geometry = ''; widget.invalidate(); },
+      dispose() { signal.removeEventListener('abort', cancel); },
+    };
+    return component;
+  });
+}
+
+/** Keep operation keys out of the prompt; never offer a mutation retry while it is pending. */
+export async function working<T>(ctx: ExtensionContext, title: string, run: () => Promise<T>, signal: AbortSignal): Promise<T | undefined> {
+  if (signal.aborted) return undefined;
+  const result = await ctx.ui.custom<{ value?: T; error?: unknown }>((tui, theme, _keys, done) => {
+    const loader = new BorderedLoader(tui, theme, title, { cancellable: false });
+    let settled = false;
+    const finish = (result: { value?: T; error?: unknown }) => { if (!settled) { settled = true; done(result); } };
+    const abort = () => finish({});
+    signal.addEventListener('abort', abort, { once: true });
+    void run().then((value) => finish({ value }), (error) => finish({ error }));
+    return { render: (width) => loader.render(width), invalidate: () => loader.invalidate(),
+      dispose() { signal.removeEventListener('abort', abort); loader.dispose(); } };
+  });
+  if (result?.error) throw result.error;
+  return result?.value;
+}

package/remote/footer.ts

@@ -43,7 +43,8 @@ export class NativeFooter implements Component {
           (value, budget) => truncateToWidth(value, Math.max(0, Math.min(budget, width - x))),
           (value, style) => {
             const colored = style.color ? this.theme.fg(style.color, value) : value;
-            return style.italic ? this.theme.italic(colored) : colored;
+            const italic = style.italic ? this.theme.italic(colored) : colored;
+            return style.strikethrough ? this.theme.strikethrough(italic) : italic;
           });
         const end = x + visibleWidth(text);
         if (end > x && (item.openApp || item.action || item.doubleAction || item.secondaryAction)) {

package/remote/menu.ts

@@ -1,10 +1,21 @@
-import { DynamicBorder, getSettingsListTheme, keyText, type ExtensionContext } from '@earendil-works/pi-coding-agent';
+import { DynamicBorder, getSelectListTheme, keyText, type ExtensionContext } from '@earendil-works/pi-coding-agent';
 import { Input, Key, matchesKey, SelectList, truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component, type Container, type TUI } from '@earendil-works/pi-tui';
-import { clean, type NativeView } from './protocol.ts';
+import { clean, editorText, type NativeView } from './protocol.ts';
 
-export interface MenuState { search: string; selected?: string }
-export interface MenuChoice { id: string; value?: string }
+export interface MenuState { search: string; selected?: string; input?: Input }
+export interface MenuChoice { id: string }
+export interface MenuOptions {
+  search?: 'none' | 'local' | 'tasks';
+  searchLabel?: string;
+  onSearch?: (query: string) => Promise<void>;
+  notice?: string;
+}
 const line = (text: string) => clean(text).replace(/\n/g, ' ');
+/** Keep the current submenu/editor identifiable when a breadcrumb exceeds the viewport. */
+export function heading(title: string, width: number): string {
+  const text = line(title);
+  return truncateToWidth(visibleWidth(text) > width && text.includes(' / ') ? `… / ${text.split(' / ').slice(-2).join(' / ')}` : text, width);
+}
 
 /** Reserve the native dock (including footer/widgets), not just the terminal's last row. */
 export function inlineHeight(tui: TUI, width: number, component: Component): number {
@@ -15,91 +26,130 @@ export function inlineHeight(tui: TUI, width: number, component: Component): num
   return Math.max(1, Math.min(tui.terminal.rows - 6, tui.terminal.rows - 1 - reserved));
 }
 
-/** Public Input/SelectList APIs only; state belongs to this navigation session. */
+/** Native selection and input; only task search goes to the service. */
 export function remoteMenu(ctx: ExtensionContext, view: NativeView, state: MenuState, signal: AbortSignal,
-  watch: (changed: () => void) => () => void): Promise<MenuChoice | undefined> {
+  watch: (changed: () => void) => () => void, options: MenuOptions = {}): Promise<MenuChoice | undefined> {
+  if (signal.aborted) return Promise.resolve(undefined);
   return ctx.ui.custom<MenuChoice | undefined>((tui, theme, keys, done) => {
-    const input = new Input(); input.setValue(state.search);
-    const settings = getSettingsListTheme();
-    const items = view.controls.map((c) => {
-      const values = c.kind === 'toggle' ? ['false', 'true'] : c.kind === 'select' && (c.options?.length ?? 0) < 5
-        ? c.options?.map((o, i) => `${i + 1}. ${line(o.label)}`) : undefined;
-      const index = c.options?.findIndex((o) => o.value === c.value) ?? -1;
-      return { id: c.id, label: `${c.icon ? `${line(c.icon)} ` : ''}${line(c.label)}`, description: line(c.description ?? ''), values,
-        value: c.kind === 'action' ? 'Open' : c.kind === 'select' ? values?.[index] ?? line(c.options?.find((o) => o.value === c.value)?.label ?? String(c.value ?? '')) : line(String(c.value ?? '')) };
-    });
-    items.push({ id: '__refresh', label: 'Refresh', description: '', value: '', values: undefined });
-    let filtered = items, list: SelectList | undefined, layout = '', geometry = '', usable = false, listTop = 0, listRows = 0;
+    const search = options.search ?? 'local';
+    // Keep the native input/caret when a server result replaces the menu component.
+    const input = state.input ?? new Input();
+    if (!state.input) {
+      state.search = clean(state.search.replace(/[\r\n\t]/g, ' '));
+      input.handleInput(state.search);
+      state.input = input;
+    }
+    const tasks = search === 'tasks';
+    const items = view.controls.map((c) => ({ value: c.id,
+      label: `${c.icon ? `${line(c.icon)} ` : ''}${line(c.label)}`,
+      description: c.kind === 'action' ? undefined : c.kind === 'text' ? c.multiline ? 'Edit…' : line(String(c.value ?? '')) || '(none)'
+        : c.kind === 'toggle' ? c.value ? 'On' : 'Off'
+          : c.kind === 'select' ? line(c.options?.find((o) => o.value === c.value)?.label ?? '') : String(c.value ?? ''),
+      help: line(c.description ?? ''),
+    }));
+    let filtered = items, list: SelectList | undefined, layout = '', geometry = '', usable = false, listTop = 0, listRows = 0, capacity = 1, rowHeight = 1;
+    let timer: ReturnType<typeof setTimeout> | undefined, disposed = false, searching = false, error = '';
     const cancel = () => done(undefined);
-    const changed = () => done({ id: '__changed' });
-    const unwatch = watch(changed);
+    const unwatch = watch(() => done({ id: '__changed' }));
     signal.addEventListener('abort', cancel, { once: true });
-    const activate = () => {
-      if (signal.aborted || !usable || !layout || geometry !== `${tui.terminal.columns}:${tui.terminal.rows}`) return;
-      const item = filtered.find((item) => item.id === list?.getSelectedItem()?.value);
-      if (item) done({ id: item.id, value: item.values?.[(item.values.indexOf(item.value) + 1) % item.values.length] });
+    const fresh = () => !tasks || state.search === String(view.state.search ?? '');
+    const schedule = () => {
+      clearTimeout(timer);
+      if (fresh() || !options.onSearch || searching || disposed) return;
+      timer = setTimeout(() => {
+        if (disposed || signal.aborted) return;
+        searching = true;
+        void options.onSearch!(state.search).catch(() => { error = 'Search unavailable · Ctrl+R refresh'; }).finally(() => {
+          searching = false;
+          if (!disposed) tui.requestRender();
+        });
+      }, 250);
+    };
+    schedule();
+    const activate = (preview = false) => {
+      if (signal.aborted || !usable || !layout || !fresh() || searching || geometry !== `${tui.terminal.columns}:${tui.terminal.rows}:${inlineHeight(tui, tui.terminal.columns, component)}`) return;
+      const item = list?.getSelectedItem();
+      if (item) done({ id: preview && tasks ? `__preview:${item.value.slice('select:'.length)}` : item.value });
     };
-    const component: Component & { dispose(): void; focused: boolean } = {
+    const component: Component & { dispose(): void; focused: boolean; capturesViewportInput: boolean } = {
+      capturesViewportInput: true,
       get focused() { return input.focused; },
       set focused(value) { input.focused = value; },
       render(width) {
         const height = inlineHeight(tui, width, component);
-        geometry = `${width}:${tui.terminal.rows}`;
+        geometry = `${width}:${tui.terminal.rows}:${height}`;
         usable = width >= 28 && height >= 10;
         if (!usable) { layout = ''; return [truncateToWidth('Enlarge terminal · Esc back', width)]; }
-        const compact = height < 16;
+        const compact = height < 18;
         const border = new DynamicBorder((s) => theme.fg('border', s)).render(width);
-        const hints = wrapTextWithAnsi(`${keyText('tui.select.up')}/${keyText('tui.select.down')} move · ${keyText('tui.select.confirm')}/Space change · ${keyText('tui.select.cancel')} back · Ctrl+R refresh`, width);
-        const header = [...border, truncateToWidth(theme.fg('accent', line(view.title)), width),
-          ...(!compact && view.body ? wrapTextWithAnsi(line(view.body), width).slice(0, 2) : []), ...input.render(width), ''];
+        const hints = wrapTextWithAnsi(`${keyText('tui.select.up')}/${keyText('tui.select.down')} move · ${keyText('tui.select.confirm')} ${tasks ? 'select · F1 preview' : 'open'} · ${keyText('tui.select.cancel')} back · Ctrl+R refresh`, width);
+        const summary = (view.body ?? '').split('\n').flatMap((s) => wrapTextWithAnsi(clean(s), width - 2));
+        const summaryLimit = compact ? 1 : 3;
+        const header = [...border, theme.fg('accent', heading(view.title, width)),
+          ...summary.slice(0, summaryLimit).map((s, i) => theme.fg('muted', i === summaryLimit - 1 && summary.length > summaryLimit ? `${s}…` : s)),
+          ...(options.notice ? [truncateToWidth(theme.fg('success', line(options.notice)), width)] : []),
+          ...(search !== 'none' ? [theme.fg('muted', options.searchLabel ?? (tasks ? 'Search tasks · title, description, tag or #ID' : 'Type to filter')), ...input.render(width)] : []), ''];
         const detailRows = compact ? 1 : 2;
-        // SelectList may append a scroll indicator. Reserve that row even at the ends.
-        const capacity = Math.min(10, height - header.length - detailRows - hints.length - border.length - 2);
+        rowHeight = tasks && !compact ? 2 : 1;
+        capacity = Math.min(10, Math.floor((height - header.length - detailRows - hints.length - border.length - 2) / rowHeight));
         if (capacity < 1) { usable = false; layout = ''; return [truncateToWidth('Enlarge terminal · Esc back', width)]; }
-        filtered = items.filter((item) => state.search.toLowerCase().split(/\s+/).every((term) => item.label.toLowerCase().includes(term)));
+        filtered = search === 'local' ? items.filter((item) => state.search.toLowerCase().split(/\s+/).every((term) => `${item.label} ${item.description ?? ''} ${item.help}`.toLowerCase().includes(term))) : items;
         const signature = `${width}:${capacity}:${state.search}`;
         if (layout !== signature) {
           layout = signature;
-          const labelWidth = Math.min(36, Math.floor((width - 6) * 0.6), Math.max(1, ...items.map((item) => visibleWidth(item.label))));
-          const row = (item: typeof items[number], selected: boolean) => {
-            const label = truncateToWidth(item.label, labelWidth, '');
-            return settings.label(label + ' '.repeat(Math.max(0, labelWidth - visibleWidth(label))), selected) + '  '
-              + settings.value(truncateToWidth(item.value, Math.max(1, width - labelWidth - 6), ''), selected);
-          };
-          list = new SelectList(filtered.map((item) => ({ value: item.id, label: row(item, false) })), capacity, {
-            selectedPrefix: () => '', selectedText: () => settings.cursor + row(filtered.find((item) => item.id === list?.getSelectedItem()?.value)!, true),
-            description: settings.description, scrollInfo: settings.hint, noMatch: () => settings.hint('  No matching settings'),
-          });
-          list.setSelectedIndex(Math.max(0, filtered.findIndex((item) => item.id === state.selected)));
+          list = new SelectList(filtered, capacity, {
+            ...getSelectListTheme(), noMatch: () => theme.fg('muted', tasks ? state.search ? '  No tasks match this search.' : '  No active tasks. Esc back to create one.' : '  No matching items.'),
+          }, { minPrimaryColumnWidth: 12, maxPrimaryColumnWidth: Math.min(40, Math.floor(width * 0.6)) });
+          list.setSelectedIndex(Math.max(0, filtered.findIndex((item) => item.value === state.selected)));
           list.onSelectionChange = (item) => { state.selected = item.value; };
-          list.onSelect = activate; list.onCancel = cancel;
+          list.onSelect = () => activate(); list.onCancel = cancel;
           if (list.getSelectedItem()) state.selected = list.getSelectedItem()!.value;
         }
-        const selected = filtered.find((item) => item.id === list?.getSelectedItem()?.value);
-        const wrapped = wrapTextWithAnsi(selected?.description ?? '', width - 4);
-        const description = wrapped.slice(0, detailRows);
-        if (wrapped.length > detailRows) description[detailRows - 1] = truncateToWidth(description[detailRows - 1], width - 5, '') + '…';
+        const selectedIndex = filtered.findIndex((item) => item.value === list?.getSelectedItem()?.value);
+        const selected = filtered[selectedIndex];
+        const help = selected && width <= 40 && selected.description && selected.description !== 'Edit…'
+          ? `Current: ${selected.description}. ${selected.help}` : selected?.help ?? '';
+        const description = wrapTextWithAnsi(error || (!fresh() || searching ? 'Searching… Selection is disabled until results arrive.' : help), width - 4).slice(0, detailRows);
         while (description.length < detailRows) description.push('');
-        const rows = list!.render(width); listTop = header.length; listRows = Math.min(capacity, filtered.length);
-        return [...header, ...rows, '', ...description.map((s) => settings.description(`  ${s}`)), ...hints.map(settings.hint), ...border]
+        const nativeRows = list!.render(width);
+        const start = Math.max(0, Math.min(selectedIndex - Math.floor(capacity / 2), filtered.length - capacity));
+        listRows = Math.min(capacity, filtered.length); listTop = header.length;
+        const rows = nativeRows.flatMap((row, i) => rowHeight === 2 && i < listRows
+          ? [row, theme.fg('muted', truncateToWidth(`  ${filtered[start + i].help}`, width))] : [row]);
+        return [...header, ...rows, '', ...description.map((s) => theme.fg('muted', `  ${s}`)), ...hints.map((s) => theme.fg('dim', s)), ...border]
           .map((s) => truncateToWidth(s, width));
       },
       handleInput(data) {
         if (keys.matches(data, 'tui.select.cancel') || matchesKey(data, Key.ctrl('c'))) cancel();
-        else if (usable && geometry === `${tui.terminal.columns}:${tui.terminal.rows}`) {
+        else if (usable && geometry === `${tui.terminal.columns}:${tui.terminal.rows}:${inlineHeight(tui, tui.terminal.columns, component)}`) {
           if (matchesKey(data, Key.ctrl('r'))) done({ id: '__refresh' });
-          else if (data === ' ' && !state.search) activate();
-          else if ((['tui.select.up', 'tui.select.down', 'tui.select.pageUp', 'tui.select.pageDown', 'tui.select.confirm'] as const).some((key) => keys.matches(data, key))) { if (layout) list?.handleInput(data); }
-          else { input.handleInput(data); if (state.search !== input.getValue()) { state.search = input.getValue(); layout = ''; } }
+          else if (tasks && matchesKey(data, Key.f1)) activate(true);
+          else if (keys.matches(data, 'tui.select.confirm')) activate();
+          else if (keys.matches(data, 'tui.select.pageUp') || keys.matches(data, 'tui.select.pageDown')) {
+            const index = filtered.findIndex((item) => item.value === list?.getSelectedItem()?.value);
+            list?.setSelectedIndex(index + (keys.matches(data, 'tui.select.pageUp') ? -capacity : capacity));
+            state.selected = list?.getSelectedItem()?.value;
+          } else if (keys.matches(data, 'tui.select.up') || keys.matches(data, 'tui.select.down')) { if (layout) list?.handleInput(data); }
+          else if (search !== 'none') {
+            input.handleInput(data);
+            const value = input.getValue().replace(/[\r\n\t]/g, ' ');
+            try { editorText(value); }
+            catch { input.setValue(state.search); error = 'Unsupported terminal controls in search.'; tui.requestRender(); return; }
+            if (value !== input.getValue()) input.setValue(value);
+            if (state.search !== value) {
+              if (tasks && value.length > 256) input.setValue(state.search);
+              else { state.search = value; state.selected = undefined; layout = ''; error = ''; schedule(); }
+            }
+          }
         }
         tui.requestRender();
       },
       handleMouse(event) {
-        if (!usable || !layout || geometry !== `${tui.terminal.columns}:${tui.terminal.rows}` || event.y < listTop || event.y >= listTop + listRows) return;
-        return list?.handleMouse({ ...event, y: event.y - listTop });
+        if (!usable || !layout || !fresh() || searching || geometry !== `${tui.terminal.columns}:${tui.terminal.rows}:${inlineHeight(tui, tui.terminal.columns, component)}` || event.y < listTop || event.y >= listTop + listRows * rowHeight) return;
+        return list?.handleMouse({ ...event, y: Math.floor((event.y - listTop) / rowHeight) });
       },
       invalidate() { layout = ''; input.invalidate(); list?.invalidate(); },
-      dispose() { unwatch(); signal.removeEventListener('abort', cancel); },
+      dispose() { disposed = true; clearTimeout(timer); unwatch(); signal.removeEventListener('abort', cancel); },
     };
     return component;
   });

package/remote/navigation.ts

@@ -0,0 +1,90 @@
+import { defaultFooterField, parseAgentGuidance, parseFooterConfig, parseHandoffPrompt, parseNewSessionPrompt } from '../footer-config.ts';
+import { clean, editorText, type NativeControl, type NativeView } from './protocol.ts';
+
+export type Screen = 'home' | 'tasks' | 'settings' | 'prompts' | 'footer' | 'fields' | 'field';
+const group = (id: Screen, label: string, description: string): NativeControl => ({ id: `__${id}`, label, description, kind: 'action' });
+export const parentScreen = (screen: Screen): Screen | undefined => ({ tasks: 'home', settings: 'home', prompts: 'settings', footer: 'settings', fields: 'settings', field: 'fields' } as const)[screen as Exclude<Screen, 'home'>];
+export const serverScreen = (screen: Screen) => screen === 'home' || screen === 'tasks' ? 'tasks' : screen === 'field' ? 'field' : 'settings';
+
+/** Local navigation only. Server controls/revisions remain the authority for every action. */
+export function menuView(view: NativeView, screen: Screen): NativeView {
+  const take = (...ids: string[]) => ids.flatMap((id) => view.controls.filter((c) => c.id === id));
+  let controls: NativeControl[], title: string, body: string;
+  switch (screen) {
+    case 'home':
+      title = 'Pinote'; body = view.body ?? '';
+      controls = [...take('preview', 'proposal:preview', 'proposal:accept', 'proposal:dismiss', 'continue'),
+        group('tasks', view.state.selectedId ? 'Switch task…' : 'Choose a task…', 'Search tasks by title, description, tag or #ID. Enter starts and selects the chosen task.'),
+        ...take('add'), group('settings', 'Settings…', 'Shared prompts, task suggestions and footer display settings.'), ...take('done', 'clear')];
+      break;
+    case 'tasks':
+      title = 'Pinote / Tasks'; body = view.body ?? '';
+      controls = view.controls.filter((c) => c.id.startsWith('select:'));
+      break;
+    case 'settings':
+      title = 'Pinote / Settings'; body = 'Shared service settings · affects all connected clients. Task values are unchanged.';
+      controls = [group('prompts', 'Prompts and agent guidance…', 'Edit shared task prompts and injected instructions.'),
+        ...take('taskOfferPolicy'), group('footer', 'Footer layout…', 'Set title/field widths and the maximum visible handoff fields.'),
+        group('fields', 'Footer fields…', 'Edit display definitions, not saved task values.')];
+      break;
+    case 'prompts':
+      title = 'Pinote / Settings / Prompts'; body = 'Shared prompts and instructions · each change requires review and confirmation.';
+      controls = take('handoffPrompt', 'newSessionPrompt', 'agentGuidance', 'reset-agent-guidance');
+      // The service deliberately omits oversized editors. Keep its explanation visible.
+      if (view.body?.includes('editor limit')) body = view.body;
+      break;
+    case 'footer':
+      title = 'Pinote / Settings / Footer layout'; body = 'Shared display settings · widths are terminal columns. Task values are retained.';
+      controls = take('titleWidth', 'fieldWidth', 'maxFields');
+      break;
+    case 'fields':
+      title = 'Pinote / Settings / Footer fields'; body = 'Display definitions only. Populated task values appear in the footer.';
+      controls = [...view.controls.filter((c) => c.id.startsWith('field:')), ...take('add-field')];
+      break;
+    case 'field':
+      title = `Pinote / Settings / Fields / ${clean(String(view.state.field ?? ''))}`;
+      body = view.body ?? 'Shared display definition. Task values are unchanged.';
+      controls = take('label', 'format', 'width', 'link', 'remove-field');
+      break;
+  }
+  return { ...view, title, body, controls };
+}
+
+/** Reuse the same domain parsers as the service, before the remote revision-checked save. */
+export function inputValue(control: NativeControl, text: string, view: NativeView): NativeControl['value'] {
+  editorText(text);
+  if (text.length > 20_000) throw new Error('This editor accepts at most 20,000 characters. Edit larger values on the service.');
+  if (control.kind === 'number') {
+    if (!/^[+-]?\d+$/.test(text.trim())) throw new Error('Enter a whole number.');
+    const value = Number(text);
+    parseFooterConfig({ footer: { [control.id === 'width' ? 'fieldWidth' : control.id]: value } });
+    return value;
+  }
+  if (!control.multiline && /[\r\n\t]/.test(text)) throw new Error('Enter one line, without tabs.');
+  switch (control.id) {
+    case 'add':
+      if (!text.trim() || [...text].length > 4000) throw new Error('Enter task text, up to 4,000 characters.');
+      break;
+    case 'handoffPrompt': parseHandoffPrompt(text); break;
+    case 'newSessionPrompt': parseNewSessionPrompt(text); break;
+    case 'agentGuidance': parseAgentGuidance(text); break;
+    case 'add-field': {
+      const field = parseFooterConfig({ footer: { fields: [defaultFooterField(text)] } }).fields![0];
+      const fields = view.controls.filter((c) => c.id.startsWith('field:'));
+      if (fields.length >= 64) throw new Error('At most 64 field definitions are allowed.');
+      if (fields.some((c) => c.id === `field:${field.name}`)) throw new Error('A field with this name already exists.');
+      return field.name;
+    }
+    case 'label': case 'format':
+      parseFooterConfig({ footer: { fields: [{ ...defaultFooterField('Example'), [control.id]: text }] } });
+      break;
+  }
+  return text;
+}
+
+/** Quoted lines preserve significant whitespace without turning Unicode into unreadable escapes. */
+export function disclosure(value: unknown): string {
+  const quote = (s: string) => JSON.stringify(s).replace(/[\u007f-\u009f\u202a-\u202e\u2066-\u2069]/g,
+    (c) => `\\u${c.charCodeAt(0).toString(16).padStart(4, '0')}`);
+  return typeof value === 'string' ? value.split('\n').map(quote).join('\n') : JSON.stringify(value) ?? '(unset)';
+}

package/remote/protocol.ts

@@ -22,7 +22,8 @@ export const ViewSchema = z.object({
   version: z.literal(1), title: text, revision: z.string().min(1).max(256),
   state: StateSchema, body: text.optional(), retainOnNew: z.boolean().optional(),
   controls: z.array(control).max(256),
-  footer: z.array(z.object({ text, openApp: z.literal(true).optional(), url: z.string().max(2048).optional(), action: z.string().min(1).max(256).optional(), secondaryAction: z.string().min(1).max(256).optional(), doubleAction: z.string().min(1).max(256).optional(), style: z.object({ italic: z.boolean().optional(), color: z.enum(['accent', 'muted', 'text']).optional() }).strict().optional(), width: z.number().int().min(3).max(1000).optional() }).strict()).max(128).optional(),
+  fieldNotifications: z.array(z.object({ id: z.string().uuid(), taskId: z.number().int().positive().safe(), field: z.string().min(1).max(128), message: z.string().min(1).max(1000) }).strict()).max(64).optional(),
+  footer: z.array(z.object({ text, openApp: z.literal(true).optional(), url: z.string().max(2048).optional(), action: z.string().min(1).max(256).optional(), secondaryAction: z.string().min(1).max(256).optional(), doubleAction: z.string().min(1).max(256).optional(), style: z.object({ italic: z.boolean().optional(), strikethrough: z.boolean().optional(), color: z.enum(['accent', 'muted', 'text', 'warning', 'error', 'success']).optional() }).strict().optional(), width: z.number().int().min(3).max(1000).optional() }).strict()).max(128).optional(),
 }).strict().superRefine((view, ctx) => {
   if (new Set(view.controls.map((c) => c.id)).size !== view.controls.length) ctx.addIssue({ code: 'custom', message: 'Duplicate control IDs' });
   for (const item of view.footer ?? []) {

package/remote/session.ts

@@ -4,14 +4,17 @@ import { connectPeer, remoteFailure, RemoteFailure, type Peer, type PeerFactory,
 import { StateSchema, ViewSchema, UI_CONTEXT, UI_FEATURES, UI_STATE, type NativeView, type NativeControl } from './protocol.ts';
 
 export const ENTRY_TYPE = 'pinote-remote-v1';
-export interface SavedState { scope: string; contextId: string; state: Record<string, unknown>; retainOnNew?: boolean }
+export interface SavedState { scope: string; contextId: string; state: Record<string, unknown>; retainOnNew?: boolean; fieldReceipts?: string[] }
 export interface BranchEntry { type: string; customType?: string; data?: unknown }
 export function restoreState(branch: readonly BranchEntry[], scope: string): SavedState {
   let saved: SavedState = { scope, contextId: randomUUID(), state: {} };
   for (const entry of branch) {
     if (entry.type !== 'custom' || entry.customType !== ENTRY_TYPE) continue;
     const data = entry.data as SavedState | undefined;
-    if (data?.scope === scope && typeof data.contextId === 'string' && data.contextId.length > 0 && data.contextId.length <= 256 && StateSchema.safeParse(data.state).success) saved = structuredClone(data);
+    if (data?.scope === scope && typeof data.contextId === 'string' && data.contextId.length > 0 && data.contextId.length <= 256 && StateSchema.safeParse(data.state).success) {
+      saved = structuredClone(data);
+      saved.fieldReceipts = Array.isArray(data.fieldReceipts) ? data.fieldReceipts.filter((id) => typeof id === 'string' && /^[a-f0-9-]{36}$/.test(id)).slice(-4096) : [];
+    }
   }
   return saved;
 }
@@ -33,6 +36,7 @@ export class RemoteSession {
   fullscreen = false;
   onChange = () => {};
   onCompleted?: (taskId: number, signal: AbortSignal) => Promise<void>;
+  onFieldNotification?: (notice: NonNullable<NativeView['fieldNotifications']>[number]) => boolean;
   private config: RemoteConfig;
   private persist: (saved: SavedState) => void;
   private factory: PeerFactory;
@@ -61,7 +65,7 @@ export class RemoteSession {
     if (!this.saved) throw new RemoteFailure();
     return {
       [UI_CONTEXT]: { conversationId: this.conversationId, contextId: this.saved.contextId, state: this.saved.state },
-      [UI_FEATURES]: { actionRevisions: true, footerStyles: true, footerDoubleActions: true, footerSecondaryActions: true, footerNativeActions: this.fullscreen },
+      [UI_FEATURES]: { actionRevisions: true, fieldEvents: true, footerStyles: true, footerDoubleActions: true, footerSecondaryActions: true, footerNativeActions: this.fullscreen },
     };
   }
   private serial<T>(run: () => Promise<T>, signal?: AbortSignal): Promise<T> {
@@ -95,9 +99,15 @@ export class RemoteSession {
     throw remoteFailure(error, mutation);
   }
   private apply(view: NativeView): void {
-    const changed = JSON.stringify(this.saved?.state) !== JSON.stringify(view.state) || this.saved?.retainOnNew !== view.retainOnNew;
+    let changed = JSON.stringify(this.saved?.state) !== JSON.stringify(view.state) || this.saved?.retainOnNew !== view.retainOnNew;
     this.view = view;
     this.saved = { ...this.saved!, state: view.state, retainOnNew: view.retainOnNew };
+    const receipts = new Set(this.saved.fieldReceipts ?? []);
+    for (const notice of view.fieldNotifications ?? []) {
+      if (notice.taskId !== view.state.selectedId || receipts.has(notice.id)) continue;
+      if (this.onFieldNotification?.(notice)) { receipts.add(notice.id); changed = true; }
+    }
+    if (receipts.size) this.saved.fieldReceipts = [...receipts].slice(-4096);
     if (changed) this.persist(structuredClone(this.saved));
     this.onChange();
   }