create-expert 0.0.29 → 0.0.31

package/dist/bin/cli.js

@@ -33528,7 +33528,26 @@ var getInstance = (stdout, createInstance, concurrent) => {
 };
 
 // ../../node_modules/.pnpm/ink@6.7.0_@types+react@19.2.14_react@19.2.4/node_modules/ink/build/components/Static.js
-__toESM(require_react(), 1);
+var import_react16 = __toESM(require_react(), 1);
+function Static(props) {
+  const { items, children: render2, style: customStyle } = props;
+  const [index, setIndex] = (0, import_react16.useState)(0);
+  const itemsToRender = (0, import_react16.useMemo)(() => {
+    return items.slice(index);
+  }, [items, index]);
+  (0, import_react16.useLayoutEffect)(() => {
+    setIndex(items.length);
+  }, [items.length]);
+  const children = itemsToRender.map((item, itemIndex) => {
+    return render2(item, index + itemIndex);
+  });
+  const style = (0, import_react16.useMemo)(() => ({
+    position: "absolute",
+    flexDirection: "column",
+    ...customStyle
+  }), [customStyle]);
+  return import_react16.default.createElement("ink-box", { internal_static: true, style }, children);
+}
 
 // ../../node_modules/.pnpm/ink@6.7.0_@types+react@19.2.14_react@19.2.4/node_modules/ink/build/components/Transform.js
 __toESM(require_react(), 1);
@@ -34123,46 +34142,8 @@ var EventQueue = class _EventQueue {
   }
 };
 
-// ../../packages/tui-components/src/components/browser-router.tsx
-var import_react41 = __toESM(require_react(), 1);
-
-// ../../packages/tui-components/src/context/input-area-context.tsx
-var import_react29 = __toESM(require_react(), 1);
-var InputAreaContext = (0, import_react29.createContext)(null);
-var InputAreaProvider = InputAreaContext.Provider;
-var useInputAreaContext = () => {
-  const context = (0, import_react29.useContext)(InputAreaContext);
-  if (!context) {
-    throw new Error("useInputAreaContext must be used within InputAreaProvider");
-  }
-  return context;
-};
-
-// ../../packages/tui-components/src/helpers.ts
-var truncateText = (text, maxLength) => {
-  if (text.length <= maxLength) return text;
-  return `${text.slice(0, maxLength)}...`;
-};
-var assertNever = (x) => {
-  throw new Error(`Unexpected value: ${x}`);
-};
-var formatTimestamp = (timestamp) => new Date(timestamp).toLocaleString();
-var shortenPath = (fullPath, maxLength = 60) => {
-  if (fullPath.length <= maxLength) return fullPath;
-  const parts = fullPath.split("/");
-  if (parts.length <= 2) return fullPath;
-  const filename = parts[parts.length - 1] ?? "";
-  const parentDir = parts[parts.length - 2] ?? "";
-  const shortened = `.../${parentDir}/${filename}`;
-  if (shortened.length <= maxLength) return shortened;
-  return `.../${filename}`;
-};
-var summarizeOutput = (lines, maxLines) => {
-  const filtered = lines.filter((l) => l.trim());
-  const visible = filtered.slice(0, maxLines);
-  const remaining = filtered.length - visible.length;
-  return { visible, remaining };
-};
+// ../../packages/tui-components/src/execution/app.tsx
+var import_react46 = __toESM(require_react(), 1);
 
 // ../../packages/tui-components/src/constants.ts
 var UI_CONSTANTS = {
@@ -34174,7 +34155,6 @@ var RENDER_CONSTANTS = {
   NEW_TODO_MAX_PREVIEW: 3};
 var INDICATOR = {
   BULLET: "\u25CF",
-  TREE: "\u2514",
   ELLIPSIS: "..."
 };
 var STOP_EVENT_TYPES = [
@@ -34194,6 +34174,8 @@ var KEY_BINDINGS = {
   CHECKPOINTS: "c",
   EVENTS: "e",
   RESUME: "Enter"};
+var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+var USAGE_INDICATORS = { LOW: "\u25D4", MEDIUM: "\u25D1", HIGH: "\u25D5", FULL: "\u25CF" };
 var KEY_HINTS = {
   NAVIGATE: `${KEY_BINDINGS.NAVIGATE_UP}${KEY_BINDINGS.NAVIGATE_DOWN}:Navigate`,
   SELECT: `${KEY_BINDINGS.SELECT}:Select`,
@@ -34206,6 +34188,66 @@ var KEY_HINTS = {
   CHECKPOINTS: `${KEY_BINDINGS.CHECKPOINTS}:Checkpoints`,
   EVENTS: `${KEY_BINDINGS.EVENTS}:Events`};
 
+// ../../packages/tui-components/src/components/action-row.tsx
+var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
+var ActionRowSimple = ({
+  indicatorColor,
+  text,
+  textDimColor = false
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "row", gap: 1, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: indicatorColor, children: INDICATOR.BULLET }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "white", dimColor: textDimColor, children: text })
+] }) });
+var ActionRow = ({ indicatorColor, label, summary, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "column", marginBottom: 1, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "row", gap: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: indicatorColor, children: INDICATOR.BULLET }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "white", children: label }),
+    summary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "white", dimColor: true, children: summary })
+  ] }),
+  children
+] });
+
+// ../../packages/tui-components/src/components/browser-router.tsx
+var import_react41 = __toESM(require_react(), 1);
+
+// ../../packages/tui-components/src/context/input-area-context.tsx
+var import_react29 = __toESM(require_react(), 1);
+var InputAreaContext = (0, import_react29.createContext)(null);
+var InputAreaProvider = InputAreaContext.Provider;
+var useInputAreaContext = () => {
+  const context = (0, import_react29.useContext)(InputAreaContext);
+  if (!context) {
+    throw new Error("useInputAreaContext must be used within InputAreaProvider");
+  }
+  return context;
+};
+
+// ../../packages/tui-components/src/helpers.ts
+var truncateText = (text, maxLength) => {
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, maxLength)}...`;
+};
+var assertNever = (x) => {
+  throw new Error(`Unexpected value: ${x}`);
+};
+var formatTimestamp = (timestamp) => new Date(timestamp).toLocaleString();
+var shortenPath = (fullPath, maxLength = 60) => {
+  if (fullPath.length <= maxLength) return fullPath;
+  const parts = fullPath.split("/");
+  if (parts.length <= 2) return fullPath;
+  const filename = parts[parts.length - 1] ?? "";
+  const parentDir = parts[parts.length - 2] ?? "";
+  const shortened = `.../${parentDir}/${filename}`;
+  if (shortened.length <= maxLength) return shortened;
+  return `.../${filename}`;
+};
+var summarizeOutput = (lines, maxLines) => {
+  const filtered = lines.filter((l) => l.trim());
+  const visible = filtered.slice(0, maxLines);
+  const remaining = filtered.length - visible.length;
+  return { visible, remaining };
+};
+
 // ../../packages/tui-components/src/components/list-browser.tsx
 var import_react31 = __toESM(require_react(), 1);
 
@@ -34245,7 +34287,7 @@ var useListNavigation = (options) => {
 };
 
 // ../../packages/tui-components/src/components/list-browser.tsx
-var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 var ListBrowser = ({
   title,
   items,
@@ -34274,10 +34316,10 @@ var ListBrowser = ({
   }, [items, selectedIndex, maxItems]);
   const hasMoreAbove = scrollOffset > 0;
   const hasMoreBelow = scrollOffset + maxItems < items.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "cyan", children: title }),
-      items.length > maxItems && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: "gray", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: "cyan", children: title }),
+      items.length > maxItems && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { color: "gray", children: [
         " ",
         "(",
         selectedIndex + 1,
@@ -34286,17 +34328,17 @@ var ListBrowser = ({
         ")"
       ] })
     ] }),
-    hasMoreAbove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: INDICATOR.ELLIPSIS }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { flexDirection: "column", children: displayItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: emptyMessage }) : displayItems.map((item, index) => {
+    hasMoreAbove && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: "gray", children: INDICATOR.ELLIPSIS }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { flexDirection: "column", children: displayItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: "gray", children: emptyMessage }) : displayItems.map((item, index) => {
       const actualIndex = scrollOffset + index;
       return renderItem(item, actualIndex === selectedIndex, actualIndex);
     }) }),
-    hasMoreBelow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: INDICATOR.ELLIPSIS })
+    hasMoreBelow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: "gray", children: INDICATOR.ELLIPSIS })
   ] });
 };
 
 // ../../packages/tui-components/src/components/input-areas/browsing-checkpoints.tsx
-var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
 var BrowsingCheckpointsInput = ({
   job,
   checkpoints,
@@ -34304,7 +34346,7 @@ var BrowsingCheckpointsInput = ({
   onCheckpointResume,
   onBack,
   showEventsHint = true
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   ListBrowser,
   {
     title: `Checkpoints for ${job.expertKey} ${KEY_HINTS.NAVIGATE} ${KEY_HINTS.RESUME} ${showEventsHint ? KEY_HINTS.EVENTS : ""} ${KEY_HINTS.BACK}`.trim(),
@@ -34319,7 +34361,7 @@ var BrowsingCheckpointsInput = ({
       }
       return false;
     },
-    renderItem: (cp, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { color: isSelected ? "cyan" : "gray", children: [
+    renderItem: (cp, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { color: isSelected ? "cyan" : "gray", children: [
       isSelected ? ">" : " ",
       " Step ",
       cp.stepNumber,
@@ -34331,54 +34373,54 @@ var BrowsingCheckpointsInput = ({
 );
 
 // ../../packages/tui-components/src/components/input-areas/browsing-event-detail.tsx
-var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
 var BrowsingEventDetailInput = ({ event, onBack }) => {
   use_input_default((input, key) => {
     if (input === "b" || key.escape) {
       onBack();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { marginBottom: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { bold: true, children: "Event Detail" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { dimColor: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box_default, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box_default, { marginBottom: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { bold: true, children: "Event Detail" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { dimColor: true, children: [
         " ",
         KEY_HINTS.BACK
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { flexDirection: "column", marginLeft: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: "gray", children: "Type: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: "cyan", children: event.type })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box_default, { flexDirection: "column", marginLeft: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "Type: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "cyan", children: event.type })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: "gray", children: "Step: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { children: event.stepNumber })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "Step: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { children: event.stepNumber })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: "gray", children: "Timestamp: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { children: formatTimestamp(event.timestamp) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "Timestamp: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { children: formatTimestamp(event.timestamp) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: "gray", children: "ID: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { dimColor: true, children: event.id })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "ID: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { dimColor: true, children: event.id })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: "gray", children: "Run ID: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { dimColor: true, children: event.runId })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "Run ID: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { dimColor: true, children: event.runId })
       ] })
     ] })
   ] });
 };
 
 // ../../packages/tui-components/src/components/input-areas/browsing-events.tsx
-var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
 var BrowsingEventsInput = ({
   checkpoint,
   events,
   onEventSelect,
   onBack
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   ListBrowser,
   {
     title: `Events for Step ${checkpoint.stepNumber} ${KEY_HINTS.NAVIGATE} ${KEY_HINTS.SELECT} ${KEY_HINTS.BACK}`,
@@ -34386,7 +34428,7 @@ var BrowsingEventsInput = ({
     onSelect: onEventSelect,
     onBack,
     emptyMessage: "No events found",
-    renderItem: (ev, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text, { color: isSelected ? "cyan" : "gray", children: [
+    renderItem: (ev, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { color: isSelected ? "cyan" : "gray", children: [
       isSelected ? ">" : " ",
       " [",
       ev.type,
@@ -35023,6 +35065,7 @@ var useTextInput = (options) => {
   const inputRef = useLatestRef(input);
   const onSubmitRef = useLatestRef(options.onSubmit);
   const onCancelRef = useLatestRef(options.onCancel);
+  const canSubmitRef = useLatestRef(options.canSubmit ?? true);
   const handleInput = (0, import_react38.useCallback)(
     (inputChar, key) => {
       if (key.escape) {
@@ -35030,7 +35073,7 @@ var useTextInput = (options) => {
         onCancelRef.current?.();
         return;
       }
-      if (key.return && inputRef.current.trim()) {
+      if (key.return && inputRef.current.trim() && canSubmitRef.current) {
         onSubmitRef.current(inputRef.current.trim());
         setInput("");
         return;
@@ -35043,7 +35086,7 @@ var useTextInput = (options) => {
         setInput((prev) => prev + inputChar);
       }
     },
-    [inputRef, onSubmitRef, onCancelRef]
+    [inputRef, onSubmitRef, onCancelRef, canSubmitRef]
   );
   const reset = (0, import_react38.useCallback)(() => {
     setInput("");
@@ -35090,7 +35133,7 @@ var useExpertSelector = (options) => {
 };
 
 // ../../packages/tui-components/src/components/expert-list.tsx
-var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 var ExpertList = ({
   experts,
   selectedIndex,
@@ -35100,15 +35143,15 @@ var ExpertList = ({
 }) => {
   const displayExperts = maxItems ? experts.slice(0, maxItems) : experts;
   if (displayExperts.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", children: "No experts found." });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", children: "No experts found." });
   }
-  const items = displayExperts.map((expert, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { color: index === selectedIndex ? "cyan" : "gray", children: [
+  const items = displayExperts.map((expert, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: index === selectedIndex ? "cyan" : "gray", children: [
     index === selectedIndex ? ">" : " ",
     " ",
     showSource ? expert.key : expert.name,
-    showSource && expert.source && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    showSource && expert.source && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { color: expert.source === "configured" ? "green" : "yellow", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: expert.source === "configured" ? "green" : "yellow", children: [
         "[",
         expert.source === "configured" ? "config" : "recent",
         "]"
@@ -35116,11 +35159,11 @@ var ExpertList = ({
     ] }),
     inline ? " " : ""
   ] }, expert.key));
-  return inline ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { children: items }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { flexDirection: "column", children: items });
+  return inline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { children: items }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { flexDirection: "column", children: items });
 };
 
 // ../../packages/tui-components/src/components/expert-selector-base.tsx
-var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
 var ExpertSelectorBase = ({
   experts,
   hint,
@@ -35136,10 +35179,10 @@ var ExpertSelectorBase = ({
     extraKeyHandler
   });
   use_input_default(handleKeyInput);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { flexDirection: inline ? "row" : "column", children: [
-    !inputMode && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { flexDirection: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "cyan", children: hint }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { flexDirection: inline ? "row" : "column", children: [
+    !inputMode && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "cyan", children: hint }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ExpertList,
         {
           experts,
@@ -35150,16 +35193,16 @@ var ExpertSelectorBase = ({
         }
       )
     ] }),
-    inputMode && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", children: "Expert: " }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "white", children: input }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "cyan", children: "_" })
+    inputMode && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", children: "Expert: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "white", children: input }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "cyan", children: "_" })
     ] })
   ] });
 };
 
 // ../../packages/tui-components/src/components/input-areas/browsing-experts.tsx
-var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
 var BrowsingExpertsInput = ({
   experts,
   onExpertSelect,
@@ -35176,7 +35219,7 @@ var BrowsingExpertsInput = ({
     [onSwitchToHistory]
   );
   const hint = `Experts ${KEY_HINTS.NAVIGATE} ${KEY_HINTS.SELECT} ${KEY_HINTS.INPUT} ${KEY_HINTS.HISTORY} ${KEY_HINTS.CANCEL}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ExpertSelectorBase,
     {
       experts,
@@ -35190,13 +35233,13 @@ var BrowsingExpertsInput = ({
 };
 
 // ../../packages/tui-components/src/components/input-areas/browsing-history.tsx
-var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
 var BrowsingHistoryInput = ({
   jobs,
   onJobSelect,
   onJobResume,
   onSwitchToExperts
-}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   ListBrowser,
   {
     title: `Job History ${KEY_HINTS.NAVIGATE} ${KEY_HINTS.RESUME} ${KEY_HINTS.CHECKPOINTS} ${KEY_HINTS.NEW}`,
@@ -35214,7 +35257,7 @@ var BrowsingHistoryInput = ({
       }
       return false;
     },
-    renderItem: (job, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: isSelected ? "cyan" : "gray", children: [
+    renderItem: (job, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { color: isSelected ? "cyan" : "gray", children: [
       isSelected ? ">" : " ",
       " ",
       job.expertKey,
@@ -35230,7 +35273,7 @@ var BrowsingHistoryInput = ({
 );
 
 // ../../packages/tui-components/src/components/browser-router.tsx
-var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 var BrowserRouter = ({ inputState, showEventsHint = true }) => {
   const ctx = useInputAreaContext();
   const handleEventSelect = (0, import_react41.useCallback)(
@@ -35243,7 +35286,7 @@ var BrowserRouter = ({ inputState, showEventsHint = true }) => {
   );
   switch (inputState.type) {
     case "browsingHistory":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         BrowsingHistoryInput,
         {
           jobs: inputState.jobs,
@@ -35253,7 +35296,7 @@ var BrowserRouter = ({ inputState, showEventsHint = true }) => {
         }
       );
     case "browsingExperts":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         BrowsingExpertsInput,
         {
           experts: inputState.experts,
@@ -35262,7 +35305,7 @@ var BrowserRouter = ({ inputState, showEventsHint = true }) => {
         }
       );
     case "browsingCheckpoints":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         BrowsingCheckpointsInput,
         {
           job: inputState.job,
@@ -35274,7 +35317,7 @@ var BrowserRouter = ({ inputState, showEventsHint = true }) => {
         }
       );
     case "browsingEvents":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         BrowsingEventsInput,
         {
           checkpoint: inputState.checkpoint,
@@ -35284,34 +35327,12 @@ var BrowserRouter = ({ inputState, showEventsHint = true }) => {
         }
       );
     case "browsingEventDetail":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BrowsingEventDetailInput, { event: inputState.selectedEvent, onBack: ctx.onBack });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BrowsingEventDetailInput, { event: inputState.selectedEvent, onBack: ctx.onBack });
     default:
       return assertNever(inputState);
   }
 };
 
-// ../../packages/tui-components/src/components/action-row.tsx
-var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
-var ActionRowSimple = ({
-  indicatorColor,
-  text,
-  textDimColor = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { paddingRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: indicatorColor, children: INDICATOR.BULLET }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: "white", dimColor: textDimColor, children: text })
-] }) });
-var ActionRow = ({ indicatorColor, label, summary, children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "column", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", gap: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: indicatorColor, children: INDICATOR.BULLET }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: "white", children: label }),
-    summary && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: "white", dimColor: true, children: summary })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { paddingRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { dimColor: true, children: INDICATOR.TREE }) }),
-    children
-  ] })
-] });
-
 // ../../packages/tui-components/src/components/checkpoint-action-row.tsx
 var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
 var CheckpointActionRow = ({ action }) => {
@@ -35511,25 +35532,116 @@ function renderQuery(text, runId) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionRow, { indicatorColor: "cyan", label: "Query", summary: `(${shortRunId})`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box_default, { flexDirection: "column", children: lines.map((line, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { dimColor: true, wrap: "wrap", children: line }, `query-${idx}`)) }) });
 }
 
-// ../../packages/tui-components/src/components/run-setting.tsx
+// ../../packages/tui-components/src/execution/components/activity-log-panel.tsx
 var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
-var RunSetting = ({
-  info,
-  eventCount,
-  isEditing,
-  expertName,
-  onQuerySubmit
+function getActivityProps(activityOrGroup) {
+  if (activityOrGroup.type === "parallelGroup") {
+    const group = activityOrGroup;
+    const firstActivity = group.activities[0];
+    return {
+      runId: group.runId,
+      expertKey: group.expertKey,
+      delegatedBy: firstActivity?.delegatedBy
+    };
+  }
+  return activityOrGroup;
+}
+var ActivityLogItem = ({ activity }) => {
+  const { delegatedBy, expertKey } = getActivityProps(activity);
+  if (delegatedBy) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box_default, { marginLeft: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { dimColor: true, bold: true, children: [
+        "[",
+        expertKey,
+        "]"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckpointActionRow, { action: activity })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckpointActionRow, { action: activity });
+};
+
+// ../../packages/tui-components/src/execution/hooks/use-spinner.ts
+var import_react42 = __toESM(require_react(), 1);
+var useSpinner = ({ isActive }) => {
+  const [index, setIndex] = (0, import_react42.useState)(0);
+  const intervalRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
+    if (isActive) {
+      intervalRef.current = setInterval(() => {
+        setIndex((prev) => (prev + 1) % SPINNER_FRAMES.length);
+      }, 80);
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setIndex(0);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isActive]);
+  if (!isActive) return "";
+  return SPINNER_FRAMES[index];
+};
+
+// ../../packages/tui-components/src/execution/hooks/use-streaming-phase.ts
+var import_react43 = __toESM(require_react(), 1);
+function deriveStreamingPhase(streaming) {
+  for (const run of Object.values(streaming.runs)) {
+    if (run.isReasoningActive) return "reasoning";
+    if (run.isRunResultActive) return "generating";
+  }
+  return "idle";
+}
+var useStreamingPhase = (streaming) => {
+  return (0, import_react43.useMemo)(() => deriveStreamingPhase(streaming), [streaming]);
+};
+
+// ../../packages/tui-components/src/execution/components/interface-panel.tsx
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+function getUsageIcon(percent) {
+  if (percent <= 25) return USAGE_INDICATORS.LOW;
+  if (percent <= 50) return USAGE_INDICATORS.MEDIUM;
+  if (percent <= 75) return USAGE_INDICATORS.HIGH;
+  return USAGE_INDICATORS.FULL;
+}
+var InterfacePanel = ({
+  runtimeInfo,
+  runStatus,
+  streaming,
+  onSubmit
 }) => {
+  const streamingPhase = useStreamingPhase(streaming);
+  const isSpinnerActive = runStatus === "running";
+  const spinner = useSpinner({ isActive: isSpinnerActive });
   const { input, handleInput } = useTextInput({
-    onSubmit: onQuerySubmit ?? (() => {
-    })
+    onSubmit,
+    canSubmit: runStatus !== "running"
   });
-  use_input_default(handleInput, { isActive: isEditing });
-  const displayExpertName = expertName ?? info.expertName;
-  const skills = info.activeSkills.length > 0 ? info.activeSkills.join(", ") : "";
-  const step = info.currentStep !== void 0 ? String(info.currentStep) : "";
-  const usagePercent = (info.contextWindowUsage * 100).toFixed(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  use_input_default(handleInput);
+  let statusLabel;
+  if (runStatus === "waiting") {
+    statusLabel = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color: "cyan", children: "Waiting for query..." });
+  } else if (runStatus === "completed") {
+    statusLabel = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color: "green", children: "Completed" });
+  } else if (runStatus === "stopped") {
+    statusLabel = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color: "yellow", children: "Stopped" });
+  } else if (streamingPhase === "reasoning") {
+    statusLabel = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { children: "Streaming Reasoning..." });
+  } else if (streamingPhase === "generating") {
+    statusLabel = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { children: "Streaming Generation..." });
+  } else {
+    statusLabel = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { children: "Running..." });
+  }
+  const step = runtimeInfo.currentStep !== void 0 ? String(runtimeInfo.currentStep) : "\u2013";
+  const usagePercent = (runtimeInfo.contextWindowUsage * 100).toFixed(1);
+  const usageIcon = getUsageIcon(runtimeInfo.contextWindowUsage * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     Box_default,
     {
       flexDirection: "column",
@@ -35540,308 +35652,189 @@ var RunSetting = ({
       borderLeft: false,
       borderRight: false,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { bold: true, color: "cyan", children: "Perstack" }),
-          info.runtimeVersion && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { color: "gray", children: [
-            " (v",
-            info.runtimeVersion,
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: "Expert: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "white", children: displayExpertName }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: " / Skills: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "green", children: skills })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: "Status: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            Text,
-            {
-              color: info.status === "running" ? "green" : info.status === "completed" ? "cyan" : "yellow",
-              children: info.status
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: " / Step: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "white", children: step }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: " / Events: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "white", children: eventCount }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: " / Usage: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { color: "white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { children: [
+          spinner ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { color: "cyan", children: [
+            spinner,
+            " "
+          ] }) : null,
+          statusLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { dimColor: true, children: " \u2503 " }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { dimColor: true, children: "\u21BB " }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { children: step }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { dimColor: true, children: " \u2503 " }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { children: [
+            usageIcon,
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { children: [
             usagePercent,
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: "Model: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "white", children: info.model })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box_default, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: "Query: " }),
-          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "white", children: input }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "cyan", children: "_" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "white", children: info.query })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color: "gray", children: "> " }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { children: input }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color: "cyan", children: "_" })
         ] })
       ]
     }
   );
 };
 
-// ../../packages/tui-components/src/components/streaming-display.tsx
-var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
-var StreamingDisplay = ({ streaming }) => {
-  const activeRuns = Object.entries(streaming.runs).filter(
-    ([, run]) => run.isReasoningActive || run.isRunResultActive
-  );
-  if (activeRuns.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box_default, { flexDirection: "column", marginY: 1, children: activeRuns.map(([runId, run]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StreamingRunSection, { run }, runId)) });
-};
-function StreamingRunSection({ run }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box_default, { flexDirection: "column", children: [
-    run.isReasoningActive && run.reasoning !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StreamingReasoning, { expertKey: run.expertKey, text: run.reasoning }),
-    run.isRunResultActive && run.runResult !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StreamingRunResult, { expertKey: run.expertKey, text: run.runResult })
-  ] });
-}
-function StreamingReasoning({
-  expertKey,
-  text
-}) {
-  const lines = text.split("\n");
-  const label = `[${formatExpertKey(expertKey)}] Reasoning...`;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionRow, { indicatorColor: "cyan", label, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box_default, { flexDirection: "column", children: lines.map((line, idx) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { dimColor: true, wrap: "wrap", children: line }, `streaming-reasoning-${idx}`)) }) });
-}
-function StreamingRunResult({
-  expertKey,
-  text
-}) {
-  const lines = text.split("\n");
-  const label = `[${formatExpertKey(expertKey)}] Generating...`;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionRow, { indicatorColor: "green", label, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box_default, { flexDirection: "column", children: lines.map((line, idx) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { wrap: "wrap", children: line }, `streaming-run-result-${idx}`)) }) });
-}
-function formatExpertKey(expertKey) {
-  const atIndex = expertKey.lastIndexOf("@");
-  if (atIndex > 0) {
-    return expertKey.substring(0, atIndex);
-  }
-  return expertKey;
-}
-
-// ../../packages/tui-components/src/execution/components/activity-log-panel.tsx
-var import_react42 = __toESM(require_react(), 1);
-var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
-function getActivityKey(activityOrGroup, index) {
-  return activityOrGroup.id || `activity-${index}`;
+// ../../packages/tui-components/src/execution/hooks/use-execution-state.ts
+var import_react45 = __toESM(require_react(), 1);
+var logEntryCounter = 0;
+function createLogEntry(label, color, detail) {
+  logEntryCounter++;
+  return { id: `log-${logEntryCounter}`, type: "logEntry", label, color, detail };
 }
-var RunBox = ({ node, isRoot }) => {
-  if (isRoot) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box_default, { flexDirection: "column", children: [
-      node.activities.map((activity, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckpointActionRow, { action: activity }, getActivityKey(activity, index))),
-      node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RunBox, { node: child, isRoot: false }, child.runId))
-    ] });
-  }
-  const shortRunId = node.runId.slice(0, 8);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box_default, { flexDirection: "column", borderStyle: "round", borderColor: "gray", marginLeft: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { dimColor: true, bold: true, children: [
-      "[",
-      node.expertKey,
-      "] ",
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { dimColor: true, children: [
-        "(",
-        shortRunId,
-        ")"
-      ] })
-    ] }),
-    node.activities.map((activity, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckpointActionRow, { action: activity }, getActivityKey(activity, index))),
-    node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RunBox, { node: child, isRoot: false }, child.runId))
-  ] });
-};
-function getActivityProps(activityOrGroup) {
-  if (activityOrGroup.type === "parallelGroup") {
-    const group = activityOrGroup;
-    const firstActivity = group.activities[0];
-    return {
-      runId: group.runId,
-      expertKey: group.expertKey,
-      delegatedBy: firstActivity?.delegatedBy
-    };
+function extractLogEntriesFromEvent(event) {
+  const entries = [];
+  if (event.type === "initializeRuntime") {
+    entries.push(
+      createLogEntry(
+        "Initialize Runtime",
+        "green",
+        `Perstack v${event.runtimeVersion} \xB7 ${event.expertName} \xB7 ${event.model}`
+      )
+    );
+  } else if (event.type === "skillConnected") {
+    entries.push(createLogEntry(`Skill Connected: ${event.skillName}`, "green"));
+  } else if (event.type === "skillDisconnected") {
+    entries.push(createLogEntry(`Skill Disconnected: ${event.skillName}`, "yellow"));
   }
-  return activityOrGroup;
+  return entries;
 }
-var ActivityLogPanel = ({ activities }) => {
-  const rootNodes = (0, import_react42.useMemo)(() => {
-    const nodeMap = /* @__PURE__ */ new Map();
-    const roots = [];
-    const orphanChildren = /* @__PURE__ */ new Map();
-    for (const activityOrGroup of activities) {
-      const { runId, expertKey, delegatedBy } = getActivityProps(activityOrGroup);
-      let node = nodeMap.get(runId);
-      if (!node) {
-        node = {
-          runId,
-          expertKey,
-          activities: [],
-          children: []
-        };
-        nodeMap.set(runId, node);
-        const waitingChildren = orphanChildren.get(runId);
-        if (waitingChildren) {
-          for (const child of waitingChildren) {
-            node.children.push(child);
-            const rootIndex = roots.indexOf(child);
-            if (rootIndex !== -1) {
-              roots.splice(rootIndex, 1);
-            }
-          }
-          orphanChildren.delete(runId);
-        }
-        if (delegatedBy) {
-          const parentNode = nodeMap.get(delegatedBy.runId);
-          if (parentNode) {
-            parentNode.children.push(node);
-          } else {
-            const orphans = orphanChildren.get(delegatedBy.runId) ?? [];
-            orphans.push(node);
-            orphanChildren.set(delegatedBy.runId, orphans);
-            roots.push(node);
-          }
-        } else {
-          roots.push(node);
-        }
-      }
-      node.activities.push(activityOrGroup);
-    }
-    return roots;
-  }, [activities]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box_default, { flexDirection: "column", children: rootNodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RunBox, { node, isRoot: true }, node.runId)) });
-};
-
-// ../../packages/tui-components/src/execution/components/continue-input-panel.tsx
-var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
-var ContinueInputPanel = ({
-  isActive,
-  runStatus,
-  onSubmit
-}) => {
-  const { input, handleInput } = useTextInput({
-    onSubmit: (newQuery) => {
-      if (isActive && newQuery.trim()) {
-        onSubmit(newQuery.trim());
-      }
-    }
-  });
-  use_input_default(handleInput, { isActive });
-  if (runStatus === "running") {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box_default, { flexDirection: "column", borderStyle: "single", borderColor: "gray", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: runStatus === "completed" ? "green" : "yellow", bold: true, children: runStatus === "completed" ? "Completed" : "Stopped" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", children: " - Enter a follow-up query or wait to exit" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", children: "Continue: " }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: input }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "cyan", children: "_" })
-    ] })
-  ] });
-};
-
-// ../../packages/tui-components/src/execution/components/status-panel.tsx
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
-var StatusPanel = ({
-  runtimeInfo,
-  eventCount,
-  runStatus
-}) => {
-  if (runStatus !== "running") {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RunSetting, { info: runtimeInfo, eventCount, isEditing: false });
-};
-
-// ../../packages/tui-components/src/execution/hooks/use-execution-state.ts
-var import_react44 = __toESM(require_react(), 1);
 var useExecutionState = (options) => {
-  const { expertKey, query, config, continueTimeoutMs, historicalEvents, onReady, onComplete } = options;
-  const { exit } = use_app_default();
+  const {
+    expertKey,
+    query,
+    config,
+    continueTimeoutMs,
+    historicalEvents,
+    onReady,
+    onComplete,
+    onQueryReady
+  } = options;
   const runState = useRun();
   const { runtimeInfo, handleEvent, setQuery } = useRuntimeInfo({
     initialExpertName: expertKey,
     initialConfig: config
   });
-  const [runStatus, setRunStatus] = (0, import_react44.useState)("running");
-  const [isAcceptingContinue, setIsAcceptingContinue] = (0, import_react44.useState)(false);
-  const timeoutRef = (0, import_react44.useRef)(null);
-  const clearTimeoutIfExists = (0, import_react44.useCallback)(() => {
+  const [runStatus, setRunStatus] = (0, import_react45.useState)(query ? "running" : "waiting");
+  const [staticItems, setStaticItems] = (0, import_react45.useState)([]);
+  const timeoutRef = (0, import_react45.useRef)(null);
+  const lastSyncedCountRef = (0, import_react45.useRef)(0);
+  const clearTimeoutIfExists = (0, import_react45.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const startExitTimeout = (0, import_react44.useCallback)(() => {
+  const startExitTimeout = (0, import_react45.useCallback)(() => {
     clearTimeoutIfExists();
     timeoutRef.current = setTimeout(() => {
       onComplete({ nextQuery: null });
-      exit();
     }, continueTimeoutMs);
-  }, [clearTimeoutIfExists, continueTimeoutMs, onComplete, exit]);
-  (0, import_react44.useEffect)(() => {
-    setQuery(query);
+  }, [clearTimeoutIfExists, continueTimeoutMs, onComplete]);
+  (0, import_react45.useEffect)(() => {
+    if (query) {
+      setQuery(query);
+    }
   }, [query, setQuery]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (historicalEvents && historicalEvents.length > 0) {
       runState.appendHistoricalEvents(historicalEvents);
+      const logEntries = [];
+      for (const event of historicalEvents) {
+        logEntries.push(...extractLogEntriesFromEvent(event));
+      }
+      if (logEntries.length > 0) {
+        setStaticItems((prev) => [...prev, ...logEntries]);
+      }
     }
   }, [historicalEvents, runState.appendHistoricalEvents]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
+    const currentActivities = runState.activities;
+    if (currentActivities.length > lastSyncedCountRef.current) {
+      const newItems = currentActivities.slice(lastSyncedCountRef.current);
+      lastSyncedCountRef.current = currentActivities.length;
+      setStaticItems((prev) => [...prev, ...newItems]);
+    }
+  }, [runState.activities]);
+  (0, import_react45.useEffect)(() => {
     onReady((event) => {
       runState.addEvent(event);
       const result = handleEvent(event);
+      const logEntries = extractLogEntriesFromEvent(event);
+      if (logEntries.length > 0) {
+        setStaticItems((prev) => [...prev, ...logEntries]);
+      }
       if (result?.completed) {
         setRunStatus("completed");
-        setIsAcceptingContinue(true);
         startExitTimeout();
       } else if (result?.stopped) {
         setRunStatus("stopped");
-        setIsAcceptingContinue(true);
         startExitTimeout();
       }
     });
   }, [onReady, runState.addEvent, handleEvent, startExitTimeout]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     return () => {
       clearTimeoutIfExists();
     };
   }, [clearTimeoutIfExists]);
-  const handleContinueSubmit = (0, import_react44.useCallback)(
+  const handleSubmit = (0, import_react45.useCallback)(
     (newQuery) => {
-      if (isAcceptingContinue && newQuery.trim()) {
+      if (!newQuery.trim()) return;
+      if (runStatus === "waiting") {
+        const trimmed = newQuery.trim();
+        setQuery(trimmed);
+        setRunStatus("running");
+        onQueryReady?.(trimmed);
+        return;
+      }
+      if (runStatus !== "running") {
         clearTimeoutIfExists();
         onComplete({ nextQuery: newQuery.trim() });
-        exit();
       }
     },
-    [isAcceptingContinue, clearTimeoutIfExists, onComplete, exit]
+    [runStatus, clearTimeoutIfExists, onComplete, setQuery, onQueryReady]
   );
   return {
-    activities: runState.activities,
+    staticItems,
     streaming: runState.streaming,
-    eventCount: runState.eventCount,
     runtimeInfo,
     runStatus,
-    isAcceptingContinue,
-    handleContinueSubmit,
+    handleSubmit,
     clearTimeout: clearTimeoutIfExists
   };
 };
 
 // ../../packages/tui-components/src/execution/app.tsx
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 var ExecutionApp = (props) => {
-  const { expertKey, query, config, continueTimeoutMs, historicalEvents, onReady, onComplete } = props;
+  const {
+    expertKey,
+    query,
+    config,
+    continueTimeoutMs,
+    historicalEvents,
+    onReady,
+    onComplete,
+    onQueryReady
+  } = props;
   const { exit } = use_app_default();
+  const [exitResult, setExitResult] = (0, import_react46.useState)(null);
+  const handleComplete = (0, import_react46.useCallback)((result) => {
+    setExitResult(result);
+  }, []);
+  (0, import_react46.useEffect)(() => {
+    if (exitResult) {
+      onComplete(exitResult);
+      exit();
+    }
+  }, [exitResult, onComplete, exit]);
   const state = useExecutionState({
     expertKey,
     query,
@@ -35849,7 +35842,8 @@ var ExecutionApp = (props) => {
     continueTimeoutMs,
     historicalEvents,
     onReady,
-    onComplete
+    onComplete: handleComplete,
+    onQueryReady
   });
   use_input_default((input, key) => {
     if (key.ctrl && input === "c") {
@@ -35857,36 +35851,44 @@ var ExecutionApp = (props) => {
       exit();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Box_default, { flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ActivityLogPanel, { activities: state.activities }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StreamingDisplay, { streaming: state.streaming }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      StatusPanel,
+  if (exitResult) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box_default, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Static, { items: state.staticItems, children: (item, index) => {
+      if (item.type === "logEntry") {
+        if (item.detail) {
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionRow, { indicatorColor: item.color, label: item.label, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { dimColor: true, children: item.detail }) }, item.id);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionRowSimple, { indicatorColor: item.color, text: item.label }, item.id);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActivityLogItem, { activity: item }, item.id || `activity-${index}`);
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      InterfacePanel,
       {
         runtimeInfo: state.runtimeInfo,
-        eventCount: state.eventCount,
-        runStatus: state.runStatus
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      ContinueInputPanel,
-      {
-        isActive: state.isAcceptingContinue,
         runStatus: state.runStatus,
-        onSubmit: state.handleContinueSubmit
+        streaming: state.streaming,
+        onSubmit: state.handleSubmit
       }
     )
   ] });
 };
 
 // ../../packages/tui-components/src/execution/render.tsx
-var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
 function renderExecution(params) {
   const eventQueue = new EventQueue();
+  let resolveQuery;
+  const queryReady = new Promise((resolve) => {
+    resolveQuery = resolve;
+  });
+  if (params.query) {
+    resolveQuery(params.query);
+  }
   const result = new Promise((resolve, reject) => {
-    let resolved = false;
+    let executionResult;
     const { waitUntilExit } = render_default(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ExecutionApp,
         {
           ...params,
@@ -35894,14 +35896,18 @@ function renderExecution(params) {
             eventQueue.setHandler(handler);
           },
           onComplete: (result2) => {
-            resolved = true;
-            resolve(result2);
+            executionResult = result2;
+          },
+          onQueryReady: (query) => {
+            resolveQuery(query);
           }
         }
       )
     );
     waitUntilExit().then(() => {
-      if (!resolved) {
+      if (executionResult) {
+        resolve(executionResult);
+      } else {
         reject(new PerstackError("Execution cancelled"));
       }
     }).catch(reject);
@@ -35910,21 +35916,20 @@ function renderExecution(params) {
     result,
     eventListener: (event) => {
       eventQueue.emit(event);
-    }
+    },
+    queryReady
   };
 }
 
 // ../../packages/tui-components/src/selection/app.tsx
-var import_react45 = __toESM(require_react(), 1);
-var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+var import_react47 = __toESM(require_react(), 1);
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
 var selectionReducer = (_state, action) => {
   switch (action.type) {
     case "BROWSE_HISTORY":
       return { type: "browsingHistory", jobs: action.jobs };
     case "BROWSE_EXPERTS":
       return { type: "browsingExperts", experts: action.experts };
-    case "SELECT_EXPERT":
-      return { type: "enteringQuery", expertKey: action.expertKey };
     case "SELECT_JOB":
       return { type: "browsingCheckpoints", job: action.job, checkpoints: action.checkpoints };
     case "GO_BACK_FROM_CHECKPOINTS":
@@ -35937,7 +35942,6 @@ var SelectionApp = (props) => {
   const {
     showHistory,
     initialExpertKey,
-    initialQuery,
     initialCheckpoint,
     configuredExperts,
     recentExperts,
@@ -35946,51 +35950,47 @@ var SelectionApp = (props) => {
     onComplete
   } = props;
   const { exit } = use_app_default();
-  const allExperts = (0, import_react45.useMemo)(() => {
+  const allExperts = (0, import_react47.useMemo)(() => {
     const configured = configuredExperts.map((e) => ({ ...e, source: "configured" }));
     const recent = recentExperts.filter((e) => !configured.some((c) => c.key === e.key)).map((e) => ({ ...e, source: "recent" }));
     return [...configured, ...recent];
   }, [configuredExperts, recentExperts]);
   const getInitialState = () => {
-    if (initialExpertKey && !initialQuery) {
-      return { type: "enteringQuery", expertKey: initialExpertKey };
-    }
     if (showHistory && historyJobs.length > 0) {
       return { type: "browsingHistory", jobs: historyJobs };
     }
     return { type: "browsingExperts", experts: allExperts };
   };
-  const [state, dispatch] = (0, import_react45.useReducer)(selectionReducer, void 0, getInitialState);
-  const [selectedCheckpoint, setSelectedCheckpoint] = (0, import_react45.useState)(
-    initialCheckpoint
-  );
-  (0, import_react45.useEffect)(() => {
-    if (initialExpertKey && initialQuery) {
+  const [state, dispatch] = (0, import_react47.useReducer)(selectionReducer, void 0, getInitialState);
+  const [exitResult, setExitResult] = (0, import_react47.useState)(null);
+  (0, import_react47.useEffect)(() => {
+    if (exitResult) {
+      onComplete(exitResult);
+      exit();
+    }
+  }, [exitResult, onComplete, exit]);
+  (0, import_react47.useEffect)(() => {
+    if (initialExpertKey) {
       onComplete({
         expertKey: initialExpertKey,
-        query: initialQuery,
         checkpoint: initialCheckpoint
       });
       exit();
     }
-  }, [initialExpertKey, initialQuery, initialCheckpoint, onComplete, exit]);
-  const { input: queryInput, handleInput: handleQueryInput } = useTextInput({
-    onSubmit: (query) => {
-      if (state.type === "enteringQuery" && query.trim()) {
-        onComplete({
-          expertKey: state.expertKey,
-          query: query.trim(),
-          checkpoint: selectedCheckpoint
-        });
-        exit();
-      }
-    }
-  });
-  use_input_default(handleQueryInput, { isActive: state.type === "enteringQuery" });
-  const handleExpertSelect = (0, import_react45.useCallback)((expertKey) => {
-    dispatch({ type: "SELECT_EXPERT", expertKey });
-  }, []);
-  const handleJobSelect = (0, import_react45.useCallback)(
+  }, [initialExpertKey, initialCheckpoint, onComplete, exit]);
+  const completeWithExpert = (0, import_react47.useCallback)(
+    (expertKey, checkpoint) => {
+      setExitResult({ expertKey, checkpoint });
+    },
+    []
+  );
+  const handleExpertSelect = (0, import_react47.useCallback)(
+    (expertKey) => {
+      completeWithExpert(expertKey);
+    },
+    [completeWithExpert]
+  );
+  const handleJobSelect = (0, import_react47.useCallback)(
     async (job) => {
       try {
         const checkpoints = await onLoadCheckpoints(job);
@@ -36001,39 +36001,39 @@ var SelectionApp = (props) => {
     },
     [onLoadCheckpoints]
   );
-  const handleJobResume = (0, import_react45.useCallback)(
+  const handleJobResume = (0, import_react47.useCallback)(
     async (job) => {
       try {
         const checkpoints = await onLoadCheckpoints(job);
         const latestCheckpoint = checkpoints[0];
         if (latestCheckpoint) {
-          setSelectedCheckpoint(latestCheckpoint);
+          completeWithExpert(job.expertKey, latestCheckpoint);
+        } else {
+          completeWithExpert(job.expertKey);
         }
-        dispatch({ type: "SELECT_EXPERT", expertKey: job.expertKey });
       } catch {
-        dispatch({ type: "SELECT_EXPERT", expertKey: job.expertKey });
+        completeWithExpert(job.expertKey);
       }
     },
-    [onLoadCheckpoints]
+    [onLoadCheckpoints, completeWithExpert]
   );
-  const handleCheckpointResume = (0, import_react45.useCallback)(
+  const handleCheckpointResume = (0, import_react47.useCallback)(
     (checkpoint) => {
-      setSelectedCheckpoint(checkpoint);
       if (state.type === "browsingCheckpoints") {
-        dispatch({ type: "SELECT_EXPERT", expertKey: state.job.expertKey });
+        completeWithExpert(state.job.expertKey, checkpoint);
       }
     },
-    [state]
+    [state, completeWithExpert]
   );
-  const handleBack = (0, import_react45.useCallback)(() => {
+  const handleBack = (0, import_react47.useCallback)(() => {
     if (state.type === "browsingCheckpoints") {
       dispatch({ type: "GO_BACK_FROM_CHECKPOINTS", jobs: historyJobs });
     }
   }, [state, historyJobs]);
-  const handleSwitchToExperts = (0, import_react45.useCallback)(() => {
+  const handleSwitchToExperts = (0, import_react47.useCallback)(() => {
     dispatch({ type: "BROWSE_EXPERTS", experts: allExperts });
   }, [allExperts]);
-  const handleSwitchToHistory = (0, import_react45.useCallback)(() => {
+  const handleSwitchToHistory = (0, import_react47.useCallback)(() => {
     dispatch({ type: "BROWSE_HISTORY", jobs: historyJobs });
   }, [historyJobs]);
   use_input_default((input, key) => {
@@ -36041,7 +36041,7 @@ var SelectionApp = (props) => {
       exit();
     }
   });
-  const contextValue = (0, import_react45.useMemo)(
+  const contextValue = (0, import_react47.useMemo)(
     () => ({
       onExpertSelect: handleExpertSelect,
       onQuerySubmit: () => {
@@ -36070,57 +36070,38 @@ var SelectionApp = (props) => {
       handleSwitchToHistory
     ]
   );
-  if (initialExpertKey && initialQuery) {
+  if (exitResult || initialExpertKey) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Box_default, { flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputAreaProvider, { value: contextValue, children: (state.type === "browsingHistory" || state.type === "browsingExperts" || state.type === "browsingCheckpoints") && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      BrowserRouter,
-      {
-        inputState: state,
-        showEventsHint: false
-      }
-    ) }),
-    state.type === "enteringQuery" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Box_default, { flexDirection: "column", borderStyle: "single", borderColor: "gray", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { color: "cyan", bold: true, children: "Expert:" }),
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: state.expertKey }),
-        selectedCheckpoint && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text, { color: "gray", children: [
-          " (resuming from step ",
-          selectedCheckpoint.stepNumber,
-          ")"
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Box_default, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { color: "gray", children: "Query: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: queryInput }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { color: "cyan", children: "_" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { dimColor: true, children: "Press Enter to start" })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputAreaProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    BrowserRouter,
+    {
+      inputState: state,
+      showEventsHint: false
+    }
+  ) }) });
 };
 
 // ../../packages/tui-components/src/selection/render.tsx
-var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 async function renderSelection(params) {
   return new Promise((resolve, reject) => {
-    let resolved = false;
+    let selectionResult;
     const { waitUntilExit } = render_default(
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         SelectionApp,
         {
           ...params,
           onComplete: (result) => {
-            resolved = true;
-            resolve(result);
+            selectionResult = result;
           }
         }
       )
     );
     waitUntilExit().then(() => {
-      if (!resolved) {
+      if (selectionResult) {
+        resolve(selectionResult);
+      } else {
         reject(new PerstackError("Selection cancelled"));
       }
     }).catch(reject);
@@ -36164,7 +36145,6 @@ async function startHandler(expertKey, query, options, handlerOptions) {
   const selection = await renderSelection({
     showHistory,
     initialExpertKey: input.expertKey,
-    initialQuery: input.query,
     initialCheckpoint: checkpoint ? {
       id: checkpoint.id,
       jobId: checkpoint.jobId,
@@ -36184,10 +36164,6 @@ async function startHandler(expertKey, query, options, handlerOptions) {
     console.error("Expert key is required");
     return;
   }
-  if (!selection.query && !selection.checkpoint) {
-    console.error("Query is required");
-    return;
-  }
   let currentCheckpoint = selection.checkpoint ? getCheckpointById(selection.checkpoint.jobId, selection.checkpoint.id) : checkpoint;
   if (currentCheckpoint && currentCheckpoint.expert.key !== selection.expertKey) {
     console.error(
@@ -36196,17 +36172,21 @@ async function startHandler(expertKey, query, options, handlerOptions) {
     return;
   }
   const lockfile = handlerOptions.lockfile;
-  let currentQuery = selection.query;
+  let currentQuery = input.query ?? null;
   let currentJobId = currentCheckpoint?.jobId ?? input.options.jobId ?? createId();
   let isNextQueryInteractiveToolResult = input.options.interactiveToolCallResult ?? false;
   let isFirstIteration = true;
   const initialHistoricalEvents = currentCheckpoint ? getAllEventContentsForJob(currentCheckpoint.jobId, currentCheckpoint.stepNumber) : void 0;
-  while (currentQuery !== null) {
+  while (true) {
     const historicalEvents = isFirstIteration ? initialHistoricalEvents : void 0;
     const runId = createId();
-    const { result: executionResult, eventListener } = renderExecution({
+    const {
+      result: executionResult,
+      eventListener,
+      queryReady
+    } = renderExecution({
       expertKey: selection.expertKey,
-      query: currentQuery,
+      query: currentQuery ?? void 0,
       config: {
         runtimeVersion,
         model,
@@ -36218,13 +36198,14 @@ async function startHandler(expertKey, query, options, handlerOptions) {
       continueTimeoutMs: CONTINUE_TIMEOUT_MS,
       historicalEvents
     });
+    const resolvedQuery = await queryReady;
     const runResult = await run(
       {
         setting: {
           jobId: currentJobId,
           runId,
           expertKey: selection.expertKey,
-          input: isNextQueryInteractiveToolResult && currentCheckpoint ? parseInteractiveToolCallResult(currentQuery, currentCheckpoint) : { text: currentQuery },
+          input: isNextQueryInteractiveToolResult && currentCheckpoint ? parseInteractiveToolCallResult(resolvedQuery, currentCheckpoint) : { text: resolvedQuery },
           experts,
           model,
           providerConfig,
@@ -36260,7 +36241,7 @@ async function startHandler(expertKey, query, options, handlerOptions) {
       isNextQueryInteractiveToolResult = runResult.status === "stoppedByInteractiveTool";
       isFirstIteration = false;
     } else {
-      currentQuery = null;
+      break;
     }
   }
 }
@@ -36268,7 +36249,7 @@ async function startHandler(expertKey, query, options, handlerOptions) {
 // package.json
 var package_default = {
   name: "create-expert",
-  version: "0.0.29",
+  version: "0.0.31",
   description: "Create and modify Perstack expert definitions"};
 
 // bin/cli.ts