@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/README.md

@@ -1,3 +1,86 @@
-# Temporary Holding Version
+# ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Own reusable React components, blocks, layouts, themes, and public exports.
+
+Use the sibling workspace layout. Shared framework and UI keep their existing public exports and
+build contracts.
+
+## Run
+
+Use Node 26.10 or newer and the package manifest requirements. Clone the sibling tools and
+mcp-governance repositories along with this repository.
+
+```powershell
+npm install
+npm run check
+```
+
+## Repository records
+
+- `AGENTS.md`: repository instructions and ownership rules.
+- `agent/SKILLS.md`: repository capabilities.
+- `agent/TASK.md`: current task and status.
+- `agent/PLAN.md`: next steps.
+- `agent/CHANGELOG.md`: versioned changes and validation results.
+
+## Shared guidance
+
+Retrieve shared documentation and rules only from `https://mcp.codexsun.com/mcp` using `npm run mcp:connect`.
+A successful authenticated connection is required before repository work. Stop and report connection failures.
+Do not use local guides or cached instructions as fallback. Instruction retrieval does not authorize actions.
+
+Retrieve shared documentation and rules only from `https://mcp.codexsun.com/mcp` using `npm run mcp:connect`.
+A successful authenticated connection is required before repository work. Stop and report connection failures.
+Do not use local guides or cached instructions as fallback. Instruction retrieval does not authorize actions.
+
+Configure these values with `.env.example`:
+
+- `MCP_SERVER_URL`
+- `MCP_SERVER_SECRET`
+- `APP_ID`
+- `APP_USER`
+
+Keep the secret in ignored `.env` files.
+
+```powershell
+npm run mcp:connect
+npm run mcp:verify
+```
+
+Use `mcp:connect` to retrieve instructions. Use `mcp:verify` for a strict connection test.
+Connection failures do not block application work. Editor registration uses the central connection
+template and depends on the editor.
+
+## Maintenance
+
+```powershell
+npm run version-bump -- --dry-run
+npm run version-bump -- --title "Release title" --note "Change details"
+npm run check:versions
+npm run fix:line-endings
+npm run lines:check
+npm run github:now -- --dry-run
+```
+
+Version bumps align `package.json`, `package-lock.json`, and `agent/CHANGELOG.md`. Record changes
+and validation before committing.
+
+Commit subjects use `#<patch> - <release title>`. For example:
+`#5 - Central governance and repository agent layout`.
+
+Review the changed files before an authorized `npm run github:now`. Do not bump again when the
+release version is already prepared.
+
+## Tools source and publication
+
+Workspace maintenance delegates to `shared/tools`. The installed npm package remains pinned at
+`0.1.3` until agent changelog support is published.
+
+GitHub source releases use `github:now`. Npm publication requires separate authorization.
+
+## npm package
+
+UI publishes TypeScript/TSX source and CSS for Vite or another TypeScript-aware React bundler. React and React DOM remain peer dependencies. Native Node cannot execute these frontend exports directly.
+
+Run `npm run release:check`, then `npm publish --access public` from this repository.
+Only public exports are supported. App manifests use npm versions.

package/package.json

@@ -1,6 +1,107 @@
 {
   "name": "@devxcrew/react-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.7",
+  "type": "module",
+  "exports": {
+    "./hooks/*": "./src/hooks/*.ts",
+    "./features/*": "./src/features/*/index.ts",
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./blocks/*": "./src/blocks/*/index.ts",
+    "./layouts/*": "./src/layouts/*/index.ts",
+    "./theme": "./src/theme/index.ts",
+    "./lib/*": "./src/lib/*.ts",
+    "./tokens": "./src/tokens/index.ts",
+    "./styles": "./src/styles/globals.css",
+    "./design-system": "./src/design-system/index.ts",
+    "./templates/*": "./src/templates/*/index.ts"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@base-ui/react": "latest",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tabler/icons-react": "latest",
+    "@tanstack/react-table": "^9.1.2",
+    "@tiptap/core": "^3.30.2",
+    "@tiptap/extension-color": "^3.30.2",
+    "@tiptap/extension-highlight": "^3.30.2",
+    "@tiptap/extension-image": "^3.30.2",
+    "@tiptap/extension-link": "^3.30.2",
+    "@tiptap/extension-mention": "^3.30.2",
+    "@tiptap/extension-placeholder": "^3.30.2",
+    "@tiptap/extension-subscript": "^3.30.2",
+    "@tiptap/extension-superscript": "^3.30.2",
+    "@tiptap/extension-task-item": "^3.30.2",
+    "@tiptap/extension-task-list": "^3.30.2",
+    "@tiptap/extension-text-align": "^3.30.2",
+    "@tiptap/extension-text-style": "^3.30.2",
+    "@tiptap/extension-underline": "^3.30.2",
+    "@tiptap/react": "^3.30.2",
+    "@tiptap/starter-kit": "^3.30.2",
+    "@tiptap/suggestion": "^3.30.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^13.1.0",
+    "input-otp": "^1.5.0",
+    "jspdf": "^4.2.1",
+    "lucide-react": "^1.33.0",
+    "mermaid": "latest",
+    "react-day-picker": "^10.0.1",
+    "react-is": "^19.3.0",
+    "react-markdown": "latest",
+    "react-resizable-panels": "^4.12.3",
+    "recharts": "^3.10.1",
+    "remark-gfm": "latest",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@devxcrew/tools": "0.1.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devxcrew/ui.git"
+  },
+  "scripts": {
+    "github:now": "node ../../shared/mcp-governance/client/repository.mjs github:now",
+    "version:update": "node ../../shared/mcp-governance/client/repository.mjs version:bump",
+    "fix:line-endings": "node ../../shared/mcp-governance/client/repository.mjs lines:fix",
+    "check:versions": "node ../../shared/mcp-governance/client/repository.mjs check:versions",
+    "version:show": "node ../../shared/mcp-governance/client/repository.mjs version:show",
+    "version:bump": "node ../../shared/mcp-governance/client/repository.mjs version:bump",
+    "changelog:append": "node ../../shared/mcp-governance/client/repository.mjs changelog:append",
+    "changelog:show": "node ../../shared/mcp-governance/client/repository.mjs changelog:show",
+    "tools:lines:fix": "node ../../shared/mcp-governance/client/repository.mjs lines:fix",
+    "lines:check": "node ../../shared/mcp-governance/client/repository.mjs lines:check",
+    "tools:check": "devxcrew-tools dependencies:order && node ../../shared/mcp-governance/client/repository.mjs check:versions && devxcrew-tools lines:check",
+    "check": "npm run tools:check",
+    "mcp:connect": "node agent/connect.mjs",
+    "mcp:verify": "node agent/connect.mjs --strict",
+    "version-bump": "node ../../shared/mcp-governance/client/repository.mjs version:bump",
+    "prepublishOnly": "npm run release:check",
+    "release:check": "npm run check && npm pack --dry-run --ignore-scripts"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/src/blocks/agent-chat-workspace/agent-chat-workspace.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from 'react'
+import { Bot, FileText, Layers3, MessageSquareShare } from 'lucide-react'
+
+import { ChatComposer, type ChatComposerAttachment } from '../chat-composer'
+import { ChatResponseProgress, ChatTurnDivider } from '../chat-response-progress'
+import { ChatRuntimeControls } from '../chat-runtime-controls'
+import { ChatRuntimeTrace, type ChatRuntimeTraceEvent } from '../chat-runtime-trace'
+import { Button } from '../../components/button'
+import { MessageScroller, MessageScrollerButton, MessageScrollerViewport } from '../../components/message-scroller'
+
+export type AgentChatMessage = {
+  content: string
+  id: string
+  role: 'assistant' | 'error' | 'user'
+  trace?: readonly ChatRuntimeTraceEvent[]
+}
+
+export type AgentChatRuntime = {
+  connected: boolean
+  message: string
+  model: string
+  models: readonly string[]
+  provider: string
+  providers: readonly string[]
+  reasoning: string
+  reasoningLevels: readonly string[]
+}
+
+export type AgentChatWorkspaceProps = {
+  attachments?: readonly ChatComposerAttachment[]
+  draft: string
+  elapsedSeconds?: number
+  isRecording?: boolean
+  isWorking?: boolean
+  messages: readonly AgentChatMessage[]
+  onAddAttachments?: (files: File[]) => void
+  onDraftChange: (value: string) => void
+  onLongTextPaste?: (file: File) => void
+  onReconnect: () => void
+  onRemoveAttachment?: (id: string) => void
+  onRuntimeChange: (runtime: AgentChatRuntime) => void
+  onStop?: () => void
+  onSubmit: () => void
+  onVoiceToggle?: () => void
+  placeholder?: string
+  queuedSteerCount?: number
+  runtime: AgentChatRuntime
+  title?: string
+}
+
+export function AgentChatWorkspace({
+  attachments = [],
+  draft,
+  elapsedSeconds = 0,
+  isRecording = false,
+  isWorking = false,
+  messages,
+  onAddAttachments,
+  onDraftChange,
+  onLongTextPaste,
+  onReconnect,
+  onRemoveAttachment,
+  onRuntimeChange,
+  onStop,
+  onSubmit,
+  onVoiceToggle,
+  placeholder = 'Ask about a focused coding task…',
+  queuedSteerCount = 0,
+  runtime,
+  title = 'Start with an agent task',
+}: AgentChatWorkspaceProps) {
+  const [canScrollToLatest, setCanScrollToLatest] = useState(false)
+  const messageViewportRef = useRef<HTMLDivElement>(null)
+  const composerRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    composerRef.current?.focus({ preventScroll: true })
+  }, [])
+
+  function updateScrollPosition(): void {
+    const viewport = messageViewportRef.current
+    if (!viewport) return
+    setCanScrollToLatest(viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop > 8)
+  }
+
+  function scrollToLatest(): void {
+    messageViewportRef.current?.scrollTo({ top: messageViewportRef.current.scrollHeight, behavior: 'smooth' })
+    setCanScrollToLatest(false)
+  }
+
+  return (
+    <section aria-label="Agent chat" className="flex size-full min-h-0 flex-col bg-background">
+      <header className="grid shrink-0 gap-3 border-b border-border px-4 py-3 sm:px-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+        <div className="min-w-0">
+          <h1 className="truncate text-sm font-semibold tracking-tight">{title}</h1>
+          <div className="mt-2 flex flex-wrap gap-1">
+            <Button className="h-7 px-2 text-xs" size="sm" variant="secondary">Explore</Button>
+            <Button className="h-7 px-2 text-xs" size="sm" variant="ghost">Plan</Button>
+            <Button className="h-7 px-2 text-xs" size="sm" variant="ghost">Execute</Button>
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-1">
+          <Button aria-label="Open chat context" size="icon-sm" variant="ghost"><Layers3 /></Button>
+          <Button aria-label="Open task brief" size="sm" variant="outline"><FileText /> Brief</Button>
+          <Button aria-label="Share chat" size="icon-sm" variant="ghost"><MessageSquareShare /></Button>
+          <ChatRuntimeControls
+            connected={runtime.connected}
+            message={runtime.message}
+            model={runtime.model}
+            models={runtime.models}
+            onModelChange={(model) => onRuntimeChange({ ...runtime, model })}
+            onProviderChange={(provider) => onRuntimeChange({ ...runtime, provider })}
+            onReasoningChange={(reasoning) => onRuntimeChange({ ...runtime, reasoning })}
+            onReconnect={onReconnect}
+            provider={runtime.provider}
+            providers={runtime.providers}
+            reasoning={runtime.reasoning}
+            reasoningLevels={runtime.reasoningLevels}
+          />
+        </div>
+      </header>
+
+      <MessageScroller>
+        <MessageScrollerViewport ref={messageViewportRef} className="px-6 py-7 [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1" onScroll={updateScrollPosition}>
+          <div className="mx-auto flex w-4/5 flex-col gap-3">
+            {messages.map((message) => (
+              <div key={message.id} className={`group flex flex-col ${message.role === 'user' ? 'w-fit max-w-[80%] self-end' : 'w-full self-start'}`}>
+                <article className={message.role === 'user' ? 'rounded-sm bg-muted/60 px-4 py-3 text-foreground shadow-sm' : 'px-4 py-3'}>
+                  <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">{message.role === 'assistant' ? <Bot aria-hidden="true" className="size-3.5" /> : null}{message.role === 'user' ? 'You' : message.role === 'error' ? 'Connection' : 'CodeLoop'}</p>
+                  {message.content ? <p className="mt-1 whitespace-pre-wrap text-sm leading-6">{message.content}</p> : null}
+                  {message.trace?.length ? <ChatRuntimeTrace className="mt-2" elapsedSeconds={elapsedSeconds} events={message.trace} isWorking={isWorking} /> : null}
+                </article>
+                {message.role === 'assistant' ? <ChatTurnDivider /> : null}
+              </div>
+            ))}
+            {isWorking ? <div className="px-4"><ChatResponseProgress elapsedSeconds={elapsedSeconds} label="Working" tone="orange" /></div> : null}
+          </div>
+        </MessageScrollerViewport>
+        {canScrollToLatest ? <MessageScrollerButton aria-label="Scroll to latest message" className="border-border shadow-sm" onClick={scrollToLatest} /> : null}
+      </MessageScroller>
+
+      <footer className="sticky bottom-0 z-10 shrink-0 bg-background px-6 py-4">
+        <ChatComposer
+          attachments={attachments}
+          isRecording={isRecording}
+          isWorking={isWorking}
+          onAddFiles={onAddAttachments}
+          onLongTextPaste={onLongTextPaste}
+          onRemoveAttachment={onRemoveAttachment}
+          onStop={onStop}
+          onSubmit={onSubmit}
+          onValueChange={onDraftChange}
+          onVoiceToggle={onVoiceToggle}
+          placeholder={placeholder}
+          queuedSteerCount={queuedSteerCount}
+          textareaRef={composerRef}
+          value={draft}
+        />
+      </footer>
+    </section>
+  )
+}

package/src/blocks/agent-chat-workspace/index.ts

@@ -0,0 +1,2 @@
+export { AgentChatWorkspace } from './agent-chat-workspace'
+export type { AgentChatMessage, AgentChatRuntime, AgentChatWorkspaceProps } from './agent-chat-workspace'

package/src/blocks/agent-provider-settings/agent-provider-settings.tsx

@@ -0,0 +1,183 @@
+import { useEffect, useRef, useState } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { CheckCircle2, Eye, EyeOff } from 'lucide-react'
+
+import { Badge } from '../../components/badge'
+import { Button } from '../../components/button'
+import { Input } from '../../components/input'
+import { Label } from '../../components/label'
+import { Separator } from '../../components/separator'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/select'
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../components/sheet'
+import { Switch } from '../../components/switch'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/tabs'
+
+export type AgentProviderSettingsItem = {
+  apiKey?: string
+  apiKeyConfigured?: boolean
+  apiKeyHint?: string
+  apiKeyLabel?: string
+  apiKeyPlaceholder?: string
+  connectionMessage?: string
+  connectionStatus?: 'connected' | 'error' | 'idle' | 'checking'
+  description: string
+  enabled: boolean
+  endpoint: string
+  icon: LucideIcon
+  id: string
+  model: string
+  modelOptions?: readonly string[]
+  name: string
+}
+
+export type AgentProviderVerificationResult = {
+  message: string
+  models?: readonly string[]
+  status: 'connected' | 'error'
+}
+
+export type AgentProviderSmokeTestResult = {
+  latencyMs: number
+  message: string
+  model?: string
+  response?: string
+  status: 'connected' | 'error'
+}
+
+export type AgentProviderSettingsProps = {
+  embedded?: boolean
+  onClose?: () => void
+  onOpenChange: (open: boolean) => void
+  onSave: (providers: readonly AgentProviderSettingsItem[]) => void | Promise<void>
+  onSmokeTestProvider?: (provider: AgentProviderSettingsItem, signal: AbortSignal) => Promise<AgentProviderSmokeTestResult>
+  onVerifyProvider?: (provider: AgentProviderSettingsItem, signal: AbortSignal) => Promise<AgentProviderVerificationResult>
+  open: boolean
+  providers: readonly AgentProviderSettingsItem[]
+}
+
+export function AgentProviderSettings({ embedded = false, onClose, onOpenChange, onSave, onSmokeTestProvider, onVerifyProvider, open, providers }: AgentProviderSettingsProps) {
+  const [draft, setDraft] = useState<AgentProviderSettingsItem[]>([])
+  const [activeProviderId, setActiveProviderId] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [smokeResult, setSmokeResult] = useState<AgentProviderSmokeTestResult | undefined>()
+  const verificationController = useRef<AbortController | null>(null)
+  const smokeController = useRef<AbortController | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    setDraft(providers.map((provider) => ({ ...provider })))
+    setActiveProviderId((current) => current || providers[0]?.id || '')
+    setSmokeResult(undefined)
+  }, [open, providers])
+
+  const activeProvider = draft.find((provider) => provider.id === activeProviderId) ?? draft[0]
+
+  function updateProvider(changes: Partial<AgentProviderSettingsItem>): void {
+    if (!activeProvider) return
+    setDraft((items) => items.map((provider) => provider.id === activeProvider.id ? { ...provider, ...changes } : provider))
+  }
+
+  async function save(): Promise<void> {
+    setSaving(true)
+    try {
+      await onSave(draft)
+      onOpenChange(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function verifyProvider(provider: AgentProviderSettingsItem): Promise<void> {
+    if (!onVerifyProvider) return
+    verificationController.current?.abort()
+    const controller = new AbortController()
+    verificationController.current = controller
+    updateProvider({ connectionStatus: 'checking', connectionMessage: 'Checking connection…' })
+    try {
+      const result = await onVerifyProvider(provider, controller.signal)
+      setDraft((items) => items.map((item) => item.id === provider.id ? {
+        ...item,
+        connectionStatus: result.status,
+        connectionMessage: result.message,
+        modelOptions: result.models ?? item.modelOptions,
+      } : item))
+    } catch (error) {
+      const stopped = controller.signal.aborted
+      setDraft((items) => items.map((item) => item.id === provider.id ? { ...item, connectionStatus: stopped ? 'idle' : 'error', connectionMessage: stopped ? 'Verification stopped.' : error instanceof Error ? error.message : 'Connection verification failed.' } : item))
+    } finally {
+      if (verificationController.current === controller) verificationController.current = null
+    }
+  }
+
+  function stopVerification(): void {
+    const controller = verificationController.current
+    if (!controller) return
+    controller.abort()
+    setDraft((items) => items.map((item) => item.id === activeProviderId ? { ...item, connectionStatus: 'idle', connectionMessage: 'Verification stopped.' } : item))
+    verificationController.current = null
+  }
+
+  async function smokeTestProvider(provider: AgentProviderSettingsItem): Promise<void> {
+    if (!onSmokeTestProvider) return
+    smokeController.current?.abort()
+    const controller = new AbortController()
+    smokeController.current = controller
+    setSmokeResult({ latencyMs: 0, message: 'Running smoke test…', status: 'error' })
+    try {
+      setSmokeResult(await onSmokeTestProvider(provider, controller.signal))
+    } catch (error) {
+      setSmokeResult({ latencyMs: 0, message: controller.signal.aborted ? 'Smoke test stopped.' : error instanceof Error ? error.message : 'Smoke test failed.', status: 'error' })
+    } finally {
+      if (smokeController.current === controller) smokeController.current = null
+    }
+  }
+
+  const content = <>
+    {draft.length ? (
+      <Tabs className="min-h-0 flex-1" orientation="vertical" value={activeProvider?.id} onValueChange={(value) => setActiveProviderId(value)}>
+        <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4 sm:flex-row sm:p-6 lg:p-8">
+          <TabsList className="h-fit w-full shrink-0 flex-col items-stretch gap-1 bg-transparent p-0 sm:w-56" variant="line">
+            {draft.map((provider) => <TabsTrigger key={provider.id} className="min-h-10 w-full justify-start rounded-none px-3 font-normal text-muted-foreground after:hidden data-active:bg-muted/70 data-active:text-foreground data-active:before:absolute data-active:before:inset-y-0 data-active:before:left-0 data-active:before:w-0.5 data-active:before:bg-foreground" value={provider.id}><provider.icon className="size-4" />{provider.name}</TabsTrigger>)}
+          </TabsList>
+          {activeProvider ? <TabsContent className="min-w-0 flex-1 rounded-lg border p-5 sm:p-6" value={activeProvider.id}><ProviderPanel onChange={updateProvider} onSmokeTest={onSmokeTestProvider ? () => void smokeTestProvider(activeProvider) : undefined} onStop={stopVerification} onVerify={() => verifyProvider(activeProvider)} provider={activeProvider} smokeResult={smokeResult} /></TabsContent> : null}
+        </div>
+      </Tabs>
+    ) : <p className="p-4 text-sm text-muted-foreground">No providers are configured.</p>}
+  </>
+
+  if (embedded) return <section aria-label="Provider settings" className="flex size-full min-h-0 flex-col overflow-hidden bg-background">
+    <header className="flex shrink-0 items-start justify-between gap-4 border-b px-6 py-5 lg:px-8">
+      <h1 className="text-xl font-semibold tracking-tight">Provider settings</h1>
+      <div className="flex shrink-0 items-center gap-2"><Button variant="outline" disabled={saving} onClick={onClose}>Back to workspace</Button><Button disabled={!draft.length || saving} onClick={() => void save()}>{saving ? 'Saving…' : 'Save provider settings'}</Button></div>
+    </header>
+    <div className="mx-auto flex min-h-0 w-full max-w-7xl flex-1 flex-col">{content}</div>
+  </section>
+
+  return <Sheet open={open} onOpenChange={onOpenChange}>
+    <SheetContent className="gap-0 p-0 sm:max-w-xl" side="right">
+      <SheetHeader className="border-b pr-12"><SheetTitle>Provider settings</SheetTitle></SheetHeader>
+      {content}
+      <SheetFooter className="border-t"><Button variant="outline" disabled={saving} onClick={() => onOpenChange(false)}>Cancel</Button><Button disabled={!draft.length || saving} onClick={() => void save()}>{saving ? 'Saving…' : 'Save provider settings'}</Button></SheetFooter>
+    </SheetContent>
+  </Sheet>
+}
+
+function ProviderPanel({ onChange, onSmokeTest, onStop, onVerify, provider, smokeResult }: { onChange: (changes: Partial<AgentProviderSettingsItem>) => void; onSmokeTest?: () => void; onStop: () => void; onVerify: () => Promise<void>; provider: AgentProviderSettingsItem; smokeResult?: AgentProviderSmokeTestResult }) {
+  const [showKey, setShowKey] = useState(false)
+  const Icon = provider.icon
+
+  return <div className="flex flex-col gap-5">
+    <div className="flex items-start gap-3">
+      <span className="grid size-10 shrink-0 place-items-center rounded-md border bg-muted"><Icon className="size-5" /></span>
+      <div className="min-w-0 flex-1"><h2 className="text-base font-semibold">{provider.name}</h2></div>
+      <Badge variant={provider.connectionStatus === 'connected' ? 'secondary' : 'outline'}>{provider.connectionStatus === 'connected' ? 'Connected' : provider.enabled ? 'Enabled' : 'Disabled'}</Badge>
+    </div>
+    <Separator />
+    <div className="flex items-center justify-between gap-3"><Label htmlFor={`${provider.id}-enabled`}>Use provider</Label><Switch id={`${provider.id}-enabled`} checked={provider.enabled} onCheckedChange={(enabled) => onChange({ enabled })} /></div>
+    <div className="grid gap-2"><Label htmlFor={`${provider.id}-endpoint`}>Endpoint</Label><Input id={`${provider.id}-endpoint`} value={provider.endpoint} onChange={(event) => onChange({ endpoint: event.target.value })} /></div>
+    <div className="grid gap-2"><Label htmlFor={`${provider.id}-model`}>Default model</Label>{provider.modelOptions?.length ? <Select value={provider.model} onValueChange={(model) => onChange({ model: model ?? '' })}><SelectTrigger id={`${provider.id}-model`} className="w-full"><SelectValue placeholder="Select a model" /></SelectTrigger><SelectContent>{provider.modelOptions.map((model) => <SelectItem key={model} value={model}>{model}</SelectItem>)}</SelectContent></Select> : <Input id={`${provider.id}-model`} value={provider.model} onChange={(event) => onChange({ model: event.target.value })} />}</div>
+    <div className="grid gap-2"><Label htmlFor={`${provider.id}-key`}>{provider.apiKeyLabel ?? 'API key'}</Label><div className="flex gap-2"><Input id={`${provider.id}-key`} type={showKey ? 'text' : 'password'} value={provider.apiKey ?? ''} placeholder={provider.apiKeyPlaceholder ?? (provider.apiKeyConfigured ? 'Configured in runtime' : 'Not configured')} onChange={(event) => onChange({ apiKey: event.target.value, apiKeyConfigured: Boolean(event.target.value) })} /><Button aria-label={showKey ? 'Hide API key' : 'Show API key'} size="icon-sm" variant="outline" onClick={() => setShowKey((value) => !value)}>{showKey ? <EyeOff /> : <Eye />}</Button></div></div>
+    <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4"><div className="flex min-w-0 items-center gap-2 text-sm">{provider.connectionStatus === 'connected' ? <CheckCircle2 className="size-4 text-emerald-600" /> : null}<span className={provider.connectionStatus === 'error' ? 'text-destructive' : 'text-muted-foreground'}>{provider.connectionMessage ?? 'Not verified'}</span></div><div className="flex items-center gap-2">{onSmokeTest ? <Button disabled={provider.connectionStatus !== 'connected'} variant="outline" onClick={onSmokeTest}>{smokeResult?.message === 'Running smoke test…' ? 'Testing…' : 'Smoke test'}</Button> : null}{provider.connectionStatus === 'checking' ? <Button variant="outline" onClick={onStop}>Stop</Button> : <Button variant="outline" onClick={() => void onVerify()}>{provider.connectionStatus === 'connected' ? 'Verify again' : 'Connect and verify'}</Button>}</div></div>
+    {smokeResult ? <div className={`rounded-md border px-3 py-2 text-sm ${smokeResult.status === 'connected' ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-destructive/30 bg-destructive/5 text-destructive'}`} role="status"><div>{smokeResult.message}{smokeResult.latencyMs > 0 ? ` (${smokeResult.latencyMs} ms)` : ''}</div>{smokeResult.response ? <div className="mt-1 break-words font-mono text-xs">{smokeResult.response}</div> : null}</div> : null}
+  </div>
+}

package/src/blocks/agent-provider-settings/index.ts

@@ -0,0 +1,2 @@
+export { AgentProviderSettings } from './agent-provider-settings'
+export type { AgentProviderSettingsItem, AgentProviderSettingsProps, AgentProviderSmokeTestResult, AgentProviderVerificationResult } from './agent-provider-settings'

package/src/blocks/agent-task-workspace/agent-task-workspace.tsx

@@ -0,0 +1,48 @@
+import { ChevronLeftIcon, ClipboardListIcon, FolderKanbanIcon } from "lucide-react";
+import { Button } from "../../components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card";
+
+export type AgentTaskWorkspaceItem = {
+  acceptanceCriteria: string;
+  briefId: string;
+  createdAt: string;
+  id: string;
+  projectReference: string | null;
+  projectScope: "project" | "all-projects";
+  priority: "low" | "medium" | "high";
+  status: string;
+  summary: string;
+  title: string;
+};
+
+export type AgentTaskWorkspaceProps = {
+  onBack: () => void;
+  onSelectTask: (id: string) => void;
+  selectedTaskId?: string;
+  tasks: readonly AgentTaskWorkspaceItem[];
+};
+
+export function AgentTaskWorkspace({ onBack, onSelectTask, selectedTaskId, tasks }: AgentTaskWorkspaceProps) {
+  const selectedTask = tasks.find((task) => task.id === selectedTaskId) ?? tasks[0];
+
+  return <section className="flex size-full min-h-0 flex-col bg-background">
+    <header className="flex shrink-0 items-center gap-3 border-b px-4 py-3 sm:px-6">
+      <Button size="sm" variant="ghost" onClick={onBack}><ChevronLeftIcon /> Conversation</Button>
+      <div className="min-w-0 flex-1"><h1 className="truncate text-sm font-semibold">Agent tasks</h1><p className="text-xs text-muted-foreground">Prepared handovers retain their final brief and project reference.</p></div>
+    </header>
+    <main className="min-h-0 flex-1 overflow-y-auto px-4 py-6 sm:px-6">
+      <div className="mx-auto grid w-full max-w-5xl gap-4 lg:grid-cols-[minmax(16rem,0.8fr)_minmax(0,1.4fr)]">
+        <div className="flex flex-col gap-2">{tasks.length ? tasks.map((task) => <Button key={task.id} className="h-auto justify-start whitespace-normal p-3 text-left" variant={task.id === selectedTask?.id ? "secondary" : "outline"} onClick={() => onSelectTask(task.id)}><ClipboardListIcon className="mt-0.5 shrink-0" /><span className="min-w-0"><span className="block truncate font-medium">{task.title}</span><span className="block text-xs font-normal text-muted-foreground">{task.status} · {projectLabel(task)}</span></span></Button>) : <p className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">No prepared tasks yet. Finalize an idea brief and hand it over here.</p>}</div>
+        {selectedTask ? <Card size="sm"><CardHeader><CardTitle>{selectedTask.title}</CardTitle><CardDescription>{selectedTask.status} · {selectedTask.priority} priority · prepared from final brief</CardDescription></CardHeader><CardContent className="grid gap-5 text-sm"><section><p className="mb-1 text-xs font-medium uppercase text-muted-foreground">Task summary</p><p className="whitespace-pre-wrap leading-6">{selectedTask.summary}</p></section>{selectedTask.acceptanceCriteria ? <section><p className="mb-1 text-xs font-medium uppercase text-muted-foreground">Acceptance criteria</p><p className="whitespace-pre-wrap leading-6">{selectedTask.acceptanceCriteria}</p></section> : null}<section className="grid gap-3 sm:grid-cols-2"><Meta label="Project" value={projectLabel(selectedTask)} /><Meta label="Created" value={new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(selectedTask.createdAt))} /><Meta label="Task reference" value={selectedTask.id} /><Meta label="Final brief reference" value={selectedTask.briefId} /></section></CardContent></Card> : null}
+      </div>
+    </main>
+  </section>;
+}
+
+function projectLabel(task: AgentTaskWorkspaceItem): string {
+  return task.projectScope === "all-projects" ? "All projects" : task.projectReference ?? "Project not set";
+}
+
+function Meta({ label, value }: { label: string; value: string }) {
+  return <div className="flex gap-2"><FolderKanbanIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" /><div className="min-w-0"><p className="text-xs text-muted-foreground">{label}</p><p className="break-all">{value}</p></div></div>;
+}

package/src/blocks/agent-task-workspace/index.ts

@@ -0,0 +1,2 @@
+export { AgentTaskWorkspace } from "./agent-task-workspace";
+export type { AgentTaskWorkspaceItem, AgentTaskWorkspaceProps } from "./agent-task-workspace";

package/src/blocks/analysis-context/analysis-context.tsx

@@ -0,0 +1,6 @@
+import { FolderSearchIcon, ShieldCheckIcon } from "lucide-react";
+
+export function AnalysisContext({ root }: { root?: string | null }) {
+  if (!root) return null;
+  return <div className="mx-auto mb-3 flex w-4/5 items-center gap-2 rounded-md border border-border/70 bg-muted/30 px-3 py-2 text-xs text-muted-foreground"><FolderSearchIcon className="size-3.5 shrink-0" /><span className="min-w-0 flex-1 truncate">Read-only project analysis: {root}</span><span className="flex shrink-0 items-center gap-1"><ShieldCheckIcon className="size-3.5" /> No writes</span></div>;
+}

package/src/blocks/analysis-context/index.ts

@@ -0,0 +1 @@
+export { AnalysisContext } from "./analysis-context";