Dashboard quick starters open a chat, not a workflow (#4740)

Author: georgi

web/src/components/chat/composer/MediaChatComposer.tsx

@@ -84,6 +84,7 @@ import { usePromptHistory } from "../hooks/usePromptHistory";
 import { useMessageQueue } from "../../../hooks/useMessageQueue";
 import { createMediaComposerStyles } from "./MediaChatComposer.styles";
 import useModelPreferencesStore from "../../../stores/ModelPreferencesStore";
+import { useChatDraftStore } from "../../../stores/ChatDraftStore";
 import { StopGenerationButton } from "./StopGenerationButton";
 import PermissionSelector from "./PermissionSelector";
 import { useElapsedTime } from "../../../hooks/useElapsedTime";
@@ -130,6 +131,10 @@ export interface MediaChatComposerProps {
   /** Pure chat panel: hide the mode picker and force "chat" mode. Used by the
    *  app builder / video / 3d editor agent panels which are hardcoded to chat. */
   hideModePicker?: boolean;
+  /** Thread this composer writes to. A surface that opened the thread with a
+   *  prompt in mind (the dashboard quick starters) seeds it through
+   *  ChatDraftStore; the seed lands in the textarea once, unsent. */
+  threadId?: string | null;
 }
 
 /**
@@ -165,7 +170,8 @@ const MediaChatComposer: React.FC<MediaChatComposerProps> = ({
   trailingActions,
   leadingActions,
   placeholder: placeholderOverride,
-  hideModePicker = false
+  hideModePicker = false,
+  threadId
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => createMediaComposerStyles(theme), [theme]);
@@ -327,6 +333,19 @@ const MediaChatComposer: React.FC<MediaChatComposerProps> = ({
     }
   }, [autoFocus, autoFocusEnabled]);
 
+  // A seeded prompt is consumed once, and only into an empty box — the user's
+  // own half-written text always wins.
+  const takeDraft = useChatDraftStore((s) => s.takeDraft);
+  useEffect(() => {
+    if (!threadId) {
+      return;
+    }
+    const draft = takeDraft(threadId);
+    if (draft) {
+      setPrompt((current) => (current ? current : draft));
+    }
+  }, [threadId, takeDraft]);
+
   // Close any open model / option dialogs whenever the mode changes. The
   // image- and video-model dialogs are intentionally shared between the
   // `image`/`image_edit` and `video`/`image_to_video` chip clusters

web/src/components/chat/containers/ChatInputSection.tsx

@@ -70,6 +70,8 @@ type ChatInputSectionProps = {
   placeholder?: string;
   /** Pure chat panel: hide the media mode picker, force chat mode. */
   hideModePicker?: boolean;
+  /** Thread this composer writes to; used to pick up a seeded prompt. */
+  threadId?: string | null;
 };
 
 const ChatInputSection = ({
@@ -86,7 +88,8 @@ const ChatInputSection = ({
   variant = "media",
   composerToolbar,
   placeholder,
-  hideModePicker
+  hideModePicker,
+  threadId
 }: ChatInputSectionProps) => {
   const isLoading = status === "loading";
   const isStreaming = status === "streaming";
@@ -119,6 +122,7 @@ const ChatInputSection = ({
             requireToolSupport={requireToolSupport}
             placeholder={placeholder}
             hideModePicker={hideModePicker}
+            threadId={threadId}
           />
         )}
       </div>

web/src/components/chat/containers/ChatView.tsx

@@ -306,6 +306,7 @@ const ChatView = ({
           composerToolbar={composerToolbar}
           placeholder={composerPlaceholder}
           hideModePicker={hideModePicker}
+          threadId={effectiveThreadId}
         />
       </div>
       {showTodoSidebar && <TodoSidebar todos={todos} />}

web/src/components/portal/Portal.tsx

@@ -19,7 +19,7 @@ import DashboardTemplates, {
 import DashboardTutorials from "./DashboardTutorials";
 import DashboardWorkflows from "./DashboardWorkflows";
 import DashboardFooter from "./DashboardFooter";
-import { useCreateStarterWorkflow } from "../../hooks/useCreateStarterWorkflow";
+import { useStartTrackChat } from "../../hooks/useStartTrackChat";
 import { WELCOME_TRACKS, type WelcomeTrackId } from "./welcomeTracks";
 import { Box, SPACING, getSpacingPx } from "../ui_primitives";
 
@@ -56,13 +56,13 @@ const Portal: React.FC = () => {
   const { sortedWorkflows, isLoadingWorkflows } = useDashboardData();
   const { handleCreateNewWorkflow } = useWorkflowActions();
 
-  const createStarterWorkflow = useCreateStarterWorkflow();
+  const startTrackChat = useStartTrackChat();
   const hasConfiguredProvider = useHasConfiguredProvider();
 
   const handlePickTrack = useCallback(
     (trackId: WelcomeTrackId) => {
-      // A starter workflow needs a model to run; route key-less users through
-      // the shared provider onboarding first so their first Run doesn't fail.
+      // The first send needs a model; route key-less users through the shared
+      // provider onboarding first so that send doesn't fail.
       if (!hasConfiguredProvider) {
         setPendingTrack(trackId);
         const track = WELCOME_TRACKS.find((t) => t.id === trackId);
@@ -76,23 +76,23 @@ const Portal: React.FC = () => {
         });
         return;
       }
-      createStarterWorkflow(trackId);
+      void startTrackChat(trackId);
     },
-    [hasConfiguredProvider, createStarterWorkflow]
+    [hasConfiguredProvider, startTrackChat]
   );
 
   // Picking a track without a provider parks it here; once one is connected the
-  // starter opens on its own, so the user finishes the thing they asked for
+  // chat opens on its own, so the user finishes the thing they asked for
   // rather than landing back on the dashboard.
-  const createStarter = useRef(createStarterWorkflow);
-  createStarter.current = createStarterWorkflow;
+  const startChat = useRef(startTrackChat);
+  startChat.current = startTrackChat;
   useEffect(() => {
     if (!pendingTrack || !hasConfiguredProvider) {
       return;
     }
     const trackId = pendingTrack;
     setPendingTrack(null);
-    createStarter.current(trackId);
+    void startChat.current(trackId);
   }, [pendingTrack, hasConfiguredProvider]);
 
   const handleOpenWorkflow = useCallback(

web/src/components/portal/WelcomeFlow.tsx

@@ -198,9 +198,9 @@ const WelcomeFlow: React.FC<WelcomeFlowProps> = ({
       </div>
       <h1 className="welcome-heading">What do you want to make today?</h1>
       <p className="welcome-sub">
-        Pick one. We&apos;ll drop a starter workflow onto the canvas so you can run
-        it and make it your own. You can always change your mind, or skip and
-        explore.
+        Pick one. We&apos;ll open a chat in that mode with an example prompt ready
+        to go — press send, or write your own. You can always change your mind,
+        or skip and explore.
       </p>
 
       <div className="welcome-grid">
@@ -226,7 +226,7 @@ const WelcomeFlow: React.FC<WelcomeFlowProps> = ({
               </div>
               <div className="welcome-card-title">{track.label}</div>
               <div className="welcome-card-blurb">{track.blurb}</div>
-              <span className="welcome-card-node">{track.nodeLabel}</span>
+              <span className="welcome-card-node">{track.modeLabel}</span>
             </button>
           );
         })}
@@ -239,7 +239,7 @@ const WelcomeFlow: React.FC<WelcomeFlowProps> = ({
           </button>
           <span className="welcome-footer-divider" />
           <span className="welcome-footer-hint">
-            Each pick is a real, editable workflow.
+            Each pick opens a chat with the prompt already written.
           </span>
         </div>
       )}

web/src/components/portal/__tests__/welcomeTracks.test.ts

@@ -3,6 +3,7 @@
  */
 import { WELCOME_TRACKS } from "../welcomeTracks";
 import type { WelcomeTrack } from "../welcomeTracks";
+import type { MediaMode } from "../../../stores/MediaGenerationStore";
 
 const tracks: WelcomeTrack[] = WELCOME_TRACKS;
 
@@ -20,12 +21,10 @@ describe("WELCOME_TRACKS", () => {
     for (const t of tracks) {
       expect(t.label.length).toBeGreaterThan(0);
       expect(t.blurb.length).toBeGreaterThan(0);
-      expect(t.nodeLabel.length).toBeGreaterThan(0);
-      expect(t.workflowName.length).toBeGreaterThan(0);
+      expect(t.modeLabel.length).toBeGreaterThan(0);
+      expect(t.threadTitle.length).toBeGreaterThan(0);
       expect(t.samplePrompt.length).toBeGreaterThan(0);
-      expect(t.modelType.length).toBeGreaterThan(0);
-      expect(t.promptInput.length).toBeGreaterThan(0);
-      expect(t.outputHandle.length).toBeGreaterThan(0);
+      expect(t.chatMode.length).toBeGreaterThan(0);
     }
   });
 
@@ -35,9 +34,10 @@ describe("WELCOME_TRACKS", () => {
     }
   });
 
-  it("model types use nodetool namespace", () => {
+  it("every track opens a composer mode the media store knows", () => {
+    const modes: MediaMode[] = ["chat", "image", "video", "audio"];
     for (const t of tracks) {
-      expect(t.modelType).toMatch(/^nodetool\./);
+      expect(modes).toContain(t.chatMode);
     }
   });
 

web/src/components/portal/welcomeTracks.ts

@@ -1,15 +1,11 @@
 /**
  * Starter tracks for the dashboard welcome flow. Each track maps a creative
- * modality to a real three-node starter graph (String -> model node ->
- * Preview) that is dropped onto the canvas when the user picks it.
- *
- * Node type strings, input handles, and output handles are the canonical
- * `nodetool.*` node identifiers (see packages/dsl/src/generated). The model
- * field on each model node is filled with the user's default model at
- * creation time via applyDefaultModels — these tracks intentionally do not
- * hardcode a provider.
+ * modality to a chat tab: picking one opens a new conversation in that
+ * modality's composer mode with the example prompt already typed, so the
+ * user's first action is pressing send.
  */
 import type { OnboardingCapability } from "../../stores/ProviderOnboardingStore";
+import type { MediaMode } from "../../stores/MediaGenerationStore";
 
 export type WelcomeTrackId = "image" | "video" | "audio" | "agent";
 
@@ -19,88 +15,71 @@ export interface WelcomeTrack {
   label: string;
   /** One-line description under the title. */
   blurb: string;
-  /** Short node-type label shown as a mono chip on the card. */
-  nodeLabel: string;
+  /** Short mode label shown as a mono chip on the card. */
+  modeLabel: string;
   /** Modality accent color used for the card icon tint. */
   accent: string;
-  /** Name given to the created workflow. */
-  workflowName: string;
-  /** Example prompt pre-filled into the String node. */
+  /** Title given to the chat tab this track opens. */
+  threadTitle: string;
+  /** Example prompt pre-filled into the composer. */
   samplePrompt: string;
-  /** Node type of the model node wired after the String. */
-  modelType: string;
-  /** Input handle on the model node that receives the prompt String. */
-  promptInput: string;
-  /** Output handle on the model node that feeds the Preview. */
-  outputHandle: string;
+  /** Composer mode the chat opens in. */
+  chatMode: MediaMode;
   /**
-   * What a provider must be able to do for this track's model node to run.
+   * What a provider must be able to do for this track's first send to work.
    * Narrows provider onboarding to the ones that unblock the track the user
    * just picked.
    */
   capability: OnboardingCapability;
 }
 
-export {
-  STRING_NODE_TYPE,
-  PREVIEW_NODE_TYPE
-} from "../../constants/nodeTypes";
-
 export const WELCOME_TRACKS: WelcomeTrack[] = [
   {
     id: "image",
     label: "Image",
     blurb: "A still frame from a prompt.",
-    nodeLabel: "TextToImage",
+    modeLabel: "image",
     accent: "#9F7AEA",
-    workflowName: "Image starter",
+    threadTitle: "Image",
     samplePrompt:
       "a brutalist concrete pavilion at dusk, fog rolling in low, single warm light from inside, photograph, medium format",
-    modelType: "nodetool.image.TextToImage",
-    promptInput: "prompt",
-    outputHandle: "output",
+    chatMode: "image",
     capability: "text_to_image"
   },
   {
     id: "video",
     label: "Video",
     blurb: "A short clip from a prompt.",
-    nodeLabel: "TextToVideo",
+    modeLabel: "video",
     accent: "#F472B6",
-    workflowName: "Video starter",
+    threadTitle: "Video",
     samplePrompt:
       "slow dolly through an empty library at golden hour, dust in the air, 24fps, cinematic",
-    modelType: "nodetool.video.TextToVideo",
-    capability: "text_to_video",
-    promptInput: "prompt",
-    outputHandle: "output"
+    chatMode: "video",
+    capability: "text_to_video"
   },
   {
     id: "audio",
     label: "Audio",
     blurb: "A spoken line or sound texture.",
-    nodeLabel: "TextToSpeech",
+    modeLabel: "audio",
     accent: "#FBBF24",
-    workflowName: "Audio starter",
+    threadTitle: "Audio",
     samplePrompt:
       "a calm narrator: you are listening to nodetool. every model, your keys, your canvas.",
-    modelType: "nodetool.audio.TextToSpeech",
-    capability: "text_to_speech",
-    promptInput: "text",
-    outputHandle: "audio"
+    chatMode: "audio",
+    capability: "text_to_speech"
   },
   {
     id: "agent",
     label: "Text · Agent",
     blurb: "A reasoning step or written output.",
-    nodeLabel: "Agent",
+    modeLabel: "chat",
     accent: "#60A5FA",
-    workflowName: "Agent starter",
+    threadTitle: "Chat",
     samplePrompt:
       "draft a 4-line tagline for a creative tool that runs every AI model locally or in the cloud, no hype words",
-    modelType: "nodetool.agents.Agent",
-    capability: "generate_message",
-    promptInput: "prompt",
-    outputHandle: "text"
+    chatMode: "chat",
+    capability: "generate_message"
   }
 ];