vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

agent: TermInput — composer + slash commands

Browse source 
Ported from app.js's `renderTermInput`/`handleSlashCommand`/
`completeSlash`: prompt + auto-growing textarea, Enter sends (Shift+Enter
newline), Tab cycles slash-command completion. Same command set
(/help, /clear, /cancel, /compact, /model, /effort, /new-session,
/logout), same routes (`api/cancel`, `api/compact`, `api/new-session`,
`api/logout`, `send`) via new `lib/termActions.ts` (same `{ok, detail}`
shape as modelEffort.ts's POST helper).

One deliberate UX change: `/new-session` and `/logout` used to pop the
old shadow-DOM `themedConfirm` modal before firing — this rewrite's
destructive actions all avoid that widget family already (SidePanel,
useConfirmClick), and a modal doesn't fit a text-input flow anyway.
Typing the command once arms it (a local note explains what confirming
does); typing it again fires it — a keyboard-native two-step confirm.

`/help`/`/clear` need to reach into LiveStream's row list (local-only
echo rows, never sent anywhere) without lifting that state up to Root —
`useLiveStream` gained `pushLocalNote`/`clearLocal`, exposed off
`LiveStream` via `forwardRef`+`useImperativeHandle` (preact/compat),
same shape as app.js's old `termAPI` object but scoped as a ref handle
instead of a module-level variable.

Screenshot-verified end to end: typed "/help" + Enter into a real
mounted composer, confirmed the textarea clears and the local note rows
(command list) append to the live pane.
This commit is contained in:
iris 2026-08-28 02:53:03 +02:00
commit d9249a36bf
5 changed files with 249 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/packages/agent/src/components/LiveStream.tsx
View file

@ -20,7 +20,8 @@
// unseen for an append. The old code inferred this from DOM
// mutation shape after the fact; here the caller already knows
// which one it did, so there's nothing to infer.
import { useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useLayoutEffect, useRef, useState, useImperativeHandle } from 'preact/hooks';
import { forwardRef } from 'preact/compat';
import { useLiveStream } from '../hooks/useLiveStream.js';
import { Row } from './Row.js';
@ -33,8 +34,21 @@ export interface LiveStreamProps {
onLiveTurnBoundary?: () => void;
}
export function LiveStream({ onLiveTurnBoundary }: LiveStreamProps) {
const { rows, hasMore, loadingMore, loadMore } = useLiveStream({ onLiveTurnBoundary });
/** Imperative escape hatch for TermInput's local-only slash commands
* (`/help`, `/clear`) — same shape as app.js's old `termAPI` object,
* kept as a ref handle rather than lifting the whole row array up to
* Root so LiveStream/useLiveStream still own their state privately. */
export interface LiveStreamHandle {
pushNote: (text: string) => void;
clear: () => void;
}
export const LiveStream = forwardRef<LiveStreamHandle, LiveStreamProps>(function LiveStream(
{ onLiveTurnBoundary },
ref,
) {
const { rows, hasMore, loadingMore, loadMore, pushLocalNote, clearLocal } = useLiveStream({ onLiveTurnBoundary });
useImperativeHandle(ref, () => ({ pushNote: pushLocalNote, clear: clearLocal }), [pushLocalNote, clearLocal]);
const logRef = useRef<HTMLDivElement>(null);
const [stickToBottom, setStickToBottom] = useState(true);
const [unseen, setUnseen] = useState(0);
@ -110,4 +124,4 @@ export function LiveStream({ onLiveTurnBoundary }: LiveStreamProps) {
)}
</div>
);
}
});