drexler 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.7
+
+- Stabilized `/synergy` animation layout with fixed row budgeting, a capped centered event panel, and completion only at 100%.
+- Hardened interactive busy-state handling so input stays locked during active LLM requests and synergy events.
+- Added lifecycle and row-budget coverage for the animated synergy flow.
+
 ## 0.2.6
 
 - Upgraded `/synergy` into a rotating animated Ink event with staged reveals, progress, KPI tickers, and themed finale copy.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drexler",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "CLI chat with Drexler, a corporate-executive AI persona built on OpenRouter Gemma 4 31B.",
   "license": "MIT",
   "author": "showOS",

package/src/ui/App.tsx

@@ -167,6 +167,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const cursor = draft.cursor;
   const [streaming, setStreaming] = useState<string | null>(null);
   const [thinking, setThinking] = useState<string | null>(null);
+  const [requestInFlight, setRequestInFlight] = useState(false);
   const [synergyEvent, setSynergyEvent] = useState<ActiveSynergyEvent | null>(
     null,
   );
@@ -219,6 +220,8 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const streamTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const cancelledRef = useRef(false);
+  const requestInFlightRef = useRef(false);
+  const synergyActiveRef = useRef(false);
   const mountedRef = useRef(true);
   const exitingRef = useRef(false);
   const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -234,6 +237,18 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
       if (exitingRef.current) return;
       exitingRef.current = true;
       abortRef.current?.abort();
+      if (streamTimerRef.current !== null) {
+        clearTimeout(streamTimerRef.current);
+        streamTimerRef.current = null;
+      }
+      if (synergyTimerRef.current !== null) {
+        clearInterval(synergyTimerRef.current);
+        synergyTimerRef.current = null;
+      }
+      requestInFlightRef.current = false;
+      synergyActiveRef.current = false;
+      setRequestInFlight(false);
+      setSynergyEvent(null);
       setExitMsg(msg);
       exitTimerRef.current = setTimeout(() => exit(), 50);
     },
@@ -263,6 +278,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
 
     setThinking(null);
     setStreaming(null);
+    synergyActiveRef.current = true;
     setDeskStatus("idle");
     setDeskNotice("synergy event");
     setSynergyEvent({ event, frame });
@@ -282,7 +298,8 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
           synergyTimerRef.current = null;
         }
         setSynergyEvent(null);
-        setDeskNotice("synergy logged");
+        synergyActiveRef.current = false;
+        setDeskNotice("synergy complete");
         setWitticism(event.finalLine);
         addItem("system", event.transcriptLine);
       }
@@ -290,99 +307,109 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   }, [addItem]);
 
   const runLLM = useCallback(async (instruction?: string) => {
+    if (requestInFlightRef.current) return;
+    requestInFlightRef.current = true;
+    setRequestInFlight(true);
     const startedAt = Date.now();
-    setThinking(pick(THINKING_LINES));
-    setDeskStatus("idle");
-    setDeskNotice(null);
-    setFallbackModel(null);
-    streamBufRef.current = "";
-    setStreaming(null);
-    let firstToken = true;
-    abortRef.current = new AbortController();
-    let result: Awaited<ReturnType<typeof streamChat>> | undefined;
-    let caughtErr: unknown = null;
     try {
-      result = await streamChat({
-        apiKey: config.apiKey,
-        model,
-        fallbackModel: pickFallback(model),
-        messages: instruction
-          ? [
-              ...buildMessagesWithReminder(conversation),
-              { role: "system", content: instruction },
-            ]
-          : buildMessagesWithReminder(conversation),
-        onToken: (t) => {
-          if (!mountedRef.current) return;
-          if (firstToken) {
-            setThinking(null);
-            firstToken = false;
-          }
-          pushTokenToStream(t);
-        },
-        signal: abortRef.current.signal,
-        fetchFn,
-      });
-    } catch (err) {
-      caughtErr = err;
-    } finally {
-      if (streamTimerRef.current !== null) {
-        clearTimeout(streamTimerRef.current);
-        streamTimerRef.current = null;
+      setThinking(pick(THINKING_LINES));
+      setDeskStatus("idle");
+      setDeskNotice(null);
+      setFallbackModel(null);
+      streamBufRef.current = "";
+      setStreaming(null);
+      let firstToken = true;
+      abortRef.current = new AbortController();
+      let result: Awaited<ReturnType<typeof streamChat>> | undefined;
+      let caughtErr: unknown = null;
+      try {
+        result = await streamChat({
+          apiKey: config.apiKey,
+          model,
+          fallbackModel: pickFallback(model),
+          messages: instruction
+            ? [
+                ...buildMessagesWithReminder(conversation),
+                { role: "system", content: instruction },
+              ]
+            : buildMessagesWithReminder(conversation),
+          onToken: (t) => {
+            if (!mountedRef.current || exitingRef.current) return;
+            if (firstToken) {
+              setThinking(null);
+              firstToken = false;
+            }
+            pushTokenToStream(t);
+          },
+          signal: abortRef.current.signal,
+          fetchFn,
+        });
+      } catch (err) {
+        caughtErr = err;
+      } finally {
+        if (streamTimerRef.current !== null) {
+          clearTimeout(streamTimerRef.current);
+          streamTimerRef.current = null;
+        }
+        abortRef.current = null;
+      }
+      if (!mountedRef.current || exitingRef.current) return;
+      if (caughtErr) {
+        const msg = caughtErr instanceof Error ? caughtErr.message : String(caughtErr);
+        setThinking(null);
+        setStreaming(null);
+        addItem("system", `${STREAM_ERROR} [${msg}]`);
+        setDeskStatus("error");
+        setDeskNotice(msg);
+        setMsgCount(conversation.length);
+        return;
       }
-      abortRef.current = null;
-    }
-    if (!mountedRef.current) return;
-    if (caughtErr) {
-      const msg = caughtErr instanceof Error ? caughtErr.message : String(caughtErr);
       setThinking(null);
       setStreaming(null);
-      addItem("system", `${STREAM_ERROR} [${msg}]`);
-      setDeskStatus("error");
-      setDeskNotice(msg);
-      setMsgCount(conversation.length);
-      return;
-    }
-    setThinking(null);
-    setStreaming(null);
-    setLastLatencyMs(Date.now() - startedAt);
-    if (cancelledRef.current) {
-      cancelledRef.current = false;
-      if (result?.content) {
+      setLastLatencyMs(Date.now() - startedAt);
+      if (cancelledRef.current) {
+        cancelledRef.current = false;
+        if (result?.content) {
+          conversation.push("assistant", result.content);
+          addItem("assistant", result.content);
+        }
+        addItem("system", "(cancelled — Drexler taking lunch)");
+        setDeskNotice("response cancelled");
+      } else if (result?.ok) {
         conversation.push("assistant", result.content);
         addItem("assistant", result.content);
+        const notices: string[] = [];
+        if (result.fellBack) {
+          addItem("system", `(fell back to ${result.modelUsed})`);
+          notices.push(`fallback ${result.modelUsed}`);
+          setFallbackModel(result.modelUsed);
+        }
+        if (detectPersonaDrift(result.content)) {
+          addItem("system", `(persona drift detected — model used 'I')`);
+          notices.push("persona drift detected");
+        }
+        setDeskNotice(notices.length > 0 ? notices.join(" · ") : null);
+      } else if (result?.interrupted) {
+        conversation.push("assistant", result.content);
+        addItem("assistant", result.content);
+        addItem("system", "(stream interrupted — partial response saved)");
+        setDeskStatus("error");
+        setDeskNotice("stream interrupted; partial response saved");
+      } else {
+        const detail = result?.error ? ` [${result.error}]` : "";
+        addItem("system", `${STREAM_ERROR}${detail}`);
+        setDeskStatus("error");
+        setDeskNotice(result?.error ?? "stream error");
       }
-      addItem("system", "(cancelled — Drexler taking lunch)");
-      setDeskNotice("response cancelled");
-    } else if (result?.ok) {
-      conversation.push("assistant", result.content);
-      addItem("assistant", result.content);
-      const notices: string[] = [];
-      if (result.fellBack) {
-        addItem("system", `(fell back to ${result.modelUsed})`);
-        notices.push(`fallback ${result.modelUsed}`);
-        setFallbackModel(result.modelUsed);
-      }
-      if (detectPersonaDrift(result.content)) {
-        addItem("system", `(persona drift detected — model used 'I')`);
-        notices.push("persona drift detected");
+      setMsgCount(conversation.length);
+      setTokenCount(conversation.approximateTokens());
+      setWitticism(pick(WITTICISMS));
+    } finally {
+      requestInFlightRef.current = false;
+      if (mountedRef.current) {
+        setRequestInFlight(false);
       }
-      setDeskNotice(notices.length > 0 ? notices.join(" · ") : null);
-    } else if (result?.interrupted) {
-      conversation.push("assistant", result.content);
-      addItem("assistant", result.content);
-      addItem("system", "(stream interrupted — partial response saved)");
-      setDeskStatus("error");
-      setDeskNotice("stream interrupted; partial response saved");
-    } else {
-      const detail = result?.error ? ` [${result.error}]` : "";
-      addItem("system", `${STREAM_ERROR}${detail}`);
-      setDeskStatus("error");
-      setDeskNotice(result?.error ?? "stream error");
     }
-    setMsgCount(conversation.length);
-    setTokenCount(conversation.approximateTokens());
-    setWitticism(pick(WITTICISMS));
   }, [
     config,
     model,
@@ -465,6 +492,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
 
   const onSubmit = useCallback(
     async (raw: string) => {
+      if (requestInFlightRef.current || synergyActiveRef.current) return;
       const line = raw.trim();
       if (line === "") {
         addItem("system", EMPTY_NUDGE);
@@ -484,9 +512,15 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   );
 
   useInput((char, key) => {
-    if (streaming !== null || thinking !== null || synergyEvent !== null) {
+    const busy =
+      requestInFlightRef.current ||
+      synergyActiveRef.current ||
+      streaming !== null ||
+      thinking !== null ||
+      synergyEvent !== null;
+    if (busy) {
       if (key.escape) {
-        if (synergyEvent !== null) {
+        if (synergyActiveRef.current || synergyEvent !== null) {
           return;
         }
         cancelledRef.current = true;
@@ -659,10 +693,13 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
       if (synergyTimerRef.current !== null) {
         clearInterval(synergyTimerRef.current);
       }
+      requestInFlightRef.current = false;
+      synergyActiveRef.current = false;
     };
   }, []);
 
-  const isBusy = streaming !== null || thinking !== null || synergyEvent !== null;
+  const isBusy =
+    requestInFlight || streaming !== null || thinking !== null || synergyEvent !== null;
   const headerStatus = isBusy ? "streaming" : deskStatus;
   const visibleTranscriptRows = synergyEvent
     ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))

package/src/ui/SynergyEvent.tsx

@@ -15,6 +15,9 @@ export interface SynergyEventDefinition {
 }
 
 export const SYNERGY_EVENT_FRAMES = 28;
+const FULL_EVENT_WIDTH = 88;
+const FULL_EVENT_ROWS = 12;
+const FULL_EVENT_ART_ROWS = 4;
 
 export const SYNERGY_EVENTS: readonly SynergyEventDefinition[] = [
   {
@@ -67,7 +70,7 @@ export const SYNERGY_EVENTS: readonly SynergyEventDefinition[] = [
       "status: billable",
       "decision rights unclear",
     ],
-    finalLine: "Drexler approve synergy. Nobody ask what changed.",
+    finalLine: "Drexler approves synergy. Nobody asks what changed.",
     transcriptLine: "SYNERGY EVENT: boardroom siren produced measurable vibes.",
   },
   {
@@ -156,7 +159,10 @@ function stageAt(event: SynergyEventDefinition, frame: number): string {
 
 function visibleArt(event: SynergyEventDefinition, frame: number): readonly string[] {
   const progress = frameProgress(frame);
-  const count = Math.max(1, Math.ceil(progress * event.art.length));
+  const count = Math.max(
+    1,
+    Math.ceil(progress * Math.min(event.art.length, FULL_EVENT_ART_ROWS)),
+  );
   return event.art.slice(0, count);
 }
 
@@ -180,7 +186,7 @@ function SynergyEventInner({
   const t = useTheme();
   const safeWidth = Math.max(1, Math.floor(width));
   const progress = frameProgress(frame);
-  const done = progress >= 0.94;
+  const done = frame >= SYNERGY_EVENT_FRAMES - 1;
   const tiny = safeWidth < 38 || compact;
 
   if (tiny) {
@@ -196,70 +202,80 @@ function SynergyEventInner({
     );
   }
 
-  const innerWidth = Math.max(1, safeWidth - 4);
+  const panelWidth = Math.min(safeWidth, FULL_EVENT_WIDTH);
+  const innerWidth = Math.max(1, panelWidth - 4);
   const title = `${event.title} · ${event.subtitle}`;
   const progressWidth = Math.max(8, Math.min(34, innerWidth - 18));
   const progressPct = `${Math.round(progress * 100)
     .toString()
     .padStart(3, " ")}%`;
-  const artWidth = Math.max(1, innerWidth - 2);
+  const artWidth = Math.max(1, innerWidth - 4);
   const kpi = kpiAt(event, frame);
 
   return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor={done ? t.primaryLight : t.warning}
-      paddingX={1}
-      marginBottom={1}
-      width={safeWidth}
-      flexShrink={1}
-    >
-      <Box>
-        <Text color={t.warning} bold>
-          SYNERGY EVENT
-        </Text>
-        <Text color={t.primaryDim}> ─ </Text>
-        <Text color={t.dim} wrap="truncate">
-          {fitDisplayText(title, Math.max(1, innerWidth - 16))}
-        </Text>
-      </Box>
-      <Box marginTop={1} flexDirection="column">
-        {visibleArt(event, frame).map((line, idx) => (
-          <Text key={`${event.id}-${idx}`} color={t.primaryLight} wrap="truncate">
-            {fitDisplayText(line, artWidth)}
+    <Box width={safeWidth} justifyContent="center" flexShrink={1}>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={done ? t.primaryLight : t.warning}
+        paddingX={1}
+        width={panelWidth}
+        flexShrink={1}
+      >
+        <Box>
+          <Text color={t.warning} bold>
+            SYNERGY EVENT
           </Text>
-        ))}
-      </Box>
-      <Box marginTop={1}>
-        <Text color={t.primaryDim}>[</Text>
-        <Text color={done ? t.primaryLight : t.warning}>
-          {bar(progress, progressWidth)}
-        </Text>
-        <Text color={t.primaryDim}>] </Text>
-        <Text color={t.dim}>{progressPct}</Text>
-      </Box>
-      <Box>
-        <Text color={t.primaryLight} bold>
-          ◆{" "}
-        </Text>
-        <Text color={t.text} wrap="truncate">
-          {fitDisplayText(stageAt(event, frame), Math.max(1, innerWidth - 2))}
-        </Text>
-      </Box>
-      <Box>
-        <Text color={t.primaryDim}>ticker </Text>
-        <Text color={t.warning} wrap="truncate">
-          {fitDisplayText(kpi, Math.max(1, innerWidth - 7))}
-        </Text>
-      </Box>
-      {done ? (
-        <Box marginTop={1}>
-          <Text color={t.primaryLight} bold wrap="truncate">
-            {fitDisplayText(event.finalLine, innerWidth)}
+          <Text color={t.primaryDim}> ─ </Text>
+          <Text color={t.dim} wrap="truncate">
+            {fitDisplayText(title, Math.max(1, innerWidth - 18))}
           </Text>
         </Box>
-      ) : null}
+        <Box flexDirection="column">
+          {event.art.slice(0, FULL_EVENT_ART_ROWS).map((line, idx) => {
+            const revealed = idx < visibleArt(event, frame).length;
+            return (
+              <Text
+                key={`${event.id}-${idx}`}
+                color={revealed ? t.primaryLight : t.primaryDim}
+                wrap="truncate"
+              >
+                {revealed ? fitDisplayText(line, artWidth) : " "}
+              </Text>
+            );
+          })}
+        </Box>
+        <Box>
+          <Text color={t.primaryDim}>[</Text>
+          <Text color={done ? t.primaryLight : t.warning}>
+            {bar(progress, progressWidth)}
+          </Text>
+          <Text color={t.primaryDim}>] </Text>
+          <Text color={t.dim}>{progressPct}</Text>
+        </Box>
+        <Box>
+          <Text color={t.primaryLight} bold>
+            ◆{" "}
+          </Text>
+          <Text color={t.text} wrap="truncate">
+            {fitDisplayText(stageAt(event, frame), Math.max(1, innerWidth - 4))}
+          </Text>
+        </Box>
+        <Box>
+          <Text color={t.primaryDim}>ticker </Text>
+          <Text color={t.warning} wrap="truncate">
+            {fitDisplayText(kpi, Math.max(1, innerWidth - 9))}
+          </Text>
+        </Box>
+        <Box>
+          <Text color={done ? t.primaryLight : t.primaryDim} bold={done} wrap="truncate">
+            {fitDisplayText(
+              done ? event.finalLine : "awaiting committee approval...",
+              Math.max(1, innerWidth - 2),
+            )}
+          </Text>
+        </Box>
+      </Box>
     </Box>
   );
 }
@@ -268,7 +284,7 @@ export const SynergyEvent = memo(SynergyEventInner);
 
 export function synergyEventRows(width: number, compact = false): number {
   if (compact || width < 38) return 1;
-  return 12;
+  return FULL_EVENT_ROWS;
 }
 
 export function synergyEventMaxRowWidth(