summaryrefslogtreecommitdiff
path: root/makima/frontend/src/components/directives
diff options
context:
space:
mode:
Diffstat (limited to 'makima/frontend/src/components/directives')
-rw-r--r--makima/frontend/src/components/directives/DocumentEditor.tsx266
-rw-r--r--makima/frontend/src/components/directives/DocumentTaskStream.tsx338
2 files changed, 559 insertions, 45 deletions
diff --git a/makima/frontend/src/components/directives/DocumentEditor.tsx b/makima/frontend/src/components/directives/DocumentEditor.tsx
index 40fccf1..d953d45 100644
--- a/makima/frontend/src/components/directives/DocumentEditor.tsx
+++ b/makima/frontend/src/components/directives/DocumentEditor.tsx
@@ -49,8 +49,34 @@ import {
// Constants
// =============================================================================
-const SAVE_COUNTDOWN_MS = 3000;
+/**
+ * Time between the user's last keystroke and the goal being persisted (which
+ * triggers the orchestrator to (re)plan). Longer when the directive is fresh
+ * so the user can think; shorter when the orchestrator is already running and
+ * we want changes to flow through quickly.
+ */
+const COUNTDOWN_FRESH_MS = 60_000;
+const COUNTDOWN_RUNNING_MS = 10_000;
+/** The countdown bar only appears once we're inside this many ms from firing. */
+const BAR_VISIBLE_MS = 10_000;
const SAVED_TOAST_MS = 1200;
+/** Debounce for writing the in-progress draft to localStorage (no backend hit). */
+const DRAFT_PERSIST_DEBOUNCE_MS = 250;
+const DRAFT_KEY = (directiveId: string) => `makima:directive-goal-draft:${directiveId}`;
+const LIVE_START_KEY = "makima:liveStartEnabled";
+
+function isLiveStartEnabled(): boolean {
+ if (typeof window === "undefined") return true;
+ const raw = window.localStorage.getItem(LIVE_START_KEY);
+ // Default: live start ON — preserves existing behaviour for users who never
+ // touch the toggle.
+ return raw === null ? true : raw === "true";
+}
+
+function setLiveStartEnabled(value: boolean) {
+ if (typeof window === "undefined") return;
+ window.localStorage.setItem(LIVE_START_KEY, value ? "true" : "false");
+}
// =============================================================================
// Editor theme — minimal, just enough so the rich-text plugin has something to
@@ -85,8 +111,10 @@ const editorTheme = {
*/
function SeedContentPlugin({
directive,
+ onDraftRestored,
}: {
directive: DirectiveWithSteps;
+ onDraftRestored: (draft: string) => void;
}) {
const [editor] = useLexicalComposerContext();
const seededIdRef = useRef<string | null>(null);
@@ -95,6 +123,22 @@ function SeedContentPlugin({
if (seededIdRef.current === directive.id) return;
seededIdRef.current = directive.id;
+ // If a localStorage draft exists for this directive, prefer it over the
+ // persisted goal so the user does not lose unsaved work after navigating
+ // away. The parent is told about the restored draft so its state machine
+ // can transition to "dirty" or "pending".
+ let initialGoal = directive.goal;
+ let restoredDraft: string | null = null;
+ try {
+ const stored = window.localStorage.getItem(DRAFT_KEY(directive.id));
+ if (stored !== null && stored !== directive.goal) {
+ initialGoal = stored;
+ restoredDraft = stored;
+ }
+ } catch {
+ /* localStorage may be unavailable; fall back to persisted goal */
+ }
+
editor.update(
() => {
const root = $getRoot();
@@ -107,8 +151,8 @@ function SeedContentPlugin({
// Paragraph: goal (editable).
const goalPara = $createParagraphNode();
- if (directive.goal.length > 0) {
- goalPara.append($createTextNode(directive.goal));
+ if (initialGoal.length > 0) {
+ goalPara.append($createTextNode(initialGoal));
}
root.append(goalPara);
@@ -121,7 +165,13 @@ function SeedContentPlugin({
},
{ tag: "history-merge" },
);
- }, [editor, directive.id, directive.title, directive.goal]);
+
+ if (restoredDraft !== null) {
+ // Defer so the parent's state update lands AFTER the editor's seeded
+ // content (avoids the GoalChangePlugin firing first and double-tracking).
+ queueMicrotask(() => onDraftRestored(restoredDraft!));
+ }
+ }, [editor, directive.id, directive.title, directive.goal, onDraftRestored]);
return null;
}
@@ -340,19 +390,36 @@ function EditorContextMenu({
// =============================================================================
interface SaveCountdownBarProps {
- state: "idle" | "pending" | "saving" | "saved" | "error";
+ state: "idle" | "dirty" | "pending" | "saving" | "saved" | "error";
remainingMs: number;
- totalMs: number;
+ liveStart: boolean;
+ orchestratorRunning: boolean;
+ onSaveNow: () => void;
onCancel: () => void;
+ onToggleLiveStart: (next: boolean) => void;
}
function SaveCountdownBar({
state,
remainingMs,
- totalMs,
+ liveStart,
+ orchestratorRunning,
+ onSaveNow,
onCancel,
+ onToggleLiveStart,
}: SaveCountdownBarProps) {
- if (state === "idle") return null;
+ // Visibility rules:
+ // - Always show when actually saving / saved / error (transient feedback).
+ // - Show when "dirty" if live-start is OFF (user must trigger save).
+ // - Show when "pending" only inside the last BAR_VISIBLE_MS so the user
+ // does not feel rushed during the long fresh countdown.
+ const visible =
+ state === "saving" ||
+ state === "saved" ||
+ state === "error" ||
+ (state === "dirty" && !liveStart) ||
+ (state === "pending" && remainingMs <= BAR_VISIBLE_MS);
+ if (!visible) return null;
let label: string;
let progressPct = 0;
@@ -360,8 +427,18 @@ function SaveCountdownBar({
if (state === "pending") {
const seconds = Math.max(0, Math.ceil(remainingMs / 1000));
- label = `Saving goal in ${seconds}s — press Esc or Undo to cancel.`;
- progressPct = Math.max(0, Math.min(100, (1 - remainingMs / totalMs) * 100));
+ label = orchestratorRunning
+ ? `Replanning in ${seconds}s — Esc/Undo cancels.`
+ : `Saving goal in ${seconds}s — Esc/Undo cancels.`;
+ progressPct = Math.max(
+ 0,
+ Math.min(100, (1 - remainingMs / BAR_VISIBLE_MS) * 100),
+ );
+ } else if (state === "dirty") {
+ label = orchestratorRunning
+ ? "Unsaved changes — saving will replan the directive."
+ : "Unsaved changes.";
+ progressPct = 0;
} else if (state === "saving") {
label = "Saving…";
progressPct = 100;
@@ -387,15 +464,36 @@ function SaveCountdownBar({
style={{ width: `${progressPct}%` }}
/>
</div>
- <div className="flex items-center justify-between px-4 py-1.5">
- <span className="text-[10px] font-mono">{label}</span>
- {state === "pending" && (
+ <div className="flex items-center gap-3 px-4 py-1.5">
+ <span className="text-[10px] font-mono flex-1 truncate">{label}</span>
+
+ {/* Live-start toggle is always shown so users can flip it from the bar. */}
+ <label className="flex items-center gap-1.5 text-[10px] font-mono text-[#7788aa] cursor-pointer select-none shrink-0">
+ <input
+ type="checkbox"
+ checked={liveStart}
+ onChange={(e) => onToggleLiveStart(e.target.checked)}
+ className="accent-[#75aafc]"
+ />
+ <span>Live start</span>
+ </label>
+
+ {(state === "dirty" || state === "pending") && (
+ <button
+ type="button"
+ onClick={onSaveNow}
+ className="text-[10px] font-mono text-emerald-300 hover:text-white border border-emerald-700/60 rounded px-2 py-0.5 shrink-0"
+ >
+ Save now
+ </button>
+ )}
+ {(state === "dirty" || state === "pending") && (
<button
type="button"
onClick={onCancel}
- className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5"
+ className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5 shrink-0"
>
- Cancel
+ Discard
</button>
)}
</div>
@@ -415,7 +513,7 @@ export interface DocumentEditorProps {
onPickUpOrders: () => Promise<unknown> | unknown;
}
-type SaveState = "idle" | "pending" | "saving" | "saved" | "error";
+type SaveState = "idle" | "dirty" | "pending" | "saving" | "saved" | "error";
export function DocumentEditor({
directive,
@@ -442,45 +540,66 @@ export function DocumentEditor({
[directive.id],
);
+ // ---- Live-start setting (localStorage-backed) -------------------------
+ const [liveStart, setLiveStartState] = useState<boolean>(isLiveStartEnabled);
+ const toggleLiveStart = useCallback((next: boolean) => {
+ setLiveStartEnabled(next);
+ setLiveStartState(next);
+ }, []);
+
// ---- Goal auto-save state machine --------------------------------------
+ const orchestratorRunning =
+ !!directive.orchestratorTaskId || !!directive.completionTaskId;
+ // Pick the right countdown based on whether we'd be restarting work.
+ const countdownMs = orchestratorRunning ? COUNTDOWN_RUNNING_MS : COUNTDOWN_FRESH_MS;
+
const [saveState, setSaveState] = useState<SaveState>("idle");
- const [remainingMs, setRemainingMs] = useState(SAVE_COUNTDOWN_MS);
+ const [remainingMs, setRemainingMs] = useState(countdownMs);
const pendingGoalRef = useRef<string>(directive.goal);
const timerRef = useRef<number | null>(null);
const tickRef = useRef<number | null>(null);
const deadlineRef = useRef<number>(0);
+ const draftDebounceRef = useRef<number | null>(null);
const editorRef = useRef<LexicalEditor | null>(null);
+ function cancelTimers() {
+ if (timerRef.current != null) {
+ window.clearTimeout(timerRef.current);
+ timerRef.current = null;
+ }
+ if (tickRef.current != null) {
+ window.clearInterval(tickRef.current);
+ tickRef.current = null;
+ }
+ }
+
// Reset state when switching directives.
useEffect(() => {
pendingGoalRef.current = directive.goal;
cancelTimers();
setSaveState("idle");
- setRemainingMs(SAVE_COUNTDOWN_MS);
+ setRemainingMs(countdownMs);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [directive.id]);
// If the persisted goal updated externally and matches the pending goal,
// settle the bar.
useEffect(() => {
- if (saveState === "pending" && pendingGoalRef.current === directive.goal) {
+ if (
+ (saveState === "pending" || saveState === "dirty") &&
+ pendingGoalRef.current === directive.goal
+ ) {
cancelTimers();
setSaveState("idle");
+ try {
+ window.localStorage.removeItem(DRAFT_KEY(directive.id));
+ } catch {
+ /* localStorage may be unavailable; ignore */
+ }
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [directive.goal]);
- function cancelTimers() {
- if (timerRef.current != null) {
- window.clearTimeout(timerRef.current);
- timerRef.current = null;
- }
- if (tickRef.current != null) {
- window.clearInterval(tickRef.current);
- tickRef.current = null;
- }
- }
-
const fireSave = useCallback(async () => {
const next = pendingGoalRef.current;
cancelTimers();
@@ -488,6 +607,11 @@ export function DocumentEditor({
try {
await onUpdateGoal(next);
setSaveState("saved");
+ try {
+ window.localStorage.removeItem(DRAFT_KEY(directive.id));
+ } catch {
+ /* ignore */
+ }
window.setTimeout(() => {
// Only fade if no new edit has reopened a pending state in the meantime.
setSaveState((s) => (s === "saved" ? "idle" : s));
@@ -500,13 +624,13 @@ export function DocumentEditor({
setSaveState((s) => (s === "error" ? "idle" : s));
}, 2500);
}
- }, [onUpdateGoal]);
+ }, [onUpdateGoal, directive.id]);
const startOrExtendCountdown = useCallback(() => {
cancelTimers();
- deadlineRef.current = Date.now() + SAVE_COUNTDOWN_MS;
+ deadlineRef.current = Date.now() + countdownMs;
setSaveState("pending");
- setRemainingMs(SAVE_COUNTDOWN_MS);
+ setRemainingMs(countdownMs);
tickRef.current = window.setInterval(() => {
const remaining = Math.max(0, deadlineRef.current - Date.now());
setRemainingMs(remaining);
@@ -514,18 +638,23 @@ export function DocumentEditor({
window.clearInterval(tickRef.current);
tickRef.current = null;
}
- }, 100);
+ }, 200);
timerRef.current = window.setTimeout(() => {
void fireSave();
- }, SAVE_COUNTDOWN_MS);
- }, [fireSave]);
+ }, countdownMs);
+ }, [fireSave, countdownMs]);
const cancelCountdown = useCallback(() => {
- if (saveState !== "pending") return;
+ if (saveState !== "pending" && saveState !== "dirty") return;
cancelTimers();
pendingGoalRef.current = directive.goal; // reset pending edit
setSaveState("idle");
- setRemainingMs(SAVE_COUNTDOWN_MS);
+ setRemainingMs(countdownMs);
+ try {
+ window.localStorage.removeItem(DRAFT_KEY(directive.id));
+ } catch {
+ /* ignore */
+ }
// Also revert the editor's goal paragraph back to the persisted value, so
// the user sees the rollback.
const editor = editorRef.current;
@@ -543,27 +672,61 @@ export function DocumentEditor({
{ tag: "history-merge" },
);
}
- }, [directive.goal, saveState]);
+ }, [directive.goal, directive.id, saveState, countdownMs]);
// Cleanup on unmount.
useEffect(() => {
- return cancelTimers;
+ return () => {
+ cancelTimers();
+ if (draftDebounceRef.current != null) {
+ window.clearTimeout(draftDebounceRef.current);
+ draftDebounceRef.current = null;
+ }
+ };
}, []);
const handleGoalChange = useCallback(
(goal: string) => {
pendingGoalRef.current = goal;
+
+ // 1. Always persist work-in-progress to localStorage (debounced) so
+ // leaving the page does not lose typing. This is independent of
+ // whether we will trigger a backend save.
+ if (draftDebounceRef.current != null) {
+ window.clearTimeout(draftDebounceRef.current);
+ }
+ draftDebounceRef.current = window.setTimeout(() => {
+ try {
+ if (goal === directive.goal) {
+ window.localStorage.removeItem(DRAFT_KEY(directive.id));
+ } else {
+ window.localStorage.setItem(DRAFT_KEY(directive.id), goal);
+ }
+ } catch {
+ /* localStorage may be unavailable / full; ignore */
+ }
+ draftDebounceRef.current = null;
+ }, DRAFT_PERSIST_DEBOUNCE_MS);
+
+ // 2. State-machine.
if (goal === directive.goal) {
// Edit reverted — cancel the countdown (if any).
- if (saveState === "pending") {
+ if (saveState === "pending" || saveState === "dirty") {
cancelTimers();
setSaveState("idle");
}
return;
}
- startOrExtendCountdown();
+
+ if (liveStart) {
+ startOrExtendCountdown();
+ } else {
+ // Manual mode: stay "dirty" until the user clicks Save now.
+ cancelTimers();
+ setSaveState("dirty");
+ }
},
- [directive.goal, saveState, startOrExtendCountdown],
+ [directive.goal, directive.id, liveStart, saveState, startOrExtendCountdown],
);
// ---- Right-click context menu -----------------------------------------
@@ -581,7 +744,17 @@ export function DocumentEditor({
<LexicalComposer key={directive.id} initialConfig={initialConfig}>
{/* Capture the editor ref via a tiny inline plugin */}
<EditorRefCapture editorRef={editorRef} />
- <SeedContentPlugin directive={directive} />
+ <SeedContentPlugin
+ directive={directive}
+ onDraftRestored={(draft) => {
+ pendingGoalRef.current = draft;
+ if (liveStart) {
+ startOrExtendCountdown();
+ } else {
+ setSaveState("dirty");
+ }
+ }}
+ />
<ReadOnlyTitlePlugin title={directive.title} />
<HistoryPlugin />
<GoalChangePlugin onGoalChange={handleGoalChange} />
@@ -614,8 +787,11 @@ export function DocumentEditor({
<SaveCountdownBar
state={saveState}
remainingMs={remainingMs}
- totalMs={SAVE_COUNTDOWN_MS}
+ liveStart={liveStart}
+ orchestratorRunning={orchestratorRunning}
+ onSaveNow={() => void fireSave()}
onCancel={cancelCountdown}
+ onToggleLiveStart={toggleLiveStart}
/>
{menu && (
diff --git a/makima/frontend/src/components/directives/DocumentTaskStream.tsx b/makima/frontend/src/components/directives/DocumentTaskStream.tsx
new file mode 100644
index 0000000..62c1a52
--- /dev/null
+++ b/makima/frontend/src/components/directives/DocumentTaskStream.tsx
@@ -0,0 +1,338 @@
+/**
+ * DocumentTaskStream — renders a running task's output as a flowing document
+ * (assistant prose, tool blocks) instead of the boxy log style of TaskOutput.
+ *
+ * Key differences from TaskOutput:
+ * - Document typography (serif-ish paragraphs, not monospace logs).
+ * - Interleaved with subtle marginalia for tool calls and results.
+ * - "Comment" footer interrupts the running task via sendTaskMessage —
+ * same backend wire as the existing input bar, just framed as a comment.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { SimpleMarkdown } from "../SimpleMarkdown";
+import {
+ useTaskSubscription,
+ type TaskOutputEvent,
+} from "../../hooks/useTaskSubscription";
+import { getTaskOutput, sendTaskMessage } from "../../lib/api";
+
+interface DocumentTaskStreamProps {
+ taskId: string;
+ /** Human label used as the document header (e.g. "orchestrator", step name) */
+ label: string;
+}
+
+export function DocumentTaskStream({ taskId, label }: DocumentTaskStreamProps) {
+ const [entries, setEntries] = useState<TaskOutputEvent[]>([]);
+ const [loading, setLoading] = useState(true);
+ const [isStreaming, setIsStreaming] = useState(false);
+ const [comment, setComment] = useState("");
+ const [sending, setSending] = useState(false);
+ const [sendError, setSendError] = useState<string | null>(null);
+ const containerRef = useRef<HTMLDivElement>(null);
+ const [autoScroll, setAutoScroll] = useState(true);
+
+ // Load historical output when the selected task changes.
+ useEffect(() => {
+ let cancelled = false;
+ setLoading(true);
+ setEntries([]);
+ setIsStreaming(false);
+ getTaskOutput(taskId)
+ .then((res) => {
+ if (cancelled) return;
+ const mapped: TaskOutputEvent[] = res.entries.map((e) => ({
+ taskId: e.taskId,
+ messageType: e.messageType,
+ content: e.content,
+ toolName: e.toolName,
+ toolInput: e.toolInput,
+ isError: e.isError,
+ costUsd: e.costUsd,
+ durationMs: e.durationMs,
+ isPartial: false,
+ }));
+ setEntries(mapped);
+ })
+ .catch((err) => {
+ if (cancelled) return;
+ // eslint-disable-next-line no-console
+ console.error("Failed to load task output history:", err);
+ })
+ .finally(() => {
+ if (!cancelled) setLoading(false);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [taskId]);
+
+ const handleOutput = useCallback((event: TaskOutputEvent) => {
+ if (event.isPartial) return;
+ setEntries((prev) => [...prev, event]);
+ setIsStreaming(true);
+ }, []);
+
+ const handleUpdate = useCallback((event: { status: string }) => {
+ if (
+ event.status === "completed" ||
+ event.status === "failed" ||
+ event.status === "cancelled"
+ ) {
+ setIsStreaming(false);
+ } else if (event.status === "running") {
+ setIsStreaming(true);
+ }
+ }, []);
+
+ useTaskSubscription({
+ taskId,
+ subscribeOutput: true,
+ onOutput: handleOutput,
+ onUpdate: handleUpdate,
+ });
+
+ // Auto-scroll while at bottom.
+ useEffect(() => {
+ if (autoScroll && containerRef.current) {
+ containerRef.current.scrollTop = containerRef.current.scrollHeight;
+ }
+ }, [entries, autoScroll]);
+
+ const handleScroll = useCallback(() => {
+ if (!containerRef.current) return;
+ const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+ const atBottom = scrollHeight - scrollTop - clientHeight < 80;
+ setAutoScroll(atBottom);
+ }, []);
+
+ const submitComment = useCallback(
+ async (e: React.FormEvent) => {
+ e.preventDefault();
+ const trimmed = comment.trim();
+ if (!trimmed || sending) return;
+ setSending(true);
+ setSendError(null);
+ // Show the comment immediately as a user-input entry.
+ setEntries((prev) => [
+ ...prev,
+ {
+ taskId,
+ messageType: "user_input",
+ content: trimmed,
+ isPartial: false,
+ },
+ ]);
+ try {
+ await sendTaskMessage(taskId, trimmed);
+ setComment("");
+ } catch (err) {
+ setSendError(
+ err instanceof Error ? err.message : "Failed to send comment",
+ );
+ window.setTimeout(() => setSendError(null), 5000);
+ } finally {
+ setSending(false);
+ }
+ },
+ [comment, sending, taskId],
+ );
+
+ return (
+ <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628]">
+ {/* Document body */}
+ <div
+ ref={containerRef}
+ onScroll={handleScroll}
+ className="flex-1 overflow-y-auto"
+ >
+ <div className="max-w-3xl mx-auto px-8 py-10 text-[#dbe7ff]">
+ <div className="flex items-center gap-3 mb-1">
+ <h1 className="text-[24px] font-medium text-white tracking-tight">
+ {label}
+ </h1>
+ {isStreaming && (
+ <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-400/10 border border-green-400/30 text-green-400 font-mono text-[10px] uppercase">
+ <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
+ Live
+ </span>
+ )}
+ </div>
+ <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide mb-8">
+ Live transcript — comments below are sent to the task as input.
+ </p>
+
+ {loading && entries.length === 0 ? (
+ <p className="text-[#556677] font-mono text-xs italic">
+ Loading transcript…
+ </p>
+ ) : entries.length === 0 ? (
+ <p className="text-[#556677] font-mono text-xs italic">
+ {isStreaming ? "Waiting for output…" : "No output yet."}
+ </p>
+ ) : (
+ <div className="space-y-4">
+ {entries.map((entry, idx) => (
+ <DocumentEntry key={idx} entry={entry} />
+ ))}
+ {isStreaming && (
+ <span className="inline-block w-2 h-4 bg-[#9bc3ff] animate-pulse align-baseline" />
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+
+ {/* Comment / interrupt footer */}
+ <div className="shrink-0 border-t border-dashed border-[rgba(117,170,252,0.25)] bg-[#091428]">
+ {sendError && (
+ <div className="px-6 py-1 bg-red-900/20 text-red-400 text-xs font-mono">
+ {sendError}
+ </div>
+ )}
+ <form
+ onSubmit={submitComment}
+ className="max-w-3xl mx-auto px-8 py-4 flex items-start gap-3"
+ >
+ <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide pt-2 shrink-0">
+ Comment
+ </span>
+ <textarea
+ value={comment}
+ onChange={(e) => setComment(e.target.value)}
+ onKeyDown={(e) => {
+ // ⌘/Ctrl-Enter submits.
+ if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+ void submitComment(e as unknown as React.FormEvent);
+ }
+ }}
+ placeholder={
+ isStreaming
+ ? "Add a comment to interrupt and redirect…"
+ : "Task is not streaming — comments will queue if accepted."
+ }
+ rows={2}
+ disabled={sending}
+ className="flex-1 bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566] resize-none"
+ />
+ <button
+ type="submit"
+ disabled={sending || !comment.trim()}
+ className="px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400 disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+ >
+ {sending ? "Sending…" : "Send"}
+ </button>
+ </form>
+ </div>
+ </div>
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Entry rendering — document-style, not log-style.
+// ---------------------------------------------------------------------------
+
+function DocumentEntry({ entry }: { entry: TaskOutputEvent }) {
+ switch (entry.messageType) {
+ case "user_input":
+ return (
+ <blockquote className="border-l-2 border-cyan-400/60 pl-4 py-1 italic text-cyan-200">
+ <span className="not-italic text-[10px] font-mono text-cyan-400 uppercase tracking-wide block mb-1">
+ You
+ </span>
+ {entry.content}
+ </blockquote>
+ );
+
+ case "assistant":
+ return (
+ <div className="leading-relaxed text-[14px]">
+ <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" />
+ </div>
+ );
+
+ case "system":
+ return (
+ <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide">
+ {entry.content}
+ </p>
+ );
+
+ case "tool_use":
+ return (
+ <p className="text-[11px] font-mono text-[#7788aa] flex items-center gap-2">
+ <span className="text-yellow-500">·</span>
+ <span className="text-[#75aafc]">{entry.toolName || "tool"}</span>
+ {firstLineOfInput(entry.toolInput) && (
+ <span className="text-[#445566] truncate">
+ {firstLineOfInput(entry.toolInput)}
+ </span>
+ )}
+ </p>
+ );
+
+ case "tool_result":
+ if (!entry.content) return null;
+ return (
+ <p className="text-[11px] font-mono pl-4">
+ <span className={entry.isError ? "text-red-400" : "text-emerald-400"}>
+ {entry.isError ? "✗" : "→"}
+ </span>{" "}
+ <span className="text-[#7788aa]">
+ {entry.content.split("\n")[0]}
+ {entry.content.includes("\n") && "…"}
+ </span>
+ </p>
+ );
+
+ case "result":
+ return (
+ <div className="border-t border-[rgba(117,170,252,0.15)] pt-3 mt-6">
+ <p className="text-[10px] font-mono text-emerald-400 uppercase tracking-wide mb-2">
+ Result
+ </p>
+ <div className="leading-relaxed text-[13px]">
+ <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" />
+ </div>
+ {(entry.costUsd !== undefined || entry.durationMs !== undefined) && (
+ <p className="text-[10px] font-mono text-[#556677] mt-2">
+ {entry.durationMs !== undefined &&
+ `Duration: ${(entry.durationMs / 1000).toFixed(1)}s`}
+ {entry.costUsd !== undefined && entry.durationMs !== undefined && " · "}
+ {entry.costUsd !== undefined &&
+ `Cost: $${entry.costUsd.toFixed(4)}`}
+ </p>
+ )}
+ </div>
+ );
+
+ case "error":
+ return (
+ <p className="border-l-2 border-red-400/60 pl-4 py-1 text-red-300 text-[13px]">
+ {entry.content}
+ </p>
+ );
+
+ default:
+ // Fall back to a quiet rendering for unknown message types so users
+ // still see the data, just inconspicuously.
+ if (!entry.content) return null;
+ return (
+ <p className="text-[11px] font-mono text-[#556677]">
+ {entry.content}
+ </p>
+ );
+ }
+}
+
+function firstLineOfInput(input?: Record<string, unknown>): string {
+ if (!input) return "";
+ // Common shapes — show the most informative single value.
+ for (const key of ["command", "file_path", "path", "url", "pattern", "query"]) {
+ const v = input[key];
+ if (typeof v === "string" && v.length > 0) {
+ return v.split("\n")[0].slice(0, 96);
+ }
+ }
+ return "";
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-21 04:19:35 +0000