hyperhive/frontend/packages/agent/src/components/TermInput.tsx

// <TermInput> — the fixed composer at the bottom of the page. Sends a
// plain message to this agent's own turn loop (`POST send`), or
// intercepts a `/slash` command locally (never sent to the agent).
// Ported from app.js's `renderTermInput`/`handleSlashCommand`/
// `completeSlash`, with one deliberate UX change: `/new-session` and
// `/logout` used to pop the old shadow-DOM `themedConfirm` modal
// (@hive/shared/modal.js) before firing — this rewrite's destructive
// actions all avoid that widget family (see SidePanel.tsx's/
// useConfirmClick.ts's file comments for why), and a modal doesn't fit
// a text-input flow anyway. Instead: typing the command once arms it
// (a local note explains what confirming does), typing it again within
// the same "armed" state fires it — a keyboard-native two-step confirm.
import { useRef, useState } from 'preact/hooks';
import { postModel, postEffort } from '../lib/modelEffort.js';
import { postCancelTurn, postCompact, postNewSession, postLogout, postSend } from '../lib/termActions.js';

export interface TermInputProps {
  label: string;
  online: boolean;
  onLocalNote: (text: string) => void;
  onClear: () => void;
}

const SLASH_COMMANDS: { name: string; desc: string }[] = [
  { name: '/help', desc: 'list slash commands' },
  { name: '/clear', desc: 'wipe the terminal panel (local-only)' },
  { name: '/cancel', desc: 'SIGINT the in-flight claude turn' },
  { name: '/compact', desc: 'compact the persistent claude session' },
  { name: '/model', desc: '/model <name>  — switch claude model for future turns' },
  { name: '/effort', desc: '/effort <level>  — set claude effort (medium/high/xhigh) for future turns' },
  { name: '/new-session', desc: 'fresh claude session next turn (type twice to confirm)' },
  { name: '/logout', desc: 'rotate OAuth creds + park in needs-login (type twice to confirm)' },
];

const MAX_PX = 12 * 16; // ~8 lines @ 1.5 line-height, 1em base

function completeSlash(prefix: string): string | null {
  const matches = SLASH_COMMANDS.filter((c) => c.name.startsWith(prefix));
  if (!matches.length) return null;
  const idx = matches.findIndex((c) => c.name === prefix);
  return matches[(idx + 1) % matches.length].name;
}

export function TermInput({ label, online, onLocalNote, onClear }: TermInputProps) {
  const [value, setValue] = useState('');
  const taRef = useRef<HTMLTextAreaElement>(null);
  // Which destructive command is currently "armed" (typed once, waiting
  // for the confirming repeat) — any other command clears it.
  const armedRef = useRef<string | null>(null);

  function grow() {
    const ta = taRef.current;
    if (!ta) return;
    ta.style.height = 'auto';
    ta.style.height = Math.min(ta.scrollHeight, MAX_PX) + 'px';
  }

  function reportFailure(label_: string, detail?: string) {
    onLocalNote(`✗ ${label_} failed${detail ? ': ' + detail : ''}`);
  }

  function handleSlash(line: string): boolean {
    const trimmed = line.trim();
    const [cmd, ...rest] = trimmed.split(/\s+/);
    const arg = rest.join(' ');
    const wasArmed = armedRef.current === cmd;
    armedRef.current = null;

    switch (cmd) {
      case '/help':
        onLocalNote('/help');
        for (const c of SLASH_COMMANDS) onLocalNote(`    ${c.name.padEnd(13)} — ${c.desc}`);
        return true;
      case '/clear':
        onClear();
        onLocalNote('· terminal cleared (local view only — server history kept)');
        return true;
      case '/cancel':
        postCancelTurn().then((r) => !r.ok && reportFailure('/cancel', r.detail));
        return true;
      case '/compact':
        postCompact().then((r) => !r.ok && reportFailure('/compact', r.detail));
        return true;
      case '/new-session':
        if (wasArmed) {
          postNewSession().then((r) => !r.ok && reportFailure('/new-session', r.detail));
        } else {
          armedRef.current = '/new-session';
          onLocalNote('⚠ drops all prior --continue context. type /new-session again to confirm.');
        }
        return true;
      case '/logout':
        if (wasArmed) {
          postLogout().then((r) => !r.ok && reportFailure('/logout', r.detail));
        } else {
          armedRef.current = '/logout';
          onLocalNote('⚠ SIGINTs the current turn + rotates OAuth credentials. type /logout again to confirm.');
        }
        return true;
      case '/model':
        if (!arg) onLocalNote('✗ /model needs a name (e.g. /model haiku, /model sonnet, /model opus)');
        else postModel(arg).then((r) => !r.ok && reportFailure('/model', r.detail));
        return true;
      case '/effort':
        if (!arg) onLocalNote('✗ /effort needs a level (e.g. /effort medium, /effort high, /effort xhigh)');
        else postEffort(arg).then((r) => !r.ok && reportFailure('/effort', r.detail));
        return true;
      default:
        onLocalNote(`✗ unknown slash command: ${cmd} — try /help`);
        return true;
    }
  }

  function submit() {
    const line = value;
    if (!line.trim()) return;
    setValue('');
    requestAnimationFrame(grow);
    if (line.trim().startsWith('/')) {
      handleSlash(line);
      return;
    }
    armedRef.current = null;
    postSend(line).then((r) => !r.ok && reportFailure('send', r.detail));
  }

  function onInput(e: Event) {
    setValue((e.currentTarget as HTMLTextAreaElement).value);
    grow();
  }

  function onKeyDown(e: KeyboardEvent) {
    if (e.key === 'Tab' && value.startsWith('/') && !value.includes(' ')) {
      const next = completeSlash(value);
      if (next) {
        e.preventDefault();
        setValue(next);
      }
      return;
    }
    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
      e.preventDefault();
      submit();
    }
  }

  return (
    <div class={`term-input${online ? '' : ' disabled'}`}>
      <form
        class="sendform-term"
        onSubmit={(e) => {
          e.preventDefault();
          submit();
        }}
      >
        <span class="prompt">operator@{label} ▸</span>
        <textarea
          ref={taRef}
          value={value}
          placeholder={`message ${label}…`}
          rows={1}
          disabled={!online}
          autocomplete="off"
          onInput={onInput}
          onKeyDown={onKeyDown}
        />
        <span class="submit-hint">↵ send · ⇧↵ newline · /help</span>
      </form>
    </div>
  );
}