refactor: move query input from selection to execution phase

.changeset/move-query-to-execution.md

@@ -0,0 +1,6 @@
+---
+"@perstack/tui-components": patch
+"@perstack/tui": patch
+---
+
+refactor: move query input from selection to execution phase

packages/tui-components/src/components/action-row.tsx

@@ -13,11 +13,9 @@ export const ActionRowSimple = ({
   text,
   textDimColor = false,
 }: ActionRowSimpleProps) => (
-  <Box flexDirection="column">
-    <Box flexDirection="row">
-      <Box paddingRight={1}>
-        <Text color={indicatorColor}>{INDICATOR.BULLET}</Text>
-      </Box>
+  <Box flexDirection="column" marginBottom={1}>
+    <Box flexDirection="row" gap={1}>
+      <Text color={indicatorColor}>{INDICATOR.BULLET}</Text>
       <Text color="white" dimColor={textDimColor}>
         {text}
       </Text>
@@ -32,7 +30,7 @@ type ActionRowProps = {
   children: React.ReactNode
 }
 export const ActionRow = ({ indicatorColor, label, summary, children }: ActionRowProps) => (
-  <Box flexDirection="column">
+  <Box flexDirection="column" marginBottom={1}>
     <Box flexDirection="row" gap={1}>
       <Text color={indicatorColor}>{INDICATOR.BULLET}</Text>
       <Text color="white">{label}</Text>
@@ -42,11 +40,6 @@ export const ActionRow = ({ indicatorColor, label, summary, children }: ActionRo
         </Text>
       )}
     </Box>
-    <Box flexDirection="row">
-      <Box paddingRight={1}>
-        <Text dimColor>{INDICATOR.TREE}</Text>
-      </Box>
-      {children}
-    </Box>
+    {children}
   </Box>
 )

packages/tui-components/src/components/index.ts

@@ -3,5 +3,3 @@ export { CheckpointActionRow } from "./checkpoint-action-row.js"
 export { ExpertList, type ExpertListProps } from "./expert-list.js"
 export { ExpertSelectorBase, type ExpertSelectorBaseProps } from "./expert-selector-base.js"
 export { ListBrowser, type ListBrowserProps } from "./list-browser.js"
-export { RunSetting, type RunSettingProps } from "./run-setting.js"
-export { StreamingDisplay } from "./streaming-display.js"

packages/tui-components/src/constants.ts

@@ -21,7 +21,6 @@ export const RENDER_CONSTANTS = {
 export const INDICATOR = {
   CHEVRON_RIGHT: ">",
   BULLET: "●",
-  TREE: "└",
   ELLIPSIS: "...",
 } as const
 
@@ -47,6 +46,10 @@ export const KEY_BINDINGS = {
   CTRL_QUIT: "Ctrl+q",
 } as const
 
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const
+
+export const USAGE_INDICATORS = { LOW: "◔", MEDIUM: "◑", HIGH: "◕", FULL: "●" } as const
+
 export const KEY_HINTS = {
   NAVIGATE: `${KEY_BINDINGS.NAVIGATE_UP}${KEY_BINDINGS.NAVIGATE_DOWN}:Navigate`,
   SELECT: `${KEY_BINDINGS.SELECT}:Select`,

packages/tui-components/src/execution/app.tsx

@@ -1,29 +1,54 @@
 import type { PerstackEvent } from "@perstack/core"
-import { Box, useApp, useInput } from "ink"
-import { StreamingDisplay } from "../components/index.js"
-import { ActivityLogPanel, ContinueInputPanel, StatusPanel } from "./components/index.js"
+import { Box, Static, Text, useApp, useInput } from "ink"
+import { useCallback, useEffect, useState } from "react"
+import { ActionRow, ActionRowSimple } from "../components/action-row.js"
+import { ActivityLogItem, InterfacePanel } from "./components/index.js"
 import { useExecutionState } from "./hooks/index.js"
 import type { ExecutionParams, ExecutionResult } from "./types.js"
 
 type ExecutionAppProps = ExecutionParams & {
   onReady: (addEvent: (event: PerstackEvent) => void) => void
   onComplete: (result: ExecutionResult) => void
+  onQueryReady?: (query: string) => void
 }
 
 export const ExecutionApp = (props: ExecutionAppProps) => {
-  const { expertKey, query, config, continueTimeoutMs, historicalEvents, onReady, onComplete } =
-    props
+  const {
+    expertKey,
+    query,
+    config,
+    continueTimeoutMs,
+    historicalEvents,
+    onReady,
+    onComplete,
+    onQueryReady,
+  } = props
 
   const { exit } = useApp()
 
+  // Deferred exit: set result → render null → useEffect fires onComplete + exit
+  const [exitResult, setExitResult] = useState<ExecutionResult | null>(null)
+
+  const handleComplete = useCallback((result: ExecutionResult) => {
+    setExitResult(result)
+  }, [])
+
+  useEffect(() => {
+    if (exitResult) {
+      onComplete(exitResult)
+      exit()
+    }
+  }, [exitResult, onComplete, exit])
+
   const state = useExecutionState({
     expertKey,
     query,
     config,
     continueTimeoutMs,
     historicalEvents,
     onReady,
-    onComplete,
+    onComplete: handleComplete,
+    onQueryReady,
   })
 
   useInput((input, key) => {
@@ -33,19 +58,31 @@ export const ExecutionApp = (props: ExecutionAppProps) => {
     }
   })
 
+  // After exitResult is set, render null so Ink's final frame is empty
+  if (exitResult) return null
+
   return (
     <Box flexDirection="column">
-      <ActivityLogPanel activities={state.activities} />
-      <StreamingDisplay streaming={state.streaming} />
-      <StatusPanel
+      <Static items={state.staticItems}>
+        {(item, index) => {
+          if (item.type === "logEntry") {
+            if (item.detail) {
+              return (
+                <ActionRow key={item.id} indicatorColor={item.color} label={item.label}>
+                  <Text dimColor>{item.detail}</Text>
+                </ActionRow>
+              )
+            }
+            return <ActionRowSimple key={item.id} indicatorColor={item.color} text={item.label} />
+          }
+          return <ActivityLogItem key={item.id || `activity-${index}`} activity={item} />
+        }}
+      </Static>
+      <InterfacePanel
         runtimeInfo={state.runtimeInfo}
-        eventCount={state.eventCount}
-        runStatus={state.runStatus}
-      />
-      <ContinueInputPanel
-        isActive={state.isAcceptingContinue}
         runStatus={state.runStatus}
-        onSubmit={state.handleContinueSubmit}
+        streaming={state.streaming}
+        onSubmit={state.handleSubmit}
       />
     </Box>
   )