agentic-orchestrator 0.1.28 → 0.2.1

package/packages/web-dashboard/src/app/feature/[id]/page.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import Link from 'next/link';
-import { DetailPanel } from '@/components/detail-panel';
-import { ReviewWorkspace } from '@/components/review-workspace';
+import { FocusLayout } from '@/components/focus/FocusLayout';
 import { ToastStack, useToast } from '@/components/toast';
 import type { DashboardStatusPayload, FeatureDetail } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
@@ -78,54 +76,46 @@ export default function FeatureFocusPage({ params }: { params: Promise<{ id: str
     void refreshStatus();
   }, [featureId, refreshDetail, refreshStatus]);
 
+  const selectedFeatureSummary = useMemo(
+    () => payload.features.find((feature) => feature.feature_id === featureId) ?? null,
+    [featureId, payload.features],
+  );
   const statusLabel =
-    payload.features.find((feature) => feature.feature_id === featureId)?.status ??
+    selectedFeatureSummary?.client_status_label ??
+    selectedFeatureSummary?.status ??
+    detail?.feature.client_status_label ??
     detail?.feature.status ??
     'unknown';
-  const showReviewWorkspace =
-    detail?.feature.phase === 'ready_to_merge' || detail?.feature.phase === 'qa';
   const hasActiveRuntimeSession =
     hasActiveRuntimeRunId(payload.runtime?.run_id) ||
     hasActiveRuntimeRunId(payload.index.runtime_sessions?.run_id);
+  const boardHref = useMemo(() => (query.length > 0 ? `/${query}` : '/'), [query]);
+  const unresolvedDependencies = useMemo(() => {
+    return (
+      payload.dep_blocked?.find((entry) => entry.feature_id === featureId)?.depends_on_unresolved ??
+      []
+    );
+  }, [featureId, payload.dep_blocked]);
+  const flakySuspects = useMemo(
+    () => (Array.isArray(payload.flaky_suspects) ? payload.flaky_suspects : []),
+    [payload.flaky_suspects],
+  );
 
   return (
     <div className={styles.dashboardRoot}>
-      <header className={styles.focusHeader}>
-        <div className={styles.titleBlock}>
-          <h1 className={styles.pageTitle}>{featureId}</h1>
-          <p className={styles.pageSubtitle}>Focus review view • Status: {statusLabel}</p>
-        </div>
-        <div className={styles.inlineActions}>
-          <Link href={`/${query.length > 0 ? query : ''}`} className={styles.linkButton}>
-            Back To Board
-          </Link>
-        </div>
-      </header>
-
-      <div className={styles.focusLayout}>
-        {detail && showReviewWorkspace ? (
-          <ReviewWorkspace
-            detail={detail}
-            project={project}
-            hasActiveRuntimeSession={hasActiveRuntimeSession}
-            refreshDetail={refreshDetail}
-            refreshStatus={refreshStatus}
-            addToast={addToast}
-          />
-        ) : (
-          <DetailPanel
-            detail={detail}
-            project={project}
-            isFocusView
-            onClose={() => {
-              window.location.href = `/${query.length > 0 ? query : ''}`;
-            }}
-            refreshDetail={refreshDetail}
-            refreshStatus={refreshStatus}
-            addToast={addToast}
-          />
-        )}
-      </div>
+      <FocusLayout
+        addToast={addToast}
+        boardHref={boardHref}
+        detail={detail}
+        featureId={featureId}
+        flakySuspects={flakySuspects}
+        hasActiveRuntimeSession={hasActiveRuntimeSession}
+        project={project}
+        refreshDetail={refreshDetail}
+        refreshStatus={refreshStatus}
+        statusLabel={statusLabel}
+        unresolvedDependencies={unresolvedDependencies}
+      />
 
       <ToastStack notifications={notifications} onDismiss={dismissToast} />
     </div>

package/packages/web-dashboard/src/app/globals.css

@@ -1,5 +1,32 @@
 @import 'diff2html/bundles/css/diff2html.min.css';
 
+:root {
+  font-family:
+    'Roboto',
+    'Inter',
+    'Segoe UI',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --color-primary: #5badb2;
+  --color-primary-dark: #4a9a9f;
+  --color-primary-light: #b5e3e6;
+  --color-accent: #f8be2d;
+  --color-accent-orange: #ffa62b;
+  --color-accent-blue: #28b2ff;
+  --color-text-primary: #1c2f3d;
+  --color-text-subtle: #596873;
+  --color-text-on-accent: #032658;
+  --color-surface: #ffffff;
+  --color-surface-muted: #eff2f3;
+  --color-surface-alt: #eff8ff;
+  --color-surface-hover: rgba(91, 173, 178, 0.12);
+  --color-success: #0f766e;
+  --color-error: #b42318;
+  --border-soft: 1px solid rgba(28, 47, 61, 0.1);
+  --shadow-card: 0 10px 30px rgba(28, 47, 61, 0.1);
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -12,10 +39,14 @@ body {
 }
 
 body {
-  background: #050913;
-  color: #eaf1fc;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(91, 173, 178, 0.12), transparent 28%),
+    radial-gradient(circle at 85% 0%, rgba(248, 190, 45, 0.1), transparent 30%),
+    linear-gradient(180deg, #f8fbfc 0%, #eff2f3 100%);
+  color: var(--color-text-primary);
+  font-family: inherit;
 }
 
 a {
-  color: #9fd4ff;
+  color: inherit;
 }

package/packages/web-dashboard/src/app/launch/page.tsx

@@ -0,0 +1,362 @@
+'use client';
+
+import React from 'react';
+import { Suspense, startTransition, useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { LaunchDraftCard, type LaunchDraftCardState } from '@/components/launch/launch-draft-card';
+import type { LaunchDraftInput, LaunchSubmitOutcome } from '@/lib/launch-contracts.js';
+import {
+  applyLaunchPreview,
+  buildLaunchPreviewDrafts,
+  buildLaunchPreviewKey,
+  toLaunchSubmitDraftInput,
+} from '@/lib/launch-page-preview.js';
+import styles from '@/styles/dashboard.module.css';
+import { collectMarkdownFromDrop } from '@/lib/drop-zone-utils.js';
+
+export const dynamic = 'force-dynamic';
+
+interface PreviewResponse {
+  ok: boolean;
+  data?: {
+    drafts: Array<
+      Pick<
+        LaunchDraftCardState,
+        | 'draft_id'
+        | 'feature_id'
+        | 'canonical_spec_path'
+        | 'preview_html'
+        | 'preview_mode'
+        | 'warnings'
+        | 'errors'
+      >
+    >;
+  };
+}
+
+interface SubmitResponse {
+  ok: boolean;
+  data?: {
+    outcomes: LaunchSubmitOutcome[];
+  };
+  error?: { message?: string };
+}
+
+let draftSequence = 0;
+const PREVIEW_REFRESH_DEBOUNCE_MS = 250;
+
+function createDraftId(): string {
+  draftSequence += 1;
+  return `launch-draft-${draftSequence}`;
+}
+
+function stripMarkdownExtension(filename: string): string {
+  return filename.endsWith('.md') ? filename.slice(0, -3) : filename;
+}
+
+function createDraft(
+  name: string,
+  markdown = '',
+  sourceType: 'upload' | 'paste' = 'paste',
+): LaunchDraftCardState {
+  const displayName = sourceType === 'upload' ? stripMarkdownExtension(name) : name;
+  return {
+    draft_id: createDraftId(),
+    source_type: sourceType,
+    name: displayName,
+    markdown,
+    source_path: name,
+    feature_id: null,
+    canonical_spec_path: null,
+    preview_html: '<p>Preview pending...</p>',
+    preview_mode: 'rendered',
+    warnings: [],
+    errors: [],
+    last_request_id: null,
+  };
+}
+
+function LaunchPageContent() {
+  const searchParams = useSearchParams();
+  const [drafts, setDrafts] = useState<LaunchDraftCardState[]>([
+    createDraft('Launch Draft 1', '# Launch Draft 1\n\nDescribe the work to enroll.'),
+  ]);
+  const [submittingIds, setSubmittingIds] = useState<string[]>([]);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const dragCounterRef = React.useRef(0);
+
+  const handleDragEnter = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    dragCounterRef.current += 1;
+    if (dragCounterRef.current === 1) {
+      setDragActive(true);
+    }
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current <= 0) {
+      dragCounterRef.current = 0;
+      setDragActive(false);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDrop = async (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    dragCounterRef.current = 0;
+    setDragActive(false);
+
+    if (!event.dataTransfer?.items) {
+      return;
+    }
+
+    const result = await collectMarkdownFromDrop(event.dataTransfer.items);
+    if (result.markdownFiles.length === 0 && result.skippedNonMarkdownCount > 0) {
+      setStatusMessage(
+        `Skipped ${result.skippedNonMarkdownCount} non-markdown file${result.skippedNonMarkdownCount === 1 ? '' : 's'}. Only .md files are accepted.`,
+      );
+      return;
+    }
+    if (result.markdownFiles.length === 0) {
+      return;
+    }
+
+    const loadedDrafts = await Promise.all(
+      result.markdownFiles.map(async (file) => createDraft(file.name, await file.text(), 'upload')),
+    );
+    setDrafts((current) => [...current, ...loadedDrafts]);
+
+    const parts: string[] = [
+      `Added ${loadedDrafts.length} draft${loadedDrafts.length === 1 ? '' : 's'} from drop`,
+    ];
+    if (result.skippedNonMarkdownCount > 0) {
+      parts.push(
+        `(skipped ${result.skippedNonMarkdownCount} non-markdown file${result.skippedNonMarkdownCount === 1 ? '' : 's'})`,
+      );
+    }
+    setStatusMessage(parts.join(' '));
+  };
+  const projectQuery = searchParams.get('project');
+  const querySuffix = projectQuery ? `?project=${encodeURIComponent(projectQuery)}` : '';
+  const dashboardHref = projectQuery ? `/?project=${encodeURIComponent(projectQuery)}` : '/';
+
+  const previewKey = useMemo(
+    () => buildLaunchPreviewKey(buildLaunchPreviewDrafts(drafts)),
+    [drafts],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    const controller = new AbortController();
+    const timeoutId = globalThis.setTimeout(() => {
+      const previewPayload = JSON.parse(previewKey) as LaunchDraftInput[];
+      void (async () => {
+        try {
+          const response = await fetch(`/api/launch/preview${querySuffix}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ drafts: previewPayload }),
+            signal: controller.signal,
+          });
+          const body = (await response.json()) as PreviewResponse;
+          if (cancelled || !body.ok || !body.data) {
+            return;
+          }
+
+          startTransition(() => {
+            setDrafts((current) => applyLaunchPreview(current, body.data?.drafts ?? []));
+          });
+        } catch {
+          if (!cancelled && !controller.signal.aborted) {
+            setStatusMessage('Preview refresh failed.');
+          }
+        }
+      })();
+    }, PREVIEW_REFRESH_DEBOUNCE_MS);
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [previewKey, querySuffix]);
+
+  const validDraftIds = drafts
+    .filter((draft) => draft.errors.length === 0)
+    .map((draft) => draft.draft_id);
+
+  const submitDrafts = async (draftIds: string[]) => {
+    if (draftIds.length === 0) {
+      setStatusMessage('No valid drafts are ready to submit.');
+      return;
+    }
+
+    setSubmittingIds(draftIds);
+    setStatusMessage(null);
+    try {
+      const response = await fetch(`/api/launch/submit${querySuffix}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          drafts: drafts
+            .filter((draft) => draftIds.includes(draft.draft_id))
+            .map((draft, index) => toLaunchSubmitDraftInput(draft, index)),
+        }),
+      });
+      const body = (await response.json()) as SubmitResponse;
+      if (!body.ok || !body.data) {
+        setStatusMessage(body.error?.message ?? 'Launch submission failed.');
+        return;
+      }
+
+      setDrafts((current) =>
+        current.map((draft) => {
+          const outcome = body.data?.outcomes.find((entry) => entry.draft_id === draft.draft_id);
+          return outcome
+            ? {
+                ...draft,
+                feature_id: outcome.feature_id,
+                canonical_spec_path: outcome.canonical_spec_path,
+                errors: outcome.errors,
+                warnings: outcome.warnings,
+                last_request_id: outcome.request_id ?? draft.last_request_id ?? null,
+              }
+            : draft;
+        }),
+      );
+      const submittedCount = body.data.outcomes.filter(
+        (outcome) => outcome.status === 'submitted',
+      ).length;
+      setStatusMessage(
+        submittedCount > 0
+          ? `Submitted ${submittedCount} draft${submittedCount === 1 ? '' : 's'} to execution.`
+          : 'No drafts were submitted.',
+      );
+    } catch {
+      setStatusMessage('Launch submission failed.');
+    } finally {
+      setSubmittingIds([]);
+    }
+  };
+
+  const handleFileSelection = async (files: FileList | null) => {
+    if (!files || files.length === 0) {
+      return;
+    }
+    const loadedDrafts = await Promise.all(
+      Array.from(files).map(async (file) => createDraft(file.name, await file.text(), 'upload')),
+    );
+    setDrafts((current) => [...current, ...loadedDrafts]);
+  };
+
+  return (
+    <div
+      className={styles.dashboardRoot}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={(event) => {
+        void handleDrop(event);
+      }}
+    >
+      {dragActive ? (
+        <div className={styles.dropZoneOverlay}>
+          <h2>Drop .md files or folders</h2>
+          <p>Folders will be scanned for .md files</p>
+        </div>
+      ) : null}
+      <header className={styles.commandCenterHeader}>
+        <div className={styles.commandCenterHeading}>
+          <p className={styles.eyebrow}>Multi-draft launch</p>
+          <h1 className={styles.pageTitle}>Launch Workspace</h1>
+          <p className={styles.pageSubtitle}>
+            Preview, validate, and submit drafts into the current execution or start a new one.
+          </p>
+        </div>
+        <div className={styles.inlineActions}>
+          <Link href={dashboardHref} className={styles.linkButton}>
+            Back to Dashboard
+          </Link>
+          <label className={styles.linkButton}>
+            Upload .md
+            <input
+              type="file"
+              accept=".md,text/markdown"
+              multiple
+              className={styles.visuallyHidden}
+              onChange={(event) => {
+                void handleFileSelection(event.target.files);
+                event.currentTarget.value = '';
+              }}
+            />
+          </label>
+          <button
+            type="button"
+            className={styles.button}
+            onClick={() =>
+              setDrafts((current) => [
+                ...current,
+                createDraft(`Launch Draft ${current.length + 1}`),
+              ])
+            }
+          >
+            Add Draft
+          </button>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.buttonSuccess}`}
+            onClick={() => {
+              void submitDrafts(validDraftIds);
+            }}
+          >
+            Submit Valid Drafts
+          </button>
+        </div>
+      </header>
+
+      {statusMessage ? <div className={styles.banner}>{statusMessage}</div> : null}
+
+      <section className={styles.launchDraftList}>
+        {drafts.map((draft) => (
+          <LaunchDraftCard
+            key={draft.draft_id}
+            draft={draft}
+            submitting={submittingIds.includes(draft.draft_id)}
+            onChange={(draftId, field, value) =>
+              setDrafts((current) =>
+                current.map((entry) =>
+                  entry.draft_id === draftId ? { ...entry, [field]: value } : entry,
+                ),
+              )
+            }
+            onRemove={(draftId) =>
+              setDrafts((current) => current.filter((entry) => entry.draft_id !== draftId))
+            }
+            onSubmit={(draftId) => {
+              void submitDrafts([draftId]);
+            }}
+          />
+        ))}
+      </section>
+    </div>
+  );
+}
+
+export default function LaunchPage() {
+  return (
+    <Suspense fallback={<div className={styles.dashboardRoot}>Loading launch workspace...</div>}>
+      <LaunchPageContent />
+    </Suspense>
+  );
+}

package/packages/web-dashboard/src/app/layout.tsx

@@ -1,4 +1,7 @@
+import React from 'react';
 import type { Metadata } from 'next';
+import Link from 'next/link';
+import styles from '@/styles/dashboard.module.css';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -7,9 +10,28 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const repositoryHref =
+    process.env.NEXT_PUBLIC_AOP_DASHBOARD_REPO_URL ??
+    'https://github.com/Eric-Taurone-Software/Agentic-Orchestrator';
+  const docsHref =
+    process.env.NEXT_PUBLIC_AOP_DASHBOARD_DOCS_URL ??
+    'https://github.com/Eric-Taurone-Software/Agentic-Orchestrator/tree/main/docs';
+
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={styles.appShell}>
+        <div className={styles.appBody}>{children}</div>
+        <footer className={styles.appFooter}>
+          <div className={styles.footerLinks}>
+            <Link href={repositoryHref} className={styles.linkButton}>
+              GitHub
+            </Link>
+            <Link href={docsHref} className={styles.linkButton}>
+              Docs
+            </Link>
+          </div>
+        </footer>
+      </body>
     </html>
   );
 }