agentic-orchestrator 0.1.27 → 0.2.0

package/packages/web-dashboard/src/components/focus/tabs/RuntimeTab.tsx

@@ -0,0 +1,213 @@
+import React, { useMemo, useState } from 'react';
+import { CheckpointScrubber } from '@/components/focus/CheckpointScrubber';
+import { LiveAgentConsole } from '@/components/focus/LiveAgentConsole';
+import { RuntimeInspectorPanel } from '@/components/features/runtime-inspector/RuntimeInspectorPanel';
+import { resolveActiveRole } from '@/lib/focus-detail-derivations.js';
+import type { FeatureDetail } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface RuntimeTabProps {
+  detail: FeatureDetail;
+  hasActiveRuntimeSession: boolean;
+  project: string;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  refreshDetail: (featureId: string) => Promise<void>;
+  refreshStatus: () => Promise<void>;
+}
+
+interface ActionResponse {
+  ok: boolean;
+  error?: { message?: string };
+}
+
+function latestRoleTelemetry(detail: FeatureDetail): Array<{
+  role: string;
+  provider: string;
+  model: string;
+  lastEventAt: string | null;
+}> {
+  const seen = new Set<string>();
+  const rows: Array<{ role: string; provider: string; model: string; lastEventAt: string | null }> =
+    [];
+  for (const entry of detail.worker_summary?.entries ?? []) {
+    if (seen.has(entry.role)) {
+      continue;
+    }
+    seen.add(entry.role);
+    rows.push({
+      role: entry.role,
+      provider: entry.provider,
+      model: entry.model,
+      lastEventAt: entry.ts,
+    });
+  }
+  return rows;
+}
+
+function formatTimestamp(value: string | null): string {
+  if (!value) {
+    return 'unknown';
+  }
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) {
+    return value;
+  }
+  return new Date(parsed).toLocaleString([], {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function RuntimeTab({
+  detail,
+  hasActiveRuntimeSession,
+  project,
+  addToast,
+  refreshDetail,
+  refreshStatus,
+}: RuntimeTabProps) {
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const executionMode = 'interactive';
+  const telemetry = useMemo(() => latestRoleTelemetry(detail), [detail]);
+  const activeRole = resolveActiveRole(detail) ?? 'unknown';
+
+  const sendMessage = async () => {
+    const trimmed = message.trim();
+    if (!trimmed || sending) {
+      return;
+    }
+    setSending(true);
+    try {
+      const response = await fetch(
+        `/api/actions${project ? `?project=${encodeURIComponent(project)}` : ''}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            action: 'feature.send_message',
+            feature_id: detail.feature.feature_id,
+            message: trimmed,
+          }),
+        },
+      );
+      const body = (await response.json()) as ActionResponse;
+      if (!body.ok) {
+        addToast(body.error?.message ?? 'Failed to send runtime message', 'error');
+        return;
+      }
+      addToast('Runtime message sent', 'success');
+      setMessage('');
+      await refreshStatus();
+      await refreshDetail(detail.feature.feature_id);
+    } catch {
+      addToast('Failed to send runtime message', 'error');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className={styles.focusTabStack}>
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>Runtime Summary</h3>
+            <p className={styles.metaText}>Current execution posture and latest worker activity.</p>
+          </div>
+          <span
+            className={`${styles.badge} ${hasActiveRuntimeSession ? styles.badgePass : styles.badgeNeutral}`}
+          >
+            {hasActiveRuntimeSession ? 'session active' : 'session inactive'}
+          </span>
+        </div>
+        <div className={styles.focusOverviewGrid}>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Execution Mode</span>
+            <strong className={styles.summaryMetricValue}>{executionMode}</strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Active Role</span>
+            <strong className={styles.summaryMetricValue}>{activeRole}</strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Last Event</span>
+            <strong className={styles.summaryMetricValue}>
+              {formatTimestamp(detail.worker_summary?.entries?.[0]?.ts ?? null)}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Activity State</span>
+            <strong className={styles.summaryMetricValue}>
+              {detail.feature.activity_state ?? 'unknown'}
+            </strong>
+          </div>
+        </div>
+        <div className={styles.reviewSessionRows}>
+          {telemetry.map((entry) => (
+            <div key={entry.role} className={styles.reviewSessionRow}>
+              <span>{entry.role}</span>
+              <strong>
+                {entry.provider} / {entry.model} · {formatTimestamp(entry.lastEventAt)}
+              </strong>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <LiveAgentConsole
+        featureId={detail.feature.feature_id}
+        project={project}
+        initialRole={
+          activeRole === 'planner' ||
+          activeRole === 'builder' ||
+          activeRole === 'qa' ||
+          activeRole === 'reconciler'
+            ? activeRole
+            : 'planner'
+        }
+      />
+
+      <section className={`${styles.section} ${styles.runtimeConsoleSection}`}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>Directed Agent Console</h3>
+            <p className={styles.metaText}>Send a message to the active feature runtime.</p>
+          </div>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>operator action</span>
+        </div>
+        <div className={styles.focusPinnedActionGrid}>
+          <textarea
+            className={styles.textarea}
+            rows={4}
+            value={message}
+            onChange={(event) => setMessage(event.target.value)}
+            placeholder="Send context or unblock instructions to the running feature"
+          />
+        </div>
+        <div className={styles.actionGrid}>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={sending || message.trim().length === 0}
+            onClick={() => void sendMessage()}
+          >
+            {sending ? 'Sending…' : 'Send to runtime'}
+          </button>
+        </div>
+      </section>
+
+      <RuntimeInspectorPanel featureId={detail.feature.feature_id} project={project} />
+
+      {detail.checkpoints && detail.checkpoints.length >= 2 ? (
+        <CheckpointScrubber
+          featureId={detail.feature.feature_id}
+          project={project}
+          checkpoints={detail.checkpoints}
+        />
+      ) : null}
+    </div>
+  );
+}

package/packages/web-dashboard/src/components/focus/tabs/TranscriptTab.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import type { AgentLogEntry, RawLogFileMeta } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface TranscriptTabProps {
+  entries?: AgentLogEntry[];
+  featureId: string;
+  project: string;
+}
+
+type TranscriptRoleFilter = 'all' | 'planner' | 'builder' | 'qa' | 'orchestrator';
+type TimeWindow = 'all' | '15m' | '1h';
+
+interface TranscriptTurn {
+  role: string;
+  actor: string;
+  started_at: string;
+  entries: AgentLogEntry[];
+}
+
+interface LogStreamPayload {
+  type: 'snapshot' | 'append' | 'heartbeat' | 'error';
+  cursor: string;
+  entries: AgentLogEntry[];
+  message?: string;
+}
+
+function groupTurns(entries: AgentLogEntry[]): TranscriptTurn[] {
+  const turns: TranscriptTurn[] = [];
+  for (const entry of entries) {
+    const current = turns[turns.length - 1];
+    if (current && current.role === entry.role) {
+      current.entries.push(entry);
+      continue;
+    }
+    turns.push({
+      role: entry.role,
+      actor: entry.actor,
+      started_at: entry.timestamp,
+      entries: [entry],
+    });
+  }
+  return turns;
+}
+
+function roleBadgeClass(role: string): string {
+  if (role === 'planner') {
+    return styles.rolePerformancePlanner;
+  }
+  if (role === 'builder') {
+    return styles.rolePerformanceBuilder;
+  }
+  if (role === 'qa') {
+    return styles.rolePerformanceQa;
+  }
+  return '';
+}
+
+function isRawLogRole(role: string): role is RawLogFileMeta['role'] {
+  return role === 'planner' || role === 'builder' || role === 'qa';
+}
+
+function renderRichText(text: string): JSX.Element[] {
+  const blocks = text.split('```');
+  return blocks.map((block, index) => {
+    if (index % 2 === 1) {
+      return (
+        <pre key={`${index}:${block.slice(0, 10)}`} className={styles.usageBurnOutput}>
+          {block.trim()}
+        </pre>
+      );
+    }
+    return (
+      <p key={`${index}:${block.slice(0, 10)}`} className={styles.transcriptText}>
+        {block.trim()}
+      </p>
+    );
+  });
+}
+
+async function downloadRawLog(
+  featureId: string,
+  project: string,
+  role: RawLogFileMeta['role'],
+): Promise<void> {
+  const suffix = projectQuery(project);
+  const joiner = suffix.length > 0 ? '&' : '?';
+  const listingResponse = await fetch(
+    `/api/features/${featureId}/raw-logs${suffix}${joiner}role=${role}&limit=1`,
+  );
+  const listing = (await listingResponse.json()) as {
+    ok: boolean;
+    data?: { enabled: boolean; files: RawLogFileMeta[] };
+  };
+  const filename = listing.data?.files?.[0]?.filename;
+  if (!listing.ok || !listing.data?.enabled || !filename) {
+    return;
+  }
+  const contentResponse = await fetch(
+    `/api/features/${featureId}/raw-logs/${filename}${projectQuery(project)}`,
+  );
+  const contentPayload = (await contentResponse.json()) as {
+    ok: boolean;
+    data?: { content: string };
+  };
+  if (!contentPayload.ok || typeof contentPayload.data?.content !== 'string') {
+    return;
+  }
+  const blob = new Blob([contentPayload.data.content], { type: 'text/plain;charset=utf-8' });
+  const url = window.URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  window.URL.revokeObjectURL(url);
+}
+
+function withinWindow(timestamp: string, window: TimeWindow): boolean {
+  if (window === 'all') {
+    return true;
+  }
+  const parsed = Date.parse(timestamp);
+  if (Number.isNaN(parsed)) {
+    return true;
+  }
+  const ageMs = Date.now() - parsed;
+  return window === '15m' ? ageMs <= 15 * 60_000 : ageMs <= 60 * 60_000;
+}
+
+export function TranscriptTab({ entries = [], featureId, project }: TranscriptTabProps) {
+  const [filter, setFilter] = useState<TranscriptRoleFilter>('all');
+  const [search, setSearch] = useState('');
+  const [timeWindow, setTimeWindow] = useState<TimeWindow>('all');
+  const [expandedTurns, setExpandedTurns] = useState<Record<string, boolean>>({});
+  const [streamEntries, setStreamEntries] = useState<AgentLogEntry[]>(entries);
+  const [followLive, setFollowLive] = useState(true);
+  const [streamError, setStreamError] = useState<string | null>(null);
+  const cursorRef = useRef<string>('0');
+
+  useEffect(() => {
+    setStreamEntries(entries);
+    cursorRef.current = '0';
+  }, [entries, featureId]);
+
+  useEffect(() => {
+    if (!followLive) {
+      return;
+    }
+    const params = new URLSearchParams();
+    params.set('cursor', cursorRef.current);
+    if (project.length > 0) {
+      params.set('project', project);
+    }
+    const eventSource = new EventSource(
+      `/api/features/${encodeURIComponent(featureId)}/log-stream?${params.toString()}`,
+    );
+    const onStreamEvent = (event: MessageEvent<string>) => {
+      let payload: LogStreamPayload;
+      try {
+        payload = JSON.parse(event.data) as LogStreamPayload;
+      } catch {
+        return;
+      }
+      if (payload.type === 'error') {
+        setStreamError(payload.message ?? 'Log stream warning');
+        return;
+      }
+      cursorRef.current = payload.cursor;
+      if (payload.entries.length === 0) {
+        return;
+      }
+      setStreamEntries((current) => [...current, ...payload.entries].slice(-200));
+    };
+
+    eventSource.addEventListener('snapshot', onStreamEvent as EventListener);
+    eventSource.addEventListener('append', onStreamEvent as EventListener);
+    eventSource.addEventListener('error', () => {
+      setStreamError('Disconnected from event stream');
+    });
+    return () => eventSource.close();
+  }, [featureId, followLive, project]);
+
+  const turns = useMemo(() => groupTurns(streamEntries), [streamEntries]);
+  const visibleTurns = useMemo(
+    () =>
+      turns.filter((turn) => {
+        if (filter !== 'all' && turn.role !== filter) {
+          return false;
+        }
+        if (!withinWindow(turn.started_at, timeWindow)) {
+          return false;
+        }
+        if (!search.trim()) {
+          return true;
+        }
+        const haystack =
+          `${turn.actor}\n${turn.entries.map((entry) => entry.text).join('\n')}`.toLowerCase();
+        return haystack.includes(search.trim().toLowerCase());
+      }),
+    [filter, search, timeWindow, turns],
+  );
+
+  return (
+    <div className={styles.focusTabStack}>
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <h3 className={styles.sectionTitle}>Transcript</h3>
+          <div className={styles.badgeRow}>
+            <span
+              className={`${styles.badge} ${followLive ? styles.badgePass : styles.badgeNeutral}`}
+            >
+              {followLive ? 'Follow live' : 'Paused'}
+            </span>
+            {streamError ? (
+              <span className={`${styles.badge} ${styles.badgeFail}`}>{streamError}</span>
+            ) : null}
+          </div>
+        </div>
+        <div className={styles.focusPinnedActionGrid}>
+          <input
+            className={styles.input}
+            placeholder="Search transcript"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+          <select
+            className={styles.actionSelect}
+            value={timeWindow}
+            onChange={(event) => setTimeWindow(event.target.value as TimeWindow)}
+          >
+            <option value="all">All time</option>
+            <option value="15m">Last 15m</option>
+            <option value="1h">Last hour</option>
+          </select>
+        </div>
+        <div className={styles.badgeRow}>
+          {(['all', 'planner', 'builder', 'qa', 'orchestrator'] as const).map((role) => (
+            <button
+              key={role}
+              type="button"
+              className={`${styles.focusTabButton} ${filter === role ? styles.focusTabButtonActive : ''}`}
+              onClick={() => setFilter(role)}
+            >
+              {role}
+            </button>
+          ))}
+          <button
+            type="button"
+            className={styles.linkButton}
+            onClick={() => setFollowLive((current) => !current)}
+          >
+            {followLive ? 'Pause live follow' : 'Resume live follow'}
+          </button>
+        </div>
+        {visibleTurns.length === 0 ? (
+          <p className={styles.metaText}>No transcript turns match the current filters.</p>
+        ) : (
+          <div className={styles.transcriptTurnList}>
+            {visibleTurns.map((turn, index) => {
+              const joinedText = turn.entries.map((entry) => entry.text).join('\n\n');
+              const lines = joinedText.split('\n');
+              const turnKey = `${turn.role}:${turn.started_at}:${index}`;
+              const expanded = expandedTurns[turnKey] === true;
+              const visibleText =
+                expanded || lines.length <= 40 ? joinedText : lines.slice(0, 20).join('\n');
+              const rawLogRole = isRawLogRole(turn.role) ? turn.role : null;
+              return (
+                <article
+                  key={turnKey}
+                  className={`${styles.section} ${styles.transcriptTurn} ${roleBadgeClass(turn.role)}`}
+                >
+                  <div className={styles.transcriptTurnHeader}>
+                    <div className={styles.rolePerformanceIdentity}>
+                      <span className={`${styles.badge} ${styles.badgeNeutral}`}>{turn.role}</span>
+                      <strong>{turn.actor}</strong>
+                    </div>
+                    <div className={styles.badgeRow}>
+                      <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+                        {turn.started_at}
+                      </span>
+                      {rawLogRole ? (
+                        <button
+                          type="button"
+                          className={styles.linkButton}
+                          onClick={() => void downloadRawLog(featureId, project, rawLogRole)}
+                        >
+                          Raw log
+                        </button>
+                      ) : null}
+                    </div>
+                  </div>
+                  <div className={styles.focusTabStack}>{renderRichText(visibleText)}</div>
+                  {lines.length > 40 ? (
+                    <button
+                      type="button"
+                      className={styles.linkButton}
+                      onClick={() =>
+                        setExpandedTurns((current) => ({ ...current, [turnKey]: !expanded }))
+                      }
+                    >
+                      {expanded ? 'Show less' : `Show ${lines.length - 20} more lines`}
+                    </button>
+                  ) : null}
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/packages/web-dashboard/src/components/gate-results.tsx

@@ -1,4 +1,4 @@
-import { getGateMap } from '@/lib/dashboard-utils.js';
+import { DISPLAYED_GATE_MODES, getGateMap } from '@/lib/dashboard-utils.js';
 import type { FeatureSummary } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
@@ -35,7 +35,7 @@ export function GateResults({ feature }: GateResultsProps) {
           </tr>
         </thead>
         <tbody>
-          {(['fast', 'full', 'merge'] as const).map((mode) => (
+          {DISPLAYED_GATE_MODES.map((mode) => (
             <tr key={mode}>
               <td>{mode}</td>
               <td>

package/packages/web-dashboard/src/components/human-input-panel.tsx

@@ -1,74 +1,50 @@
-import { useState } from 'react';
-import { projectQuery } from '@/lib/dashboard-utils.js';
+import React from 'react';
+import { FeatureQuestionAnswerPanel } from '@/components/focus/FeatureQuestionAnswerPanel';
+import type { FeatureQuestion } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
 interface HumanInputPanelProps {
   featureId: string;
   project: string;
-  onSent: () => Promise<void>;
+  questions: FeatureQuestion[];
+  onAnswered: () => Promise<void>;
   addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
 }
 
-export function HumanInputPanel({ featureId, project, onSent, addToast }: HumanInputPanelProps) {
-  const [message, setMessage] = useState('');
-  const [sending, setSending] = useState(false);
+export function HumanInputPanel({
+  featureId,
+  project,
+  questions,
+  onAnswered,
+  addToast,
+}: HumanInputPanelProps) {
+  const openQuestion = questions.find((item) => item.status === 'open') ?? null;
 
-  const send = async () => {
-    if (message.trim().length === 0 || sending) {
-      return;
-    }
-
-    setSending(true);
-    try {
-      const response = await fetch(`/api/actions${projectQuery(project)}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          action: 'feature.send_message',
-          feature_id: featureId,
-          message: message.trim(),
-        }),
-      });
-      const body = (await response.json()) as { ok: boolean; error?: { message?: string } };
-      if (!body.ok) {
-        addToast(body.error?.message ?? 'Failed to send answer', 'error');
-        return;
-      }
-
-      addToast('Answer sent', 'success');
-      setMessage('');
-      await onSent();
-    } catch {
-      addToast('Failed to send answer', 'error');
-    } finally {
-      setSending(false);
-    }
-  };
+  if (!openQuestion) {
+    return null;
+  }
 
   return (
     <div className={styles.section}>
       <div className={styles.banner}>Awaiting your input</div>
-      <label className={styles.label} htmlFor="human-input-message">
-        Response
-      </label>
-      <textarea
-        id="human-input-message"
-        className={styles.textarea}
-        placeholder="Type your response..."
-        rows={4}
-        value={message}
-        onChange={(event) => setMessage(event.target.value)}
+      <p className={styles.metaText}>
+        {openQuestion.role} requested input during {openQuestion.phase} at {openQuestion.created_at}
+      </p>
+      {openQuestion.intake_context ? (
+        <p className={styles.metaText}>
+          Intake: {openQuestion.intake_context.status} • bootstrap v
+          {openQuestion.intake_context.bootstrap_manifest_version ?? '-'} • verified v
+          {openQuestion.intake_context.verified_manifest_version ?? '-'} • open ambiguities{' '}
+          {openQuestion.intake_context.open_ambiguity_count}
+        </p>
+      ) : null}
+      <FeatureQuestionAnswerPanel
+        featureId={featureId}
+        project={project}
+        question={openQuestion}
+        onAnswered={onAnswered}
+        addToast={addToast}
       />
-      <button
-        type="button"
-        className={`${styles.button} ${styles.buttonSuccess}`}
-        onClick={() => {
-          void send();
-        }}
-        disabled={sending || message.trim().length === 0}
-      >
-        {sending ? 'Sending...' : 'Send Answer'}
-      </button>
     </div>
   );
 }

package/packages/web-dashboard/src/components/kanban-board.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { COLUMN_ORDER } from '@/lib/dashboard-utils.js';
 import type { FeatureSummary } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
@@ -18,6 +19,9 @@ function emptyStateMessage(phase: FeatureSummary['phase'], hasActiveFilters: boo
     return 'No features match current filters.';
   }
 
+  if (phase === 'intake') {
+    return 'No features are currently in requirements intake.';
+  }
   if (phase === 'planning') {
     return "Run `aop run --goal '...'` to start a feature.";
   }