agentic-orchestrator 0.1.28 → 0.2.1

package/packages/web-dashboard/src/components/dashboard/secondary-diagnostics-rail.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { CollisionQueue } from '@/components/collision-queue';
+import { DependencyChains } from '@/components/dependency-chains';
+import { LiveEventFeed } from '@/components/live-event-feed';
+import { LockResourceMap } from '@/components/lock-resource-map';
+import { RunHealthPanel } from '@/components/run-health-panel';
+import type { LiveFeedState } from '@/lib/live-feed.js';
+import type { DashboardStatusPayload, LockLease, RuntimeSession } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface SecondaryDiagnosticsRailProps {
+  runtime?: RuntimeSession;
+  nowMs: number;
+  locks: LockLease[];
+  dependencyChains: DashboardStatusPayload['dep_blocked'];
+  collisions: DashboardStatusPayload['index']['blocked_queue'];
+  liveFeed: LiveFeedState;
+  onToggleFeedPause: () => void;
+  onClearFeed: () => void;
+  onSelectFeature: (featureId: string) => void;
+}
+
+export function SecondaryDiagnosticsRail({
+  runtime,
+  nowMs,
+  locks,
+  dependencyChains = [],
+  collisions = [],
+  liveFeed,
+  onToggleFeedPause,
+  onClearFeed,
+  onSelectFeature,
+}: SecondaryDiagnosticsRailProps) {
+  return (
+    <aside className={styles.diagnosticsRail}>
+      <RunHealthPanel runtime={runtime} nowMs={nowMs} />
+      <LockResourceMap locks={locks} nowMs={nowMs} onSelectFeature={onSelectFeature} />
+      <DependencyChains chains={dependencyChains} onSelectFeature={onSelectFeature} />
+      <CollisionQueue queue={collisions} />
+      <LiveEventFeed
+        events={liveFeed.events}
+        paused={liveFeed.paused}
+        onTogglePause={onToggleFeedPause}
+        onClear={onClearFeed}
+      />
+    </aside>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/task-filter-bar.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FilterBar } from '@/components/filter-bar';
+import {
+  TASK_FILTER_OPTIONS,
+  type DashboardFilterState,
+  type QuickFilterKey,
+} from '@/lib/dashboard-utils.js';
+import styles from '@/styles/dashboard.module.css';
+import type { RefObject } from 'react';
+
+interface TaskFilterBarProps {
+  filters: DashboardFilterState;
+  onFiltersChange: (next: DashboardFilterState) => void;
+  onClearFilters: () => void;
+  onQuickFilter: (key: QuickFilterKey) => void;
+  searchInputRef: RefObject<HTMLInputElement>;
+}
+
+export function TaskFilterBar({
+  filters,
+  onFiltersChange,
+  onClearFilters,
+  onQuickFilter,
+  searchInputRef,
+}: TaskFilterBarProps) {
+  return (
+    <section className={styles.filterBar} aria-label="Task-first filters">
+      <div className={styles.filterRow}>
+        <input
+          ref={searchInputRef}
+          type="search"
+          className={styles.filterSearch}
+          placeholder="Search feature id or status"
+          value={filters.searchText}
+          onChange={(event) =>
+            onFiltersChange({
+              ...filters,
+              searchText: event.target.value,
+            })
+          }
+        />
+        <button
+          type="button"
+          className={`${styles.button} ${styles.buttonGhost}`}
+          onClick={onClearFilters}
+        >
+          Clear Filters
+        </button>
+      </div>
+
+      <div className={styles.filterGroup}>
+        {TASK_FILTER_OPTIONS.map((option) => {
+          const active = filters.quickFilter === option.key;
+          return (
+            <button
+              key={option.key}
+              type="button"
+              className={`${styles.filterToggle} ${active ? styles.filterToggleOn : ''}`}
+              onClick={() => onQuickFilter(option.key)}
+              aria-pressed={active}
+            >
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <details className={styles.advancedFilters}>
+        <summary className={styles.sectionSummary}>Advanced filters</summary>
+        <FilterBar filters={filters} onFiltersChange={onFiltersChange} />
+      </details>
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/triage-drawer.tsx

@@ -0,0 +1,455 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import type { FeatureTriageDetail } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface TriageDrawerProps {
+  detail: FeatureTriageDetail | null;
+  project: string;
+  onClose: () => void;
+  onAfterAction: () => Promise<void> | void;
+  addToast: (message: string, tone?: 'success' | 'error' | 'info') => void;
+}
+
+interface ActionResponse {
+  ok: boolean;
+  error?: { message?: string };
+  data?: {
+    handoff_started?: boolean;
+    resume_status?: string | null;
+    retry?: { retry_mode?: string };
+    auto_resume?: Record<string, unknown>;
+  };
+}
+
+export function TriageDrawer({
+  detail,
+  project,
+  onClose,
+  onAfterAction,
+  addToast,
+}: TriageDrawerProps) {
+  const [message, setMessage] = useState('');
+  const [questionAnswer, setQuestionAnswer] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  if (!detail) {
+    return (
+      <aside className={styles.triageDrawer}>
+        <div className={styles.panelPlaceholder}>Select a feature to open the triage drawer.</div>
+      </aside>
+    );
+  }
+
+  const focusHref = `/feature/${encodeURIComponent(detail.feature.feature_id)}${projectQuery(project)}`;
+  const activeQuestion =
+    detail.open_questions?.find((question) => question.status === 'open') ?? null;
+
+  const callAction = async (
+    action: string,
+    payload: Record<string, unknown> = {},
+  ): Promise<void> => {
+    if (submitting) {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const response = await fetch(`/api/actions${projectQuery(project)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          action,
+          feature_id: detail.feature.feature_id,
+          ...payload,
+        }),
+      });
+      const body = (await response.json()) as ActionResponse;
+      if (!body.ok) {
+        addToast(body.error?.message ?? 'Action failed', 'error');
+        return;
+      }
+      if (action === 'feature.send_message' || action === 'review.request_changes') {
+        setMessage('');
+      }
+      addToast(
+        action === 'review.approve' && body.data?.handoff_started
+          ? 'Merge conflict handed to the reconciler'
+          : action === 'feature.retry' && body.data?.auto_resume
+            ? `Retry applied (${body.data.retry?.retry_mode ?? 'unknown'}). Execution resumed.`
+            : action === 'feature.retry' && body.data?.retry
+              ? `Retry applied (${body.data.retry?.retry_mode ?? 'unknown'}). Awaiting resume.`
+              : 'Action applied',
+        'success',
+      );
+      await onAfterAction();
+    } catch {
+      addToast('Action failed', 'error');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const answerQuestion = async (): Promise<void> => {
+    if (!activeQuestion || questionAnswer.trim().length === 0 || submitting) {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const response = await fetch(
+        `/api/features/${detail.feature.feature_id}/questions/${activeQuestion.question_id}/answer${projectQuery(project)}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            answer: questionAnswer.trim(),
+            answered_by: 'dashboard:triage',
+          }),
+        },
+      );
+      const body = (await response.json()) as ActionResponse;
+      if (!body.ok) {
+        addToast(body.error?.message ?? 'Failed to answer question', 'error');
+        return;
+      }
+      setQuestionAnswer('');
+      addToast(
+        body.data?.resume_status === 'intake'
+          ? 'Answer sent. Feature queued to resume intake.'
+          : 'Answer sent. Feature queued to resume execution.',
+        'success',
+      );
+      await onAfterAction();
+    } catch {
+      addToast('Failed to answer question', 'error');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const approveState = detail.actions?.approve;
+  const runMergeGateState = detail.actions?.run_merge_gate;
+  const denyState = detail.actions?.deny;
+  const requestChangesState = detail.actions?.request_changes;
+  const retryState = detail.actions?.retry;
+  const resumeState = detail.actions?.resume;
+  const sendState = detail.actions?.send_message;
+  const recoveryAction =
+    detail.feature.phase === 'blocked'
+      ? {
+          label: 'Retry',
+          state: retryState,
+          action: 'feature.retry' as const,
+        }
+      : {
+          label: 'Resume',
+          state: resumeState,
+          action: 'feature.resume' as const,
+        };
+
+  return (
+    <aside className={styles.triageDrawer}>
+      <div className={styles.panelHeader}>
+        <div>
+          <h2 className={styles.panelTitle}>{detail.feature.feature_id}</h2>
+          <p className={styles.metaText}>
+            {detail.feature.client_status_label ?? detail.feature.status}
+          </p>
+        </div>
+        <button type="button" className={styles.closeButton} onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className={styles.badgeRow}>
+        {(detail.why_attention.length > 0 ? detail.why_attention : ['Stable']).map((reason) => (
+          <span key={reason} className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {reason}
+          </span>
+        ))}
+      </div>
+
+      {detail.blocker_summary ? <p className={styles.metaText}>{detail.blocker_summary}</p> : null}
+
+      {detail.open_questions && detail.open_questions.length > 0 ? (
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Open Questions ({detail.open_questions.length})</h3>
+          {detail.open_questions.map((question) => {
+            const questionResumeTarget =
+              question.resume_phase ?? question.resume_status ?? question.phase ?? null;
+            return (
+              <div key={question.question_id}>
+                <p className={styles.metaText}>
+                  {question.role} • {question.phase}
+                </p>
+                <p className={styles.metaText}>{question.prompt}</p>
+                {question.expected_answer?.choices?.length ? (
+                  <p className={styles.metaText}>
+                    Choices: {question.expected_answer.choices.join(', ')}
+                  </p>
+                ) : null}
+                {questionResumeTarget ? (
+                  <p className={styles.metaText}>Resume target: {questionResumeTarget}</p>
+                ) : null}
+                {question.ambiguity_id ? (
+                  <p className={styles.metaText}>Ambiguity: {question.ambiguity_id}</p>
+                ) : null}
+                {question.obligation_ids && question.obligation_ids.length > 0 ? (
+                  <p className={styles.metaText}>
+                    Obligations: {question.obligation_ids.join(', ')}
+                  </p>
+                ) : null}
+                {question.intake_context ? (
+                  <p className={styles.metaText}>
+                    Intake: {question.intake_context.status} • bootstrap v
+                    {question.intake_context.bootstrap_manifest_version ?? '-'} • verified v
+                    {question.intake_context.verified_manifest_version ?? '-'} • open ambiguities{' '}
+                    {question.intake_context.open_ambiguity_count}
+                  </p>
+                ) : null}
+              </div>
+            );
+          })}
+          {activeQuestion ? (
+            <>
+              <label className={styles.label} htmlFor="triage-question-answer">
+                Answer Question
+              </label>
+              {activeQuestion.expected_answer?.choices?.length ? (
+                <div className={styles.inlineActions}>
+                  {activeQuestion.expected_answer.choices.map((choice) => (
+                    <button
+                      key={choice}
+                      type="button"
+                      className={styles.button}
+                      disabled={submitting}
+                      onClick={() => setQuestionAnswer(choice)}
+                    >
+                      {choice}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+              <textarea
+                id="triage-question-answer"
+                className={styles.textarea}
+                rows={3}
+                value={questionAnswer}
+                onChange={(event) => setQuestionAnswer(event.target.value)}
+                placeholder="Answer the blocking question"
+              />
+              <div className={styles.inlineActions}>
+                <button
+                  type="button"
+                  className={`${styles.button} ${styles.buttonSuccess}`}
+                  disabled={submitting || questionAnswer.trim().length === 0}
+                  onClick={() => {
+                    void answerQuestion();
+                  }}
+                >
+                  {submitting ? 'Sending...' : 'Send Answer'}
+                </button>
+              </div>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+
+      {detail.dependency_summary && detail.dependency_summary.length > 0 ? (
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Dependencies</h3>
+          <p className={styles.metaText}>{detail.dependency_summary.join(', ')}</p>
+        </div>
+      ) : null}
+
+      {detail.intake ? (
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Intake</h3>
+          <p className={styles.metaText}>
+            Status: {detail.intake.summary.status} • bootstrap v
+            {detail.intake.summary.bootstrap_manifest_version ?? '-'} • verified v
+            {detail.intake.summary.verified_manifest_version ?? '-'}
+          </p>
+          <p className={styles.metaText}>
+            Open ambiguities: {detail.intake.summary.open_ambiguity_count}
+          </p>
+          {detail.intake.summary.promotion_basis ? (
+            <p className={styles.metaText}>
+              Promotion basis: {detail.intake.summary.promotion_basis}
+            </p>
+          ) : null}
+          {detail.intake.review ? (
+            <p className={styles.metaText}>
+              Review: {detail.intake.review.status ?? 'unknown'} • questions open{' '}
+              {detail.intake.review.questions_open} • resolved{' '}
+              {detail.intake.review.questions_resolved}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>Review Snapshot</h3>
+        <p className={styles.metaText}>CI: {detail.review_snapshot?.ci_status ?? '-'}</p>
+        <p className={styles.metaText}>
+          Review: {detail.review_snapshot?.review_decision ?? 'No review decision yet'}
+        </p>
+        <p className={styles.metaText}>
+          Merge ready: {detail.review_snapshot?.merge_ready ? 'Yes' : 'Not yet'}
+        </p>
+      </div>
+
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>Usage</h3>
+        {detail.usage?.availability === 'unavailable' ? (
+          <p className={styles.metaText}>Token usage data is not available for this provider.</p>
+        ) : (
+          <>
+            <p className={styles.metaText}>
+              Tokens:{' '}
+              {(detail.usage?.tokens_used ?? detail.feature.usage_tokens ?? 0).toLocaleString(
+                'en-US',
+              )}
+              {detail.usage?.availability === 'estimated' ? ' (estimated)' : ''}
+            </p>
+            {typeof detail.usage?.budget_limit_tokens === 'number' ? (
+              <p className={styles.metaText}>
+                Budget: {detail.usage.budget_limit_tokens.toLocaleString('en-US')} tokens
+              </p>
+            ) : null}
+            {typeof detail.usage?.derived_cost_usd === 'number' ? (
+              <p className={styles.metaText}>
+                Derived USD: ${detail.usage.derived_cost_usd.toFixed(2)}
+              </p>
+            ) : null}
+          </>
+        )}
+        {detail.usage?.by_role && detail.usage.by_role.length > 0 ? (
+          <div>
+            {detail.usage.by_role.map((entry) => (
+              <p key={`${entry.role}-${entry.provider}`} className={styles.metaText}>
+                {entry.role}:{' '}
+                {entry.total_tokens !== null ? entry.total_tokens.toLocaleString('en-US') : '-'}{' '}
+                tokens ({entry.status})
+              </p>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>Next Actions</h3>
+        <div className={styles.inlineActions}>
+          <Link href={focusHref} className={styles.linkButton}>
+            Open Focus View
+          </Link>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={
+              !recoveryAction.state?.enabled || !recoveryAction.state?.authorized || submitting
+            }
+            title={recoveryAction.state?.reason ?? undefined}
+            onClick={() => {
+              void callAction(recoveryAction.action);
+            }}
+          >
+            {recoveryAction.label}
+          </button>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={!runMergeGateState?.enabled || !runMergeGateState?.authorized || submitting}
+            title={runMergeGateState?.reason ?? undefined}
+            onClick={() => {
+              void callAction('review.run_merge_gate');
+            }}
+          >
+            Run Merge Gate
+          </button>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={!approveState?.enabled || !approveState?.authorized || submitting}
+            title={approveState?.reason ?? undefined}
+            onClick={() => {
+              const approvalToken = window.prompt('Approval token');
+              if (!approvalToken) {
+                return;
+              }
+              void callAction('review.approve', { approval_token: approvalToken });
+            }}
+          >
+            Approve
+          </button>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={!denyState?.enabled || !denyState?.authorized || submitting}
+            title={denyState?.reason ?? undefined}
+            onClick={() => {
+              const reason = window.prompt('Deny reason');
+              if (!reason) {
+                return;
+              }
+              void callAction('review.deny', { reason });
+            }}
+          >
+            Deny
+          </button>
+        </div>
+        {recoveryAction.state?.reason ? (
+          <p className={styles.metaText}>{recoveryAction.state.reason}</p>
+        ) : null}
+
+        <label className={styles.label} htmlFor="triage-message">
+          Message / request changes
+        </label>
+        <textarea
+          id="triage-message"
+          className={styles.textarea}
+          rows={3}
+          value={message}
+          onChange={(event) => setMessage(event.target.value)}
+          placeholder="Add context for the worker session"
+        />
+        <div className={styles.inlineActions}>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={
+              !sendState?.enabled ||
+              !sendState?.authorized ||
+              message.trim().length === 0 ||
+              submitting
+            }
+            title={sendState?.reason ?? undefined}
+            onClick={() => {
+              void callAction('feature.send_message', { message: message.trim() });
+            }}
+          >
+            Send Message
+          </button>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={
+              !requestChangesState?.enabled ||
+              !requestChangesState?.authorized ||
+              message.trim().length === 0 ||
+              submitting
+            }
+            title={requestChangesState?.reason ?? undefined}
+            onClick={() => {
+              void callAction('review.request_changes', { message: message.trim() });
+            }}
+          >
+            Request Changes
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/packages/web-dashboard/src/components/diff-viewer.tsx

@@ -1,8 +1,11 @@
+import React from 'react';
 import { parseUnifiedDiff } from '@/lib/dashboard-utils.js';
 import styles from '@/styles/dashboard.module.css';
 
 interface DiffViewerProps {
   diff: string;
+  fileFilter?: string | null;
+  onInspectFile?: ((path: string) => void) | null;
 }
 
 function lineClass(type: 'add' | 'del' | 'context' | 'meta'): string {
@@ -18,8 +21,10 @@ function lineClass(type: 'add' | 'del' | 'context' | 'meta'): string {
   return styles.diffLineContext;
 }
 
-export function DiffViewer({ diff }: DiffViewerProps) {
-  const files = parseUnifiedDiff(diff);
+export function DiffViewer({ diff, fileFilter = null, onInspectFile = null }: DiffViewerProps) {
+  const files = parseUnifiedDiff(diff).filter(
+    (file) => !fileFilter || file.filePath === fileFilter,
+  );
 
   if (files.length === 0) {
     return (
@@ -36,7 +41,18 @@ export function DiffViewer({ diff }: DiffViewerProps) {
       <div className={styles.diffContainer}>
         {files.map((file) => (
           <article key={`${file.filePath}:${file.header}`}>
-            <header className={styles.diffFileHeader}>{file.filePath}</header>
+            <header className={styles.diffFileHeader}>
+              <span className={styles.wrapAnywhere}>{file.filePath}</span>
+              {onInspectFile ? (
+                <button
+                  type="button"
+                  className={styles.linkButton}
+                  onClick={() => onInspectFile(file.filePath)}
+                >
+                  Inspect
+                </button>
+              ) : null}
+            </header>
             {file.hunks.map((hunk) => (
               <div key={`${file.filePath}:${hunk.header}`}>
                 <div className={`${styles.diffLine} ${styles.diffHunkHeader}`}>