agentic-orchestrator 0.1.27 → 0.2.0

package/packages/web-dashboard/src/components/launch/launch-draft-card.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import React from 'react';
+import styles from '@/styles/dashboard.module.css';
+
+export interface LaunchDraftCardState {
+  draft_id: string;
+  source_type: 'upload' | 'paste';
+  name: string;
+  markdown: string;
+  source_path?: string | null;
+  feature_id: string | null;
+  canonical_spec_path: string | null;
+  preview_html: string;
+  preview_mode: 'rendered' | 'fallback';
+  warnings: string[];
+  errors: string[];
+  last_request_id?: string | null;
+}
+
+interface LaunchDraftCardProps {
+  draft: LaunchDraftCardState;
+  submitting: boolean;
+  onChange: (draftId: string, field: 'name' | 'markdown', value: string) => void;
+  onRemove: (draftId: string) => void;
+  onSubmit: (draftId: string) => void;
+}
+
+export function LaunchDraftCard({
+  draft,
+  submitting,
+  onChange,
+  onRemove,
+  onSubmit,
+}: LaunchDraftCardProps) {
+  const canSubmit = draft.errors.length === 0 && draft.markdown.trim().length > 0 && !submitting;
+
+  return (
+    <article className={styles.launchDraftCard}>
+      <div className={styles.panelHeader}>
+        <div>
+          <h2 className={styles.panelTitle}>{draft.name}</h2>
+          <p className={styles.metaText}>
+            {draft.feature_id ? `Feature ${draft.feature_id}` : 'Feature id pending preview'}
+          </p>
+        </div>
+        <div className={styles.inlineActions}>
+          <button
+            type="button"
+            className={styles.button}
+            onClick={() => onSubmit(draft.draft_id)}
+            disabled={!canSubmit}
+          >
+            {submitting ? 'Submitting...' : 'Submit Draft'}
+          </button>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.buttonGhost}`}
+            onClick={() => onRemove(draft.draft_id)}
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.launchDraftGrid}>
+        <div className={styles.section}>
+          <label className={styles.label} htmlFor={`launch-name-${draft.draft_id}`}>
+            Draft name
+          </label>
+          <input
+            id={`launch-name-${draft.draft_id}`}
+            className={styles.input}
+            value={draft.name}
+            onChange={(event) => onChange(draft.draft_id, 'name', event.target.value)}
+          />
+
+          <label className={styles.label} htmlFor={`launch-markdown-${draft.draft_id}`}>
+            Markdown
+          </label>
+          <textarea
+            id={`launch-markdown-${draft.draft_id}`}
+            className={styles.textarea}
+            rows={18}
+            value={draft.markdown}
+            onChange={(event) => onChange(draft.draft_id, 'markdown', event.target.value)}
+            placeholder="# Feature name"
+          />
+        </div>
+
+        <div className={styles.section}>
+          <div className={styles.badgeRow}>
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+              {draft.preview_mode === 'fallback' ? 'Fallback Preview' : 'Rendered Preview'}
+            </span>
+            {draft.canonical_spec_path ? (
+              <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+                {draft.canonical_spec_path}
+              </span>
+            ) : null}
+            {draft.last_request_id ? (
+              <span className={`${styles.badge} ${styles.badgePass}`}>
+                Request {draft.last_request_id}
+              </span>
+            ) : null}
+          </div>
+
+          {draft.errors.length > 0 ? (
+            <div className={styles.banner}>
+              {draft.errors.map((error) => (
+                <p key={error}>{error}</p>
+              ))}
+            </div>
+          ) : null}
+          {draft.warnings.length > 0 ? (
+            <div className={styles.banner}>
+              {draft.warnings.map((warning) => (
+                <p key={warning}>{warning}</p>
+              ))}
+            </div>
+          ) : null}
+
+          <div
+            className={`${styles.launchPreview} ${styles.markdownPreview}`}
+            dangerouslySetInnerHTML={{ __html: draft.preview_html }}
+          />
+        </div>
+      </div>
+    </article>
+  );
+}

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

@@ -1,93 +1,171 @@
+import React from 'react';
+import type { FeaturePlanningWorkspace, PlanProgressTaskSummary } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
 interface PlanViewerProps {
-  plan: Record<string, unknown> | null;
+  plan: FeaturePlanningWorkspace['accepted_plan_summary'];
+  planVersion: number | null;
+  status: FeaturePlanningWorkspace['status'];
+  emptyReason: string | null;
 }
 
-interface PlanTask {
-  description: string;
-  status: string;
-}
-
-function parseTasks(raw: unknown): PlanTask[] {
-  if (!Array.isArray(raw)) {
-    return [];
+function statusBadge(status: string): string {
+  const normalized = status.toLowerCase();
+  if (normalized === 'done' || normalized === 'completed') {
+    return `${styles.badge} ${styles.badgePass}`;
   }
-
-  const tasks: PlanTask[] = [];
-  for (const item of raw) {
-    if (!item || typeof item !== 'object') {
-      continue;
-    }
-    const task = item as Record<string, unknown>;
-    const descriptionRaw = task.description;
-    const statusRaw = task.status;
-    tasks.push({
-      description: typeof descriptionRaw === 'string' ? descriptionRaw : '(no description)',
-      status: typeof statusRaw === 'string' ? statusRaw : 'pending',
-    });
+  if (normalized === 'blocked') {
+    return `${styles.badge} ${styles.badgeFail}`;
+  }
+  if (normalized === 'in_progress' || normalized === 'running') {
+    return `${styles.badge} ${styles.badgePending}`;
   }
-  return tasks;
+  return `${styles.badge} ${styles.badgeNeutral}`;
 }
 
-function parseStringArray(raw: unknown): string[] {
-  if (!Array.isArray(raw)) {
-    return [];
+function summarizeTask(task: PlanProgressTaskSummary): string {
+  const owner = task.owner_role ? `${task.owner_role}` : 'unassigned';
+  return task.blocked_by && task.blocked_by.length > 0
+    ? `${owner} · blocked by ${task.blocked_by.join(', ')}`
+    : owner;
+}
+
+function emptyHeadline(status: FeaturePlanningWorkspace['status']): string {
+  if (status === 'blocked') {
+    return 'No accepted execution plan yet';
+  }
+  if (status === 'ready_to_plan' || status === 'not_started') {
+    return 'No accepted execution plan yet';
   }
-  return raw.filter((item): item is string => typeof item === 'string');
+  return 'Accepted execution plan pending';
 }
 
-export function PlanViewer({ plan }: PlanViewerProps) {
+export function PlanViewer({ plan, planVersion, status, emptyReason }: PlanViewerProps) {
   if (!plan) {
     return (
-      <div className={styles.section}>
-        <h3 className={styles.sectionTitle}>Plan</h3>
-        <p className={styles.metaText}>No plan available.</p>
-      </div>
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>{emptyHeadline(status)}</h3>
+            <p className={styles.metaText}>
+              {emptyReason ?? 'Planning has not produced an accepted execution contract yet.'}
+            </p>
+          </div>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {status.replace(/_/g, ' ')}
+          </span>
+        </div>
+      </section>
     );
   }
 
-  const goal = typeof plan.goal === 'string' ? plan.goal : '-';
-  const gateProfile = typeof plan.gate_profile === 'string' ? plan.gate_profile : '-';
-  const planVersion =
-    typeof plan.plan_version === 'number' || typeof plan.plan_version === 'string'
-      ? String(plan.plan_version)
-      : '-';
-  const tasks = parseTasks(plan.tasks);
-  const files = parseStringArray(plan.files);
-
   return (
     <details className={styles.section} open>
-      <summary className={styles.sectionSummary}>Plan</summary>
-      <p className={styles.metaText}>Goal: {goal}</p>
-      <p className={styles.metaText}>Gate profile: {gateProfile}</p>
-      <p className={styles.metaText}>Plan version: {planVersion}</p>
-      <p className={styles.metaText}>Affected files: {files.length}</p>
+      <summary className={styles.collapsibleSummary}>
+        <div className={styles.collapsibleSummaryTitleGroup}>
+          <span className={styles.collapsibleSummaryHeading}>Accepted Execution Plan</span>
+          <p className={styles.collapsibleSummaryDetail}>
+            {plan.summary ?? 'No plan summary was recorded.'}
+          </p>
+        </div>
+        <div className={styles.collapsibleSummaryMeta}>
+          {planVersion != null ? (
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>v{planVersion}</span>
+          ) : null}
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {plan.tasks.length} task{plan.tasks.length === 1 ? '' : 's'}
+          </span>
+        </div>
+      </summary>
+
+      <div className={styles.collapsibleBody}>
+        <div className={styles.focusOverviewGrid}>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Acceptance Criteria</span>
+            <strong className={styles.summaryMetricValue}>{plan.acceptance_criteria.length}</strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Scoped Files</span>
+            <strong className={styles.summaryMetricValue}>{plan.scoped_files.length}</strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Risks</span>
+            <strong className={styles.summaryMetricValue}>{plan.risks.length}</strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Owners</span>
+            <strong className={`${styles.summaryMetricValue} ${styles.wrapAnywhere}`}>
+              {plan.owners.length > 0 ? plan.owners.join(', ') : 'not recorded'}
+            </strong>
+          </div>
+        </div>
 
-      <ul className={styles.planList}>
-        {tasks.length === 0 ? (
-          <li className={styles.planListItem}>No tasks listed.</li>
-        ) : (
-          tasks.map((task) => {
-            const done = task.status.toLowerCase() === 'done';
-            return (
-              <li key={`${task.description}-${task.status}`} className={styles.planListItem}>
-                <strong>{done ? '[x]' : '[ ]'}</strong> {task.description}
-              </li>
-            );
-          })
-        )}
-      </ul>
+        <div className={styles.focusTabStack}>
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>Top Acceptance Criteria</span>
+            <ul className={styles.planList}>
+              {plan.acceptance_criteria.length === 0 ? (
+                <li className={styles.planListItem}>No acceptance criteria were recorded.</li>
+              ) : (
+                plan.acceptance_criteria.slice(0, 5).map((criterion) => (
+                  <li key={criterion} className={styles.planListItem}>
+                    {criterion}
+                  </li>
+                ))
+              )}
+            </ul>
+          </div>
 
-      {files.length > 0 ? (
-        <ul className={styles.planList}>
-          {files.map((file) => (
-            <li key={file} className={styles.planListItem}>
-              {file}
-            </li>
-          ))}
-        </ul>
-      ) : null}
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>Scoped Files Preview</span>
+            <ul className={styles.planList}>
+              {plan.scoped_files.length === 0 ? (
+                <li className={styles.planListItem}>No scoped files were recorded.</li>
+              ) : (
+                plan.scoped_files.slice(0, 10).map((file) => (
+                  <li key={file} className={styles.planListItem}>
+                    <span className={styles.wrapAnywhere}>{file}</span>
+                  </li>
+                ))
+              )}
+            </ul>
+          </div>
+
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>Risks Preview</span>
+            <ul className={styles.planList}>
+              {plan.risks.length === 0 ? (
+                <li className={styles.planListItem}>No plan risks were recorded.</li>
+              ) : (
+                plan.risks.slice(0, 5).map((risk) => (
+                  <li key={risk} className={styles.planListItem}>
+                    {risk}
+                  </li>
+                ))
+              )}
+            </ul>
+          </div>
+
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>Raw Task List</span>
+            <ul className={styles.planList}>
+              {plan.tasks.length === 0 ? (
+                <li className={styles.planListItem}>No plan tasks were recorded.</li>
+              ) : (
+                plan.tasks.map((task) => (
+                  <li key={task.id ?? task.title} className={styles.planListItem}>
+                    <div className={styles.badgeRow}>
+                      <span className={statusBadge(task.status)}>{task.status}</span>
+                    </div>
+                    <strong className={styles.wrapAnywhere}>{task.title}</strong>
+                    <p className={styles.metaText}>{summarizeTask(task)}</p>
+                  </li>
+                ))
+              )}
+            </ul>
+          </div>
+        </div>
+      </div>
     </details>
   );
 }

package/packages/web-dashboard/src/components/quick-launch-panel.tsx

@@ -1,69 +1,42 @@
+import Link from 'next/link';
 import styles from '@/styles/dashboard.module.css';
 
 interface QuickLaunchPanelProps {
   visible: boolean;
-  featureId: string;
-  goal: string;
-  submitting: boolean;
+  launchHref: string;
+  available: boolean;
+  authorized: boolean;
   disabledReason: string | null;
-  onFeatureIdChange: (value: string) => void;
-  onGoalChange: (value: string) => void;
-  onRequestLaunch: () => void;
 }
 
 export function QuickLaunchPanel({
   visible,
-  featureId,
-  goal,
-  submitting,
+  launchHref,
+  available,
+  authorized,
   disabledReason,
-  onFeatureIdChange,
-  onGoalChange,
-  onRequestLaunch,
 }: QuickLaunchPanelProps) {
   if (!visible) {
     return null;
   }
 
-  const launchDisabled = submitting || featureId.trim().length === 0 || goal.trim().length === 0;
-
   return (
-    <section className={styles.section}>
-      <h2 className={styles.sectionTitle}>Quick Launch</h2>
+    <section className={styles.queueModule}>
+      <h2 className={styles.sectionTitle}>Launch</h2>
+      <p className={styles.metaText}>
+        Draft specs in a dedicated workspace, preview the rendered markdown, and submit them into
+        the current execution or start a new one.
+      </p>
       <p className={styles.metaText}>
-        Create a new feature run with policy validation and explicit confirmation.
+        {available
+          ? 'Launch submissions can add to the active run or bootstrap a new one.'
+          : (disabledReason ?? 'Launch submissions are currently unavailable.')}
       </p>
-      {disabledReason ? <p className={styles.metaText}>{disabledReason}</p> : null}
-      <label className={styles.label} htmlFor="quick-launch-feature-id">
-        Feature ID
-      </label>
-      <input
-        id="quick-launch-feature-id"
-        className={styles.input}
-        value={featureId}
-        onChange={(event) => onFeatureIdChange(event.target.value)}
-        placeholder="feature_checkout_flow"
-      />
-      <label className={styles.label} htmlFor="quick-launch-goal">
-        Goal
-      </label>
-      <textarea
-        id="quick-launch-goal"
-        className={styles.textarea}
-        rows={3}
-        value={goal}
-        onChange={(event) => onGoalChange(event.target.value)}
-        placeholder="Implement ..."
-      />
+      {!authorized && disabledReason ? <p className={styles.metaText}>{disabledReason}</p> : null}
       <div className={styles.inlineActions}>
-        <button
-          type="button"
-          className={`${styles.button} ${styles.buttonSuccess}`}
-          disabled={launchDisabled}
-          onClick={onRequestLaunch}
-        >
-          {submitting ? 'Launching...' : 'Launch Feature'}
-        </button>
+        <Link href={launchHref} className={`${styles.linkButton} ${styles.buttonSuccess}`}>
+          Open /launch
+        </Link>
       </div>
     </section>
   );

package/packages/web-dashboard/src/components/summary-bar.tsx

@@ -1,94 +1,49 @@
+import React from 'react';
 import Link from 'next/link';
 import styles from '@/styles/dashboard.module.css';
-import {
-  sparklinePath,
-  sparklinePoints,
-  type DashboardSummaryCounts,
-  type QuickFilterKey,
-} from '@/lib/dashboard-utils.js';
+import { sparklinePath, sparklinePoints } from '@/lib/dashboard-utils.js';
 
 interface SummaryBarProps {
-  counts: DashboardSummaryCounts;
-  activeQuickFilter: QuickFilterKey | null;
-  onQuickFilter: (key: QuickFilterKey) => void;
+  totalTokensToday?: number;
+  totalCostTodayUsd?: number | null;
+  activeFeatures: number;
+  mergedFeatures: number;
   mergeHistogram14d?: number[];
-  totalCostTodayUsd?: number;
   analyticsHref: string;
 }
 
-function formatCost(value: number | undefined): string {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
-    return '$0.00';
-  }
-  return `$${value.toFixed(2)}`;
-}
-
 export function SummaryBar({
-  counts,
-  activeQuickFilter,
-  onQuickFilter,
-  mergeHistogram14d = [],
+  totalTokensToday,
   totalCostTodayUsd,
+  activeFeatures,
+  mergedFeatures,
+  mergeHistogram14d = [],
   analyticsHref,
 }: SummaryBarProps) {
   const trendPoints = sparklinePoints(mergeHistogram14d, 180, 40);
-  const tiles: Array<{
-    key: QuickFilterKey;
-    label: string;
-    value: number;
-    alert: boolean;
-  }> = [
-    { key: 'active', label: 'Active', value: counts.active, alert: false },
-    { key: 'blocked', label: 'Blocked', value: counts.blocked, alert: counts.blocked > 0 },
-    {
-      key: 'awaiting_input',
-      label: 'Awaiting Input',
-      value: counts.awaitingInput,
-      alert: counts.awaitingInput > 0,
-    },
-    {
-      key: 'ready_to_merge',
-      label: 'Ready to Merge',
-      value: counts.readyToMerge,
-      alert: false,
-    },
-    {
-      key: 'ci_failing',
-      label: 'CI Failing',
-      value: counts.ciFailing,
-      alert: counts.ciFailing > 0,
-    },
-  ];
 
   return (
     <section className={styles.summaryBar} aria-label="Dashboard summary">
-      {tiles.map((tile) => {
-        const classNames = [styles.summaryTile];
-        if (tile.alert) {
-          classNames.push(styles.summaryTileAlert);
-        }
-        if (activeQuickFilter === tile.key) {
-          classNames.push(styles.summaryTileActive);
-        }
-
-        return (
-          <button
-            key={tile.key}
-            type="button"
-            className={classNames.join(' ')}
-            onClick={() => onQuickFilter(tile.key)}
-            aria-pressed={activeQuickFilter === tile.key}
-          >
-            <span className={styles.summaryValue}>{tile.value}</span>
-            <span className={styles.summaryLabel}>{tile.label}</span>
-          </button>
-        );
-      })}
-      <Link href={analyticsHref} className={styles.summaryTile} aria-label="Open cost analytics">
-        <span className={styles.summaryLabel}>Cost Today</span>
-        <span className={styles.summaryValue}>{formatCost(totalCostTodayUsd)}</span>
-        <span className={styles.summaryLabel}>Server aggregate</span>
-      </Link>
+      <div className={styles.summaryTile}>
+        <span className={styles.summaryLabel}>Usage Today</span>
+        <span className={styles.summaryValue}>
+          {(totalTokensToday ?? 0).toLocaleString('en-US')}
+        </span>
+        <span className={styles.summaryLabel}>tokens</span>
+        {typeof totalCostTodayUsd === 'number' ? (
+          <span className={styles.metaText}>${totalCostTodayUsd.toFixed(2)} secondary</span>
+        ) : null}
+      </div>
+      <div className={styles.summaryTile}>
+        <span className={styles.summaryLabel}>Active Features</span>
+        <span className={styles.summaryValue}>{activeFeatures}</span>
+        <span className={styles.summaryLabel}>in flight</span>
+      </div>
+      <div className={styles.summaryTile}>
+        <span className={styles.summaryLabel}>Merged</span>
+        <span className={styles.summaryValue}>{mergedFeatures}</span>
+        <span className={styles.summaryLabel}>discoverable in archive</span>
+      </div>
       <Link href={analyticsHref} className={styles.summaryTile} aria-label="Open analytics">
         <span className={styles.summaryLabel}>Throughput (14d)</span>
         {mergeHistogram14d.length > 0 ? (
@@ -115,7 +70,6 @@ export function SummaryBar({
         ) : (
           <span className={styles.metaText}>No merge trend yet</span>
         )}
-        <span className={styles.summaryLabel}>Open analytics</span>
       </Link>
     </section>
   );