feat(ai-orchestration): generator-based workflows + orchestrators

examples/ts-react-chat/package.json

@@ -21,6 +21,7 @@
     "@tanstack/ai-ollama": "workspace:*",
     "@tanstack/ai-openai": "workspace:*",
     "@tanstack/ai-openrouter": "workspace:*",
+    "@tanstack/ai-orchestration": "workspace:*",
     "@tanstack/ai-react": "workspace:*",
     "@tanstack/ai-react-ui": "workspace:*",
     "@tanstack/nitro-v2-vite-plugin": "^1.154.7",

examples/ts-react-chat/src/components/ArticleModal.tsx

@@ -0,0 +1,120 @@
+import { useEffect } from 'react'
+
+interface Article {
+  title: string
+  paragraphs: Array<string>
+}
+
+export function ArticleModal(props: { article: Article; onClose: () => void }) {
+  // Close on Escape, lock body scroll while open.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') props.onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = prev
+    }
+  }, [props])
+
+  const date = new Date().toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Published article"
+      className="fixed inset-0 z-50 anim-log-in"
+    >
+      {/* backdrop */}
+      <div
+        onClick={props.onClose}
+        className="absolute inset-0 bg-ink/85 backdrop-blur-sm"
+      />
+
+      {/* page wrapper — scrollable */}
+      <div className="relative h-full overflow-auto px-4 sm:px-8 py-10 flex justify-center">
+        <article className="relative max-w-3xl w-full bg-cream text-ink shadow-[16px_16px_0_0_var(--color-citron)] my-4">
+          {/* paper grain */}
+          <div
+            className="absolute inset-0 pointer-events-none opacity-25 mix-blend-multiply"
+            style={{
+              backgroundImage:
+                "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>\")",
+            }}
+          />
+
+          {/* hazard tape header strip */}
+          <div className="tape-citron h-2.5" />
+
+          {/* close button */}
+          <button
+            onClick={props.onClose}
+            aria-label="Close"
+            className="absolute top-5 right-5 z-10 w-9 h-9 flex items-center justify-center bg-ink text-cream hover:bg-rust transition-colors label-mono"
+          >
+            ✕
+          </button>
+
+          <div className="relative px-8 sm:px-14 py-12">
+            {/* masthead */}
+            <div className="flex items-baseline justify-between border-b border-ink pb-3 mb-10">
+              <span className="label-mono text-rust">Published</span>
+              <span className="label-mono text-taupe-deep tabular">{date}</span>
+            </div>
+
+            <h1
+              className="text-[clamp(2.25rem,5.5vw,4.25rem)] leading-[0.96] tracking-tight mb-10"
+              style={{
+                fontFamily: 'var(--font-display)',
+                fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
+              }}
+            >
+              {props.article.title}
+            </h1>
+
+            {/* article body — column layout for longer pieces */}
+            <div className="columns-1 md:columns-2 gap-10">
+              {props.article.paragraphs.map((p, i) => (
+                <p
+                  key={i}
+                  className={`mb-5 text-ink leading-[1.65] text-[17px] break-inside-avoid ${
+                    i === 0
+                      ? 'first-letter:float-left first-letter:text-7xl first-letter:font-bold first-letter:leading-[0.85] first-letter:mr-3 first-letter:text-rust'
+                      : ''
+                  }`}
+                  style={{
+                    fontFamily: 'var(--font-display)',
+                    fontVariationSettings: "'opsz' 17, 'SOFT' 100, 'WONK' 0",
+                  }}
+                >
+                  {p}
+                </p>
+              ))}
+            </div>
+
+            {/* colophon */}
+            <footer className="mt-14 pt-5 border-t border-ink/40 flex items-baseline justify-between label-mono text-taupe-deep">
+              <span>TanStack AI · Article Pipeline</span>
+              <span>—fin—</span>
+            </footer>
+          </div>
+
+          <div className="tape-citron h-2.5" />
+        </article>
+      </div>
+
+      {/* corner hint */}
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 label-mono text-bone/60">
+        press esc or click outside to close
+      </div>
+    </div>
+  )
+}

examples/ts-react-chat/src/components/DraftPreview.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface Draft {
+  title?: string
+  paragraphs?: Array<string>
+}
+
+export function DraftPreview(props: { draft: unknown; phase?: string }) {
+  const draft = (
+    props.draft && typeof props.draft === 'object' ? props.draft : null
+  ) as Draft | null
+
+  // Pulse highlight when the draft content changes — gives a sense of life.
+  const [bumpKey, setBumpKey] = useState(0)
+  const lastSerialized = useRef('')
+  useEffect(() => {
+    const next = JSON.stringify(draft ?? {})
+    if (next !== lastSerialized.current) {
+      lastSerialized.current = next
+      setBumpKey((k) => k + 1)
+    }
+  }, [draft])
+
+  const hasContent =
+    draft && (draft.title || (draft.paragraphs && draft.paragraphs.length > 0))
+
+  return (
+    <aside className="relative">
+      <div className="flex items-baseline justify-between border-b border-bone pb-3 mb-4">
+        <span className="label-mono text-bone">Draft Preview</span>
+        <span className="label-mono text-taupe tabular">
+          {hasContent
+            ? `${(draft.paragraphs?.length ?? 0).toString().padStart(2, '0')} ¶`
+            : '—'}
+        </span>
+      </div>
+
+      <div className="relative bg-cream text-ink shadow-[8px_8px_0_0_var(--color-ink-soft)] border border-ink overflow-hidden">
+        {/* phase stamp */}
+        {props.phase && (
+          <div className="absolute top-3 right-3 px-2 py-0.5 bg-ink text-cream label-mono">
+            {props.phase}
+          </div>
+        )}
+
+        {/* paper grain */}
+        <div
+          className="absolute inset-0 pointer-events-none opacity-30 mix-blend-multiply"
+          style={{
+            backgroundImage:
+              "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>\")",
+          }}
+        />
+
+        <div
+          key={bumpKey}
+          className="relative px-6 py-7 max-h-[34rem] overflow-auto anim-log-in"
+        >
+          {!hasContent ? (
+            <Empty />
+          ) : (
+            <>
+              <div className="label-mono text-taupe-deep mb-3">
+                Draft № {String(bumpKey).padStart(2, '0')}
+              </div>
+              {draft.title && (
+                <h2
+                  className="text-[clamp(1.5rem,2.4vw,2rem)] leading-[0.98] tracking-tight mb-5"
+                  style={{
+                    fontFamily: 'var(--font-display)',
+                    fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
+                  }}
+                >
+                  {draft.title}
+                </h2>
+              )}
+              {draft.paragraphs?.map((p, i) => (
+                <p
+                  key={i}
+                  className={`mb-3.5 text-[14px] leading-[1.55] text-ink ${
+                    i === 0
+                      ? 'first-letter:float-left first-letter:text-5xl first-letter:font-bold first-letter:leading-[0.85] first-letter:mr-2 first-letter:text-rust'
+                      : ''
+                  }`}
+                  style={{
+                    fontFamily: 'var(--font-display)',
+                    fontVariationSettings: "'opsz' 14, 'SOFT' 100, 'WONK' 0",
+                  }}
+                >
+                  {p}
+                </p>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    </aside>
+  )
+}
+
+function Empty() {
+  return (
+    <div className="py-10 text-center">
+      <div
+        className="text-3xl text-taupe-deep italic mb-2"
+        style={{
+          fontFamily: 'var(--font-display)',
+          fontVariationSettings: "'opsz' 96, 'SOFT' 80, 'WONK' 1",
+        }}
+      >
+        no draft yet.
+      </div>
+      <div className="label-mono text-taupe">awaiting writer</div>
+    </div>
+  )
+}

examples/ts-react-chat/src/components/Header.tsx

@@ -5,12 +5,14 @@ import {
   Braces,
   FileAudio,
   FileText,
+  GitBranch,
   Guitar,
   Home,
   Image,
   Menu,
   Mic,
   Music,
+  Network,
   Video,
   X,
 } from 'lucide-react'
@@ -188,15 +190,47 @@ export default function Header() {
           <Link
             to="/realtime"
             onClick={() => setIsOpen(false)}
-            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-1"
             activeProps={{
               className:
-                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
+                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-1',
             }}
           >
             <Mic size={20} />
             <span className="font-medium">Voice Chat (Realtime)</span>
           </Link>
+
+          <hr className="border-gray-700 my-2" />
+
+          <p className="text-xs text-gray-500 uppercase tracking-wider px-3 pt-2 pb-1">
+            Orchestration
+          </p>
+
+          <Link
+            to="/workflow"
+            onClick={() => setIsOpen(false)}
+            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-1"
+            activeProps={{
+              className:
+                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-1',
+            }}
+          >
+            <GitBranch size={20} />
+            <span className="font-medium">Article Workflow</span>
+          </Link>
+
+          <Link
+            to="/orchestration"
+            onClick={() => setIsOpen(false)}
+            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+            activeProps={{
+              className:
+                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
+            }}
+          >
+            <Network size={20} />
+            <span className="font-medium">Feature Orchestrator</span>
+          </Link>
         </nav>
       </aside>
     </>