chore(web): use @parallelworks/ui 0.20, with the chat from @parallelworks/ui/ai

web/package.json

@@ -12,8 +12,8 @@
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource-variable/public-sans": "^5.3.0",
-    "@parallelworks/ai-chat": "0.5.0",
-    "@parallelworks/ui": "^0.17.0",
+    "@parallelworks/ui": "^0.20.0",
+    "@parallelworks/workflow-parser": "^0.6.0",
     "formik": "^2.4.9",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

web/src/adapter.ts

@@ -1,4 +1,4 @@
-import type { ChatAdapter, ModelsList, StreamCompletion } from '@parallelworks/ai-chat'
+import type { ChatAdapter, ModelsList, StreamCompletion } from '@parallelworks/ui/ai'
 import { getLabelScope, getPersona } from './labelScope'
 import { fetchModels } from './api'
 

web/src/components/ChatsManager.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef, useState } from 'react'
-import { useChat } from '@parallelworks/ai-chat'
+import { useChat } from '@parallelworks/ui/ai'
 import { deleteConversations, isOwnConversation } from '../adapter'
 
 /**

web/src/components/ConversationScrubber.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { useChat } from '@parallelworks/ai-chat'
+import { useChat } from '@parallelworks/ui/ai'
 
 /**
  * A rail of ticks along the bottom of the thread, one per message, so a

web/src/components/DagViewer.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
-import { DependencyGraphPreview } from '@parallelworks/ui/workflow'
+import { Suspense, useEffect, useRef, useState } from 'react'
+import { DependencyGraphPreview } from '@parallelworks/ui/graph'
 
 interface DagData {
   name: string
@@ -175,7 +175,7 @@ export function DagViewer({ workflow, path }: { workflow?: string; path?: string
           {/* The platform's own graph. Its run view (per-step status icons)
               needs an actual run; a definition renders as job cards, which
               is what ACTIVATE shows for a workflow too. */}
-          <DependencyGraphPreview yml={dag.yaml} removeBorder />
+          <Suspense fallback={null}><DependencyGraphPreview yml={dag.yaml} removeBorder /></Suspense>
         </div>
       ) : (
       <div className="dag-canvas own-dag">

web/src/components/NextUp.tsx

@@ -1,4 +1,4 @@
-import { useChat } from '@parallelworks/ai-chat'
+import { useChat } from '@parallelworks/ui/ai'
 import { useEffect, useRef, useState } from 'react'
 
 /**

web/src/layers.css

@@ -1,13 +1,13 @@
 /*
  * Cascade layer order, declared before any stylesheet loads.
  *
- * The package stylesheets nest their rules in the pw-ui and pw-ai-chat
- * layers, except one: the compiled ui stylesheet (0.16) also emits a
- * top-level `base` layer that gives every input and textarea a border,
- * padding, and background. Declared after the package layers, it
+ * The UI package's stylesheet nests its rules in the pw-ui layer, but the
+ * compiled build also emits a top-level `base` layer that gives every
+ * input and textarea a border, padding, and background. Declared after the
+ * package layer, it
  * outranked their utilities, so the chat composer grew a second border
  * and the conversation search lost the padding that clears its icon.
  * Naming `base` first makes it the lowest layer. The Studio's own inputs
  * all carry their own classes and are unaffected.
  */
-@layer base, pw-ui, pw-ai-chat;
+@layer base, pw-ui;

web/src/main.tsx

@@ -2,28 +2,33 @@
 import './install'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { UIProvider } from '@parallelworks/ui'
 import App from './App'
 import { rememberHashChanges, restoreLastHash } from './lastLocation'
 import { applyRememberedFavicon } from './config'
 import '@fontsource-variable/public-sans'
 import '@fontsource-variable/geist-mono'
-// Two packages ship their own Tailwind build, and their utilities collide at
-// equal specificity, so whichever loads last wins. The chat package must come
-// second: its responsive variants (a two-column starter grid, for one) were
-// being overridden by the UI package's base utilities. Ours loads last of all.
+// The UI package's prebuilt stylesheet (chat rules included) loads before
+// ours, so ours wins at equal specificity.
 import './layers.css'
 import '@parallelworks/ui/styles.css'
 import '@parallelworks/ui/theme.css'
-import '@parallelworks/ai-chat/styles.css'
 import './styles.css'
 
 // Before the first render: components read the hash while initializing.
 restoreLastHash()
 rememberHashChanges()
 applyRememberedFavicon()
 
+// The workflow parser (and its WebAssembly) loads only once a workflow form
+// or graph first renders.
+const loadWorkflowEngine = () =>
+  import('@parallelworks/workflow-parser').then(m => m.createWorkflowEngine())
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <UIProvider engine={loadWorkflowEngine}>
+      <App />
+    </UIProvider>
   </React.StrictMode>,
 )

web/src/views/ChatView.tsx

@@ -6,7 +6,7 @@ import { VoiceOverlay } from '../components/VoiceOverlay'
 import { rememberHash } from '../lastLocation'
 import {
   ChatProvider, ChatLayout, ChatThread, ChatEmptyState, AttachmentManager, useChat,
-} from '@parallelworks/ai-chat'
+} from '@parallelworks/ui/ai'
 import { ChatsManager } from '../components/ChatsManager'
 import { ManageChatsRailItem } from '../components/ManageChatsRailItem'
 import { createStudioAdapter, getChatListFilter, setChatListFilter, setViewerUsername } from '../adapter'

web/src/views/WorkflowsView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
 import type { FormikProps, FormikValues } from 'formik'
 import { DynamicForm, initializeValues } from '@parallelworks/ui/form'
 import { useWorkflowFields, forgetPlatformData } from '../components/WorkflowFields'
@@ -162,8 +162,10 @@ function WorkflowRunner({ name, kind, title, onBack, onLaunched }: { name: strin
           )}
           <div className="wf-form">
             {doc.form && Object.keys(doc.form).length
-              ? <DynamicForm key={`${name}:${preset}`} formJSONs={doc.form} initialValues={initial} formikRef={formik}
-                  fields={fields} workflowForm labelPosition="left" contextKey={preset || 'defaults'} />
+              ? <Suspense fallback={<p className="muted">Loading form…</p>}>
+                  <DynamicForm key={`${name}:${preset}`} formJSONs={doc.form} initialValues={initial} formikRef={formik}
+                    fields={fields} workflowForm labelPosition="left" contextKey={preset || 'defaults'} />
+                </Suspense>
               : <p className="muted">This workflow takes no inputs.</p>}
           </div>
           <div className="query-actions wf-actions">