Integrate mobile chat workspace and OpenRouter agent flow

2026-07-25 17:49:11 +05:30
parent a17aa5c283
commit 48200a11df
24 changed files with 1142 additions and 211 deletions
--- a/apps/web/src/components/mobile-workspace/mobile-flow-page.tsx
+++ b/apps/web/src/components/mobile-workspace/mobile-flow-page.tsx
@@ -6,10 +6,12 @@ import {
  MobileWorkListScreen,
  MobileWorkUnitDetailScreen,
 } from "@code/ui/components/mobile-product";
+import type { FormEvent } from "react";
 import { useNavigate, useParams } from "react-router";

 import { useMobileProjectWorkspace } from "@/hooks/use-mobile-project-workspace";
 import { useMobileWorkspace } from "@/hooks/use-mobile-workspace";
+import { MODEL_ID, MODEL_LABEL } from "@/lib/chat/constants";

 export type MobileFlowScreen =
  | "assistant-chat"
@@ -39,7 +41,7 @@ export const MobileFlowPage = ({ screen }: MobileFlowPageProps) => {
    const targetId =
      selectedWorkUnitId ?? projectWorkspace.data.selectedWorkUnit?.id;
    if (!targetId) {
-      navigate("/dashboard");
+      workspace.setProjectManagerOpen(true);
      return;
    }
    if (screen === "work-list" && !workspace.expanded) {
@@ -54,8 +56,11 @@ export const MobileFlowPage = ({ screen }: MobileFlowPageProps) => {
    createIssueBody: workspace.issueBody,
    createIssueTitle: workspace.issueTitle,
    data: projectWorkspace.data,
+    modelId: MODEL_ID,
+    modelLabel: MODEL_LABEL,
    onBack: () => navigate(workPath),
    onComposerChange: workspace.handleComposerChange,
+    onComposerMessageSubmit: workspace.handleComposerMessageSubmit,
    onComposerSubmit: workspace.handleComposerSubmit,
    onCreateBodyChange: workspace.setIssueBody,
    onCreateIssue: workspace.handleCreateIssueSubmit,
@@ -66,16 +71,24 @@ export const MobileFlowPage = ({ screen }: MobileFlowPageProps) => {
          )
      : undefined,
    onCreateTitleChange: workspace.setIssueTitle,
-    onManageProjects: () => navigate("/dashboard"),
+    onManageProjects: () => workspace.setProjectManagerOpen(true),
    onOpenAssistant: () => navigate(chatPath),
    onOpenUnit: handleOpenUnit,
+    onProjectManagerClose: () => workspace.setProjectManagerOpen(false),
    onProjectSelect: (projectId: string) =>
      projectWorkspace.projectWorkspace.setSelectedProjectId(
        projectId as Id<"projects">
      ),
+    onRepositoryChange: projectWorkspace.projectWorkspace.setRepository,
+    onRepositoryConnect: (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      void projectWorkspace.projectWorkspace.connectRepository();
+    },
    onReviewUnit: (reviewUrl: string) => {
      window.open(reviewUrl, "_blank", "noopener,noreferrer");
    },
+    onSettingsClose: () => workspace.setSettingsOpen(false),
+    onSettingsOpen: () => workspace.setSettingsOpen(true),
    onStartUnit: (selectedIssueId: string) => {
      void projectWorkspace.startWorkUnit(
        selectedIssueId as Id<"projectIssues">
@@ -83,6 +96,9 @@ export const MobileFlowPage = ({ screen }: MobileFlowPageProps) => {
    },
    onViewWork: () => navigate(workPath),
    pendingAction: projectWorkspace.projectWorkspace.pendingAction,
+    projectManagerOpen: workspace.projectManagerOpen,
+    repositoryValue: projectWorkspace.projectWorkspace.repository,
+    settingsOpen: workspace.settingsOpen,
    statusMessage: workspace.statusMessage ?? projectWorkspace.error?.message,
  };

--- a/apps/web/src/hooks/use-mobile-project-workspace.ts
+++ b/apps/web/src/hooks/use-mobile-project-workspace.ts
@@ -79,7 +79,10 @@ export const useMobileProjectWorkspace = ({
      selectedWorkUnitId,
      signals,
    }),
-    error: organization.error ?? chatAgent.error,
+    error:
+      organization.error ??
+      chatAgent.error ??
+      (projectWorkspace.error ? new Error(projectWorkspace.error) : undefined),
    organization,
    projectWorkspace,
    raiseIssue: projectWorkspace.raiseIssue,
--- a/apps/web/src/hooks/use-mobile-workspace.ts
+++ b/apps/web/src/hooks/use-mobile-workspace.ts
@@ -19,6 +19,8 @@ export const useMobileWorkspace = ({
  const [issueBody, setIssueBody] = useState("");
  const [issueTitle, setIssueTitle] = useState("");
  const [expanded, setExpanded] = useState(initialExpanded);
+  const [projectManagerOpen, setProjectManagerOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
  const [statusMessage, setStatusMessage] = useState<string>();

  const handleComposerChange = (value: string) => {
@@ -26,23 +28,32 @@ export const useMobileWorkspace = ({
    setStatusMessage(undefined);
  };

-  const handleComposerSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const message = composerValue.trim();
-    if (!message) {
+  const submitMessage = async (message: string) => {
+    const trimmedMessage = message.trim();
+    if (!trimmedMessage) {
      return;
    }
    setStatusMessage("Sending to Zopu…");
-    const sendMessage = async () => {
+    try {
+      await onSend(trimmedMessage);
+      setComposerValue("");
+      setStatusMessage("Sent to Zopu");
+    } catch (error) {
+      setStatusMessage(errorMessage(error));
+      throw error;
+    }
+  };
+
+  const handleComposerSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const sendCurrentMessage = async () => {
      try {
-        await onSend(message);
-        setComposerValue("");
-        setStatusMessage("Sent to Zopu");
-      } catch (error) {
-        setStatusMessage(errorMessage(error));
+        await submitMessage(composerValue);
+      } catch {
+        // submitMessage already exposes the failure through statusMessage.
      }
    };
-    void sendMessage();
+    void sendCurrentMessage();
  };

  const handleCreateIssueSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -70,13 +81,18 @@ export const useMobileWorkspace = ({
    composerValue,
    expanded,
    handleComposerChange,
+    handleComposerMessageSubmit: submitMessage,
    handleComposerSubmit,
    handleCreateIssueSubmit,
    issueBody,
    issueTitle,
+    projectManagerOpen,
    setExpanded,
    setIssueBody,
    setIssueTitle,
+    setProjectManagerOpen,
+    setSettingsOpen,
+    settingsOpen,
    statusMessage,
  };
 };
--- a/apps/web/src/lib/chat/constants.ts
+++ b/apps/web/src/lib/chat/constants.ts
@@ -10,7 +10,8 @@ export const CHAT_AGENT = {
  name: "zopu",
 } as const;

-export const MODEL_LABEL = "GLM-5.2";
+export const MODEL_ID = "openrouter/openai/gpt-oss-20b:free";
+export const MODEL_LABEL = "GPT-OSS 20B Free";

 export const SUGGESTIONS = [
  ["Think it through", "Help me make a difficult decision"],
--- a/apps/web/src/lib/flue-transport.test.ts
+++ b/apps/web/src/lib/flue-transport.test.ts
@@ -4,6 +4,12 @@ import { describe, expect, test } from "vitest";
 import { createFlueFetch } from "./flue-transport";

 const BASE_URL = new URL("https://flue.example/api/");
+const GLOBAL_RECEIVER_FETCH = function globalReceiverFetch(this: unknown) {
+  if (this !== globalThis) {
+    throw new TypeError("fetch receiver must be globalThis");
+  }
+  return Promise.resolve(new Response(null, { status: 204 }));
+} as typeof fetch;

 describe("createFlueFetch", () => {
  test("overlapping SDK agent sends keep distinct request IDs", async () => {
@@ -87,6 +93,31 @@ describe("createFlueFetch", () => {
    ]);
  });

+  test("invokes fetch with the browser global receiver", async () => {
+    await expect(
+      createFlueFetch({ baseUrl: BASE_URL, fetchImpl: GLOBAL_RECEIVER_FETCH })(
+        "https://flue.example/api/agents/zopu/org-a?view=history"
+      )
+    ).resolves.toBeInstanceOf(Response);
+  });
+
+  test("uses the default browser request ID generator without losing its receiver", async () => {
+    const capturedHeaders: Headers[] = [];
+    const fetchImpl: typeof fetch = (_input, init) => {
+      capturedHeaders.push(new Headers(init?.headers));
+      return Promise.resolve(new Response(null, { status: 204 }));
+    };
+
+    await createFlueFetch({ baseUrl: BASE_URL, fetchImpl })(
+      "https://flue.example/api/agents/zopu/org-a",
+      { method: "POST" }
+    );
+
+    expect(capturedHeaders[0]?.get("x-zopu-request-id")).toMatch(
+      /^[0-9a-f-]{36}$/u
+    );
+  });
+
  test("history and stream observation requests remain untagged", async () => {
    const capturedHeaders: Headers[] = [];
    const fetchImpl: typeof fetch = (_input, init) => {
--- a/apps/web/src/lib/flue-transport.ts
+++ b/apps/web/src/lib/flue-transport.ts
@@ -4,6 +4,31 @@ interface FlueFetchOptions {
  readonly generateRequestId?: () => string;
 }

+const addRequestContext = async (
+  response: Response,
+  method: string,
+  requestUrl: URL
+): Promise<Response> => {
+  if (response.ok) {
+    return response;
+  }
+  const responseClone = response.clone();
+  const responseText = await responseClone.text();
+  const detail = responseText.trim() || "request failed";
+  return Response.json(
+    {
+      error: {
+        message: `${method} ${requestUrl.pathname}${requestUrl.search}: ${detail}`,
+      },
+    },
+    {
+      headers: response.headers,
+      status: response.status,
+      statusText: response.statusText,
+    }
+  );
+};
+
 /**
 * Build the Flue transport used by the browser client.
 *
@@ -15,7 +40,7 @@ interface FlueFetchOptions {
 export const createFlueFetch = ({
  baseUrl,
  fetchImpl = fetch,
-  generateRequestId = crypto.randomUUID,
+  generateRequestId = () => crypto.randomUUID(),
 }: FlueFetchOptions): typeof fetch => {
  const basePath = baseUrl.pathname.replace(/\/+$/u, "");

@@ -47,11 +72,9 @@ export const createFlueFetch = ({
      requestInit = { ...init, headers };
    }

-    const response = await fetchImpl(input, requestInit);
-    if (
-      !response.ok ||
-      !response.headers.get("content-type")?.includes("application/json")
-    ) {
+    const rawResponse = await fetchImpl.call(globalThis, input, requestInit);
+    const response = await addRequestContext(rawResponse, method, requestUrl);
+    if (!response.headers.get("content-type")?.includes("application/json")) {
      return response;
    }

--- a/apps/web/src/lib/mobile-workspace/build-mobile-workspace-view.ts
+++ b/apps/web/src/lib/mobile-workspace/build-mobile-workspace-view.ts
@@ -125,11 +125,16 @@ const relevantSignalsForProject = (
 const makeProjectViews = (
  projects: readonly ProjectView[] | undefined
 ): readonly MobileProjectView[] =>
-  projects?.map((project) => ({
-    connected: project.sources.length > 0,
-    id: project.id,
-    name: project.name,
-  })) ?? [];
+  projects?.map((project) => {
+    const [source] = project.sources;
+    return {
+      connected: Boolean(source),
+      host: source?.host,
+      id: project.id,
+      name: project.name,
+      repositoryPath: source?.repositoryPath,
+    };
+  }) ?? [];

 export const buildMobileWorkspaceView = ({
  artifacts,
--- a/apps/web/src/routes/app/mobile/page.tsx
+++ b/apps/web/src/routes/app/mobile/page.tsx
@@ -1,15 +1,5 @@
-import { MobileFlowPage } from "@/components/mobile-workspace/mobile-flow-page";
+import { Navigate } from "react-router";

-import type { Route } from "./+types/page";
-
-export const meta = (_args: Route.MetaArgs) => [
-  { title: "Daily focus | Zopu" },
-  {
-    content: "Supervise active work and open the next action",
-    name: "description",
-  },
-];
-
-export default function MobileHomePage() {
-  return <MobileFlowPage screen="home" />;
+export default function MobileLandingRedirect() {
+  return <Navigate replace to="/chat" />;
 }
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
  "lockfileVersion": 1,
-  "configVersion": 1,
  "workspaces": {
    "": {
      "name": "code",
--- a/packages/agents/src/agents/zopu.ts
+++ b/packages/agents/src/agents/zopu.ts
@@ -2,7 +2,6 @@ import path from "node:path";

 import { parseAgentEnv } from "@code/env/agent";
 import { defineAgent } from "@flue/runtime";
-
 // import { agentos } from "../sandboxes/agentos";
 import { local } from "@flue/runtime/node";

--- a/packages/agents/src/app.ts
+++ b/packages/agents/src/app.ts
@@ -9,18 +9,25 @@ const agentEnv = parseAgentEnv(process.env);

 registerProvider(agentEnv.AGENT_MODEL_PROVIDER, {
  api: agentEnv.AGENT_MODEL_API,
-  apiKey: agentEnv.AGENT_MODEL_API_KEY,
+  apiKey:
+    agentEnv.AGENT_MODEL_PROVIDER === "openrouter"
+      ? (agentEnv.OPENROUTER_API_KEY ?? agentEnv.AGENT_MODEL_API_KEY)
+      : agentEnv.AGENT_MODEL_API_KEY,
  baseUrl: agentEnv.AGENT_MODEL_BASE_URL,
  models: {
    [agentEnv.AGENT_MODEL_NAME]: {
      contextWindow: agentEnv.AGENT_MODEL_CONTEXT_WINDOW,
      maxTokens: agentEnv.AGENT_MODEL_MAX_TOKENS,
    },
+    "openai/gpt-oss-20b:free": {
+      contextWindow: 131_072,
+      maxTokens: agentEnv.AGENT_MODEL_MAX_TOKENS,
+    },
  },
 });

 const app = new Hono();
 app.post("/project-requests", projectRequestRoute);
-app.route("/", flue());
+app.route("/", flue() as unknown as Hono);

 export default app;
--- a/packages/agents/src/auth.ts
+++ b/packages/agents/src/auth.ts
@@ -317,4 +317,5 @@ export const authenticatedAgentRoute: AgentRouteHandler = async (c, next) => {
    clientRequestId,
    organizationId: organization._id,
  });
+  return c.res;
 };
--- a/packages/agents/src/tools/signals.ts
+++ b/packages/agents/src/tools/signals.ts
@@ -1,7 +1,9 @@
 import { parseAgentEnv } from "@code/env/agent";
-import { defineTool } from "@flue/runtime";
+import { ProjectIssueDispatchInput } from "@code/primitives/project-issue";
+import { defineTool, dispatch } from "@flue/runtime";
 import { ConvexHttpClient } from "convex/browser";
 import { makeFunctionReference } from "convex/server";
+import { Schema } from "effect";
 import * as v from "valibot";

 // ---------------------------------------------------------------------------
@@ -103,9 +105,24 @@ const beginIssueRef = makeFunctionReference<
    readonly issueId: string;
    readonly token: string;
  },
-  "queued" | "working"
+  {
+    readonly dispatchRequired: boolean;
+    readonly projectId: string;
+    readonly status: "queued" | "working";
+  }
 >("signalRouting:beginIssue");

+const markDispatchFailedRef = makeFunctionReference<
+  "mutation",
+  {
+    readonly error: string;
+    readonly issueId: string;
+    readonly organizationId: string;
+    readonly token: string;
+  },
+  null
+>("signalRouting:markDispatchFailed");
+
 const getProjectContextRef = makeFunctionReference<
  "query",
  {
@@ -306,11 +323,45 @@ export const createSignalRoutingTools = (
      }),
      name: "begin_issue",
      async run({ input }) {
-        return await client.mutation(beginIssueRef, {
+        const outcome = await client.mutation(beginIssueRef, {
          issueId: input.issueId,
          organizationId,
          token,
        });
+        const dispatchInput = Schema.decodeUnknownSync(
+          ProjectIssueDispatchInput
+        )({
+          issueId: input.issueId,
+          kind: "project.issue.started",
+          projectId: outcome.projectId,
+        });
+        if (!outcome.dispatchRequired) {
+          return {
+            acceptedAt: "",
+            dispatchId: "",
+            status: outcome.status,
+          };
+        }
+        try {
+          const receipt = await dispatch({
+            agent: "project-manager",
+            id: input.issueId,
+            input: dispatchInput,
+          });
+          return {
+            acceptedAt: receipt.acceptedAt,
+            dispatchId: receipt.dispatchId,
+            status: outcome.status,
+          };
+        } catch (error) {
+          await client.mutation(markDispatchFailedRef, {
+            error: error instanceof Error ? error.message : String(error),
+            issueId: input.issueId,
+            organizationId,
+            token,
+          });
+          throw error;
+        }
      },
    }),
  ];
--- a/packages/backend/convex/_generated/api.d.ts
+++ b/packages/backend/convex/_generated/api.d.ts
@@ -26,8 +26,10 @@ import type * as projectIssues from "../projectIssues.js";
 import type * as projectStore from "../projectStore.js";
 import type * as projects from "../projects.js";
 import type * as publicGit from "../publicGit.js";
+import type * as signalRouting from "../signalRouting.js";
 import type * as signals from "../signals.js";
 import type * as todos from "../todos.js";
+import type * as workflows from "../workflows.js";

 import type {
  ApiFromModules,
@@ -54,8 +56,10 @@ declare const fullApi: ApiFromModules<{
  projectStore: typeof projectStore;
  projects: typeof projects;
  publicGit: typeof publicGit;
+  signalRouting: typeof signalRouting;
  signals: typeof signals;
  todos: typeof todos;
+  workflows: typeof workflows;
 }>;

 /**
--- a/packages/backend/convex/_generated/server.d.ts
+++ b/packages/backend/convex/_generated/server.d.ts
@@ -26,6 +26,8 @@ import type { DataModel } from "./dataModel.js";
 */
 type Env = {
  readonly FLUE_DB_TOKEN: string;
+  readonly GITEA_TOKEN: string | undefined;
+  readonly GITEA_URL: string | undefined;
  readonly NATIVE_APP_URL: string | undefined;
  readonly SITE_URL: string;
 };
--- a/packages/backend/convex/projects.ts
+++ b/packages/backend/convex/projects.ts
@@ -1,4 +1,5 @@
 import {
+  decodePublicGitImportResult,
  preparePublicGitSource,
  type ProjectImportOutcome,
  type ProjectView,
@@ -8,15 +9,17 @@ import {
 import { v } from "convex/values";
 import { Effect } from "effect";

+import { internal } from "./_generated/api";
 import type { Id } from "./_generated/dataModel";
 import { action, internalMutation, query } from "./_generated/server";
 import { createInitialArtifacts } from "./artifactModel";
-import { requireCurrentOrganization } from "./authz";
+import { requireAuthUserId, requireCurrentOrganization } from "./authz";
 import {
  makeProjectMutationStore,
  makeProjectQueryStore,
  persistPublicGitImportTransaction,
 } from "./projectStore";
+import { inspectPublicGit } from "./publicGit";

 // ---------------------------------------------------------------------------
 // Internal: persist a public Git import in one transaction
@@ -182,18 +185,31 @@ export const get = query({
 });

 // ---------------------------------------------------------------------------
-// Public action: import a public Git repository
-// (daemon wiring added in the Daemon phase)
+// Public action: import a supported public Git repository
 // ---------------------------------------------------------------------------

 export const importPublicGit = action({
  args: { repositoryUrl: v.string() },
-  handler: async (_ctx, args): Promise<ProjectImportOutcome> => {
-    // Normalize through the domain layer to validate the URL before the
-    // daemon adapter is wired.
-    await Effect.runPromise(preparePublicGitSource(args.repositoryUrl));
-    // The daemon PublicGit adapter is wired in the Daemon phase.
-    throw new Error("PublicGit import is not yet wired to the daemon adapter");
+  handler: async (ctx, args): Promise<ProjectImportOutcome> => {
+    const userId = await requireAuthUserId(ctx);
+    const source = await Effect.runPromise(
+      preparePublicGitSource(args.repositoryUrl)
+    );
+    const remote = await inspectPublicGit(source);
+    const validatedRemote = await Effect.runPromise(
+      decodePublicGitImportResult(remote)
+    );
+    return await ctx.runMutation(internal.projects.persistPublicGitImport, {
+      remote: {
+        defaultBranch: validatedRemote.defaultBranch,
+        documents: validatedRemote.documents.map((document) => ({
+          ...document,
+        })),
+        warnings: validatedRemote.warnings.map((warning) => ({ ...warning })),
+      },
+      source,
+      userId,
+    });
  },
 });

--- a/packages/backend/convex/publicGit.test.ts
+++ b/packages/backend/convex/publicGit.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, test } from "vitest";
+
+import { inspectPublicGit } from "./publicGit";
+
+const source = {
+  host: "git.openputer.com",
+  normalizedUrl: "https://git.openputer.com/sai-karthik/hello-world",
+  projectName: "hello-world",
+  repositoryPath: "Sai-karthik/hello-world",
+  url: "https://git.openputer.com/Sai-karthik/hello-world.git",
+};
+
+describe("public Git repository inspection", () => {
+  test("imports metadata for an empty public Gitea repository", async () => {
+    const requests: string[] = [];
+    const result = await inspectPublicGit(source, {
+      fetch(input) {
+        const url = String(input);
+        requests.push(url);
+        if (url.endsWith("/api/v1/repos/Sai-karthik/hello-world")) {
+          return Promise.resolve(
+            Response.json({
+              default_branch: "main",
+              empty: true,
+            })
+          );
+        }
+        return Promise.resolve(new Response("not found", { status: 404 }));
+      },
+    });
+
+    expect(result).toMatchObject({
+      defaultBranch: "main",
+      documents: [],
+    });
+    expect(result.warnings).toHaveLength(6);
+    expect(requests).toContain(
+      "https://git.openputer.com/api/v1/repos/Sai-karthik/hello-world"
+    );
+    expect(requests).toContain(
+      "https://git.openputer.com/api/v1/repos/Sai-karthik/hello-world/raw/README.md?ref=main"
+    );
+  });
+
+  test("rejects hosts outside the supported provider allowlist", async () => {
+    await expect(
+      inspectPublicGit({
+        ...source,
+        host: "example.com",
+        normalizedUrl: "https://example.com/example/repository",
+        repositoryPath: "example/repository",
+        url: "https://example.com/example/repository.git",
+      })
+    ).rejects.toThrow(
+      "Repository import supports public GitHub and git.openputer.com URLs"
+    );
+  });
+});
--- a/packages/backend/convex/publicGit.ts
+++ b/packages/backend/convex/publicGit.ts
@@ -8,10 +8,31 @@ import {
 } from "@code/primitives/project";

 const GITHUB_HOST = "github.com";
-const REQUEST_HEADERS = {
+const GITEA_HOST = "git.openputer.com";
+const GITHUB_REQUEST_HEADERS = {
  Accept: "application/vnd.github+json",
  "User-Agent": "zopu-project-importer",
 } as const;
+const GITEA_REQUEST_HEADERS = {
+  Accept: "application/json",
+  "User-Agent": "zopu-project-importer",
+} as const;
+
+type Fetch = (
+  input: string | URL | Request,
+  init?: RequestInit
+) => Promise<Response>;
+
+interface PublicGitProvider {
+  readonly headers: Readonly<Record<string, string>>;
+  readonly metadataUrl: (source: PreparedPublicGitSource) => string;
+  readonly rawFileUrl: (
+    source: PreparedPublicGitSource,
+    branch: string,
+    path: string
+  ) => string;
+  readonly repositoryNotFoundMessage: string;
+}

 const candidatePaths = {
  agents: ["AGENTS.md"],
@@ -28,18 +49,51 @@ const encodePath = (path: string) =>
    .map((segment) => encodeURIComponent(segment))
    .join("/");

+const providerForSource = (
+  source: PreparedPublicGitSource
+): PublicGitProvider => {
+  if (source.host === GITHUB_HOST) {
+    return {
+      headers: GITHUB_REQUEST_HEADERS,
+      metadataUrl: (candidate) =>
+        `https://api.github.com/repos/${encodePath(candidate.repositoryPath)}`,
+      rawFileUrl: (candidate, branch, path) =>
+        `https://raw.githubusercontent.com/${encodePath(candidate.repositoryPath)}/${encodePath(branch)}/${encodePath(path)}`,
+      repositoryNotFoundMessage: "Public GitHub repository not found",
+    };
+  }
+  if (source.host === GITEA_HOST) {
+    return {
+      headers: GITEA_REQUEST_HEADERS,
+      metadataUrl: (candidate) =>
+        `https://${GITEA_HOST}/api/v1/repos/${encodePath(candidate.repositoryPath)}`,
+      rawFileUrl: (candidate, branch, path) =>
+        `https://${GITEA_HOST}/api/v1/repos/${encodePath(candidate.repositoryPath)}/raw/${encodePath(path)}?ref=${encodeURIComponent(branch)}`,
+      repositoryNotFoundMessage: "Public Gitea repository not found",
+    };
+  }
+  throw new Error(
+    "Repository import supports public GitHub and git.openputer.com URLs"
+  );
+};
+
 const fetchTextCandidate = async (
-  repositoryPath: string,
+  fetcher: Fetch,
+  provider: PublicGitProvider,
+  source: PreparedPublicGitSource,
  branch: string,
  path: string
 ): Promise<string | null> => {
-  const url = `https://raw.githubusercontent.com/${encodePath(repositoryPath)}/${encodePath(branch)}/${encodePath(path)}`;
-  const response = await fetch(url, { headers: REQUEST_HEADERS });
+  const response = await fetcher(provider.rawFileUrl(source, branch, path), {
+    headers: provider.headers,
+  });
  if (response.status === 404) {
    return null;
  }
  if (!response.ok) {
-    throw new Error(`GitHub returned ${response.status} for ${path}`);
+    throw new Error(
+      `${source.host} returned ${response.status} while reading ${path}`
+    );
  }
  const content = await response.text();
  if (content.trim().length === 0) {
@@ -52,13 +106,17 @@ const fetchTextCandidate = async (
 };

 const fetchContextDocument = async (
+  fetcher: Fetch,
+  provider: PublicGitProvider,
  source: PreparedPublicGitSource,
  branch: string,
  kind: (typeof CONTEXT_KINDS)[number]
 ): Promise<RepositoryContextDocument | null> => {
  for (const candidate of candidatePaths[kind]) {
    const content = await fetchTextCandidate(
-      source.repositoryPath,
+      fetcher,
+      provider,
+      source,
      branch,
      candidate
    );
@@ -74,20 +132,18 @@ const fetchContextDocument = async (
 };

 const readDefaultBranch = async (
+  fetcher: Fetch,
+  provider: PublicGitProvider,
  source: PreparedPublicGitSource
 ): Promise<string> => {
-  if (source.host !== GITHUB_HOST) {
-    throw new Error("Repository import currently supports public GitHub URLs");
-  }
-  const response = await fetch(
-    `https://api.github.com/repos/${encodePath(source.repositoryPath)}`,
-    { headers: REQUEST_HEADERS }
-  );
+  const response = await fetcher(provider.metadataUrl(source), {
+    headers: provider.headers,
+  });
  if (!response.ok) {
    throw new Error(
      response.status === 404
-        ? "Public GitHub repository not found"
-        : `GitHub returned ${response.status} while reading the repository`
+        ? provider.repositoryNotFoundMessage
+        : `${source.host} returned ${response.status} while reading the repository`
    );
  }
  const metadata = (await response.json()) as { default_branch?: unknown };
@@ -95,18 +151,21 @@ const readDefaultBranch = async (
    typeof metadata.default_branch !== "string" ||
    metadata.default_branch.length === 0
  ) {
-    throw new Error("GitHub did not return a default branch");
+    throw new Error(`${source.host} did not return a default branch`);
  }
  return metadata.default_branch;
 };

 export const inspectPublicGit = async (
-  source: PreparedPublicGitSource
+  source: PreparedPublicGitSource,
+  options: { readonly fetch?: Fetch } = {}
 ): Promise<PublicGitImportResult> => {
-  const defaultBranch = await readDefaultBranch(source);
+  const fetcher = options.fetch ?? globalThis.fetch;
+  const provider = providerForSource(source);
+  const defaultBranch = await readDefaultBranch(fetcher, provider, source);
  const candidates = await Promise.all(
    CONTEXT_KINDS.map((kind) =>
-      fetchContextDocument(source, defaultBranch, kind)
+      fetchContextDocument(fetcher, provider, source, defaultBranch, kind)
    )
  );
  const documents = candidates.filter(
--- a/packages/backend/convex/signalRouting.test.ts
+++ b/packages/backend/convex/signalRouting.test.ts
@@ -491,7 +491,22 @@ describe("signalRouting begin issue", () => {
      token: TOKEN,
    });

-    expect(status).toBe("queued");
+    expect(status).toEqual({
+      dispatchRequired: true,
+      projectId,
+      status: "queued",
+    });
+
+    const repeated = await t.mutation(api.signalRouting.beginIssue, {
+      issueId: result.issueId as string,
+      organizationId: orgId,
+      token: TOKEN,
+    });
+    expect(repeated).toEqual({
+      dispatchRequired: false,
+      projectId,
+      status: "queued",
+    });
  });

  test("begin rejects invalid token", async () => {
--- a/packages/backend/convex/signalRouting.ts
+++ b/packages/backend/convex/signalRouting.ts
@@ -613,7 +613,14 @@ export const beginIssue = mutation({
    issueId: v.id("projectIssues"),
    token: v.string(),
  },
-  handler: async (ctx, args): Promise<"queued" | "working"> => {
+  handler: async (
+    ctx,
+    args
+  ): Promise<{
+    dispatchRequired: boolean;
+    projectId: Id<"projects">;
+    status: "queued" | "working";
+  }> => {
    requireAgent(args.token);
    const issue = await ctx.db.get(args.issueId);
    if (!issue) {
@@ -629,7 +636,11 @@ export const beginIssue = mutation({
      );
    });
    if (status === issue.status) {
-      return status;
+      return {
+        dispatchRequired: false,
+        projectId: issue.projectId,
+        status,
+      };
    }

    const timestamp = Date.now();
@@ -644,12 +655,50 @@ export const beginIssue = mutation({
      kind: "issue.queued",
      projectId: issue.projectId,
    });
-    return status;
+    return {
+      dispatchRequired: true,
+      projectId: issue.projectId,
+      status,
+    };
  },
 });

 // ---------------------------------------------------------------------------
-// 8. Get project summary + context documents for routing decisions.
+// 8. Mark a failed Flue dispatch so retrying can safely queue it again.
+// ---------------------------------------------------------------------------
+
+export const markDispatchFailed = mutation({
+  args: {
+    error: v.string(),
+    issueId: v.id("projectIssues"),
+    organizationId: v.id("organizations"),
+    token: v.string(),
+  },
+  handler: async (ctx, args) => {
+    requireAgent(args.token);
+    const issue = await ctx.db.get(args.issueId);
+    if (!issue) {
+      throw new ConvexError("Issue not found");
+    }
+    await authorizeProjectInOrg(ctx, args.organizationId, issue.projectId);
+    const timestamp = Date.now();
+    await ctx.db.patch(issue._id, {
+      status: "failed",
+      updatedAt: timestamp,
+    });
+    await ctx.db.insert("projectEvents", {
+      createdAt: timestamp,
+      data: { error: args.error.slice(0, 1000), phase: "dispatch" },
+      issueId: issue._id,
+      kind: "agent.failed",
+      projectId: issue.projectId,
+    });
+    return null;
+  },
+});
+
+// ---------------------------------------------------------------------------
+// 9. Get project summary + context documents for routing decisions.
 // ---------------------------------------------------------------------------

 export const getProjectContext = query({
--- a/packages/env/src/agent.ts
+++ b/packages/env/src/agent.ts
@@ -13,6 +13,7 @@ const agentEnvSchema = z.object({
  FLUE_DB_TOKEN: z.string().min(1),
  GITEA_TOKEN: z.string().min(1).optional(),
  GITEA_URL: z.url().default("https://git.openputer.com"),
+  OPENROUTER_API_KEY: z.string().min(1).optional(),
 });

 export type AgentEnv = z.infer<typeof agentEnvSchema>;
--- a/packages/ui/src/components/ai-elements/prompt-input.tsx
+++ b/packages/ui/src/components/ai-elements/prompt-input.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import {
+  InputGroup,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@code/ui/components/input-group";
+import { cn } from "@code/ui/lib/utils";
+import type { ChatStatus } from "ai";
+import { ArrowUpIcon, LoaderCircleIcon, SquareIcon } from "lucide-react";
+import type {
+  ComponentProps,
+  FormEvent,
+  FormEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  ReactNode,
+} from "react";
+
+export interface PromptInputMessage {
+  files: [];
+  text: string;
+}
+
+export type PromptInputProps = Omit<ComponentProps<"form">, "onSubmit"> & {
+  onSubmit: (
+    message: PromptInputMessage,
+    event: FormEvent<HTMLFormElement>
+  ) => Promise<void> | void;
+};
+
+export const PromptInput = ({
+  children,
+  className,
+  onSubmit,
+  ...props
+}: PromptInputProps) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const text = new FormData(event.currentTarget)
+      .get("message")
+      ?.toString()
+      .trim();
+
+    if (!text) {
+      return;
+    }
+
+    const submitMessage = async () => {
+      try {
+        await onSubmit({ files: [], text }, event);
+      } catch {
+        // The owning chat hook exposes submission failures in the composer status.
+      }
+    };
+    void submitMessage();
+  };
+
+  return (
+    <form
+      className={cn("w-full", className)}
+      onSubmit={handleSubmit}
+      {...props}
+    >
+      <InputGroup>{children}</InputGroup>
+    </form>
+  );
+};
+
+export type PromptInputBodyProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputBody = ({
+  className,
+  ...props
+}: PromptInputBodyProps) => (
+  <div className={cn("contents", className)} {...props} />
+);
+
+export type PromptInputTextareaProps = ComponentProps<
+  typeof InputGroupTextarea
+>;
+
+export const PromptInputTextarea = ({
+  className,
+  onKeyDown,
+  ...props
+}: PromptInputTextareaProps) => {
+  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
+    onKeyDown?.(event);
+
+    if (
+      event.defaultPrevented ||
+      event.key !== "Enter" ||
+      event.shiftKey ||
+      event.nativeEvent.isComposing
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+  };
+
+  return (
+    <InputGroupTextarea
+      className={cn("field-sizing-content", className)}
+      name="message"
+      onKeyDown={handleKeyDown}
+      {...props}
+    />
+  );
+};
+
+export type PromptInputButtonProps = ComponentProps<typeof InputGroupButton>;
+
+export const PromptInputButton = ({
+  className,
+  size = "icon-sm",
+  ...props
+}: PromptInputButtonProps) => (
+  <InputGroupButton
+    className={cn(className)}
+    size={size}
+    type="button"
+    {...props}
+  />
+);
+
+export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
+  status?: ChatStatus;
+};
+
+export const PromptInputSubmit = ({
+  children,
+  className,
+  disabled,
+  size = "icon-sm",
+  status = "ready",
+  ...props
+}: PromptInputSubmitProps) => {
+  const isBusy = status === "submitted" || status === "streaming";
+  let content: ReactNode = children ?? <ArrowUpIcon className="size-4" />;
+  if (status === "streaming") {
+    content = <SquareIcon className="size-4 fill-current" />;
+  } else if (status === "submitted") {
+    content = <LoaderCircleIcon className="size-4 animate-spin" />;
+  }
+
+  return (
+    <InputGroupButton
+      aria-busy={isBusy}
+      className={cn(className)}
+      disabled={disabled}
+      size={size}
+      type="submit"
+      {...props}
+    >
+      {content}
+    </InputGroupButton>
+  );
+};
--- a/packages/ui/src/components/mobile-workspace-screens.tsx
+++ b/packages/ui/src/components/mobile-workspace-screens.tsx
@@ -8,7 +8,6 @@ import {
  FileText,
  ListChecks,
  LoaderCircle,
-  Mic,
  MoreHorizontal,
  Paperclip,
  Plus,
@@ -17,6 +16,23 @@ import {
 } from "lucide-react";
 import type { FormEvent, ReactNode } from "react";

+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "./ai-elements/conversation";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "./ai-elements/message";
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputButton,
+  PromptInputSubmit,
+  PromptInputTextarea,
+} from "./ai-elements/prompt-input";
 import type {
  MobileProjectView,
  MobileWorkspaceView,
@@ -36,21 +52,32 @@ export interface MobileWorkspaceRendererProps {
  createIssueBody: string;
  createIssueTitle: string;
  data: MobileWorkspaceView;
+  modelId?: string;
+  modelLabel?: string;
  onBack?: () => void;
  onComposerChange: (value: string) => void;
+  onComposerMessageSubmit?: (message: string) => Promise<void>;
  onComposerSubmit: (event: FormEvent<HTMLFormElement>) => void;
  onCreateBodyChange: (value: string) => void;
  onCreateIssue: (event: FormEvent<HTMLFormElement>) => void;
  onCreateIssueFromSignal?: () => void;
  onCreateTitleChange: (value: string) => void;
  onManageProjects?: () => void;
+  onProjectManagerClose?: () => void;
  onOpenAssistant?: () => void;
  onOpenUnit?: (workUnitId?: string) => void;
  onProjectSelect?: (projectId: string) => void;
+  onRepositoryChange?: (value: string) => void;
+  onRepositoryConnect?: (event: FormEvent<HTMLFormElement>) => void;
+  onSettingsClose?: () => void;
+  onSettingsOpen?: () => void;
  onReviewUnit?: (reviewUrl: string) => void;
  onStartUnit?: (workUnitId: string) => void;
  onViewWork?: () => void;
  pendingAction?: string | null;
+  projectManagerOpen?: boolean;
+  repositoryValue?: string;
+  settingsOpen?: boolean;
  statusMessage?: string;
  variant: MobileWorkspaceVariant;
 }
@@ -294,7 +321,9 @@ const ProjectSwitcher = ({
      ) : (
        data.projects.map((project: MobileProjectView) => (
          <option key={project.id} value={project.id}>
-            {project.name} {project.connected ? "" : "(not connected)"}
+            {project.repositoryPath ?? project.name}
+            {project.host ? ` · ${project.host}` : ""}
+            {project.connected ? "" : " (not connected)"}
          </option>
        ))
      )}
@@ -310,6 +339,184 @@ const ProjectSwitcher = ({
  </div>
 );

+const ProjectManagementPanel = ({
+  createIssueBody,
+  createIssueTitle,
+  data,
+  onClose,
+  onCreateBodyChange,
+  onCreateIssue,
+  onCreateTitleChange,
+  onProjectSelect,
+  onRepositoryChange,
+  onRepositoryConnect,
+  pendingAction,
+  repositoryValue = "",
+  statusMessage,
+}: {
+  readonly createIssueBody: string;
+  readonly createIssueTitle: string;
+  readonly data: MobileWorkspaceView;
+  readonly onClose?: () => void;
+  readonly onCreateBodyChange: (value: string) => void;
+  readonly onCreateIssue: (event: FormEvent<HTMLFormElement>) => void;
+  readonly onCreateTitleChange: (value: string) => void;
+  readonly onProjectSelect?: (projectId: string) => void;
+  readonly onRepositoryChange?: (value: string) => void;
+  readonly onRepositoryConnect?: (event: FormEvent<HTMLFormElement>) => void;
+  readonly pendingAction?: string | null;
+  readonly repositoryValue?: string;
+  readonly statusMessage?: string;
+}) => {
+  const connecting = pendingAction === "connect";
+  return (
+    <section
+      aria-label="Project workspace"
+      className="absolute inset-0 z-30 flex flex-col bg-[#f7f8f5] text-[#11110f]"
+    >
+      <header className="flex h-20 shrink-0 items-center border-b border-[#e9eae6] bg-white px-4">
+        <div>
+          <h2 className="text-[18px] font-semibold">Project workspace</h2>
+          <p className="text-[11px] text-[#807b76]">
+            Connect repositories and create durable work.
+          </p>
+        </div>
+        <button
+          aria-label="Close project workspace"
+          className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
+          onClick={onClose}
+          type="button"
+        >
+          <X className="size-5" />
+        </button>
+      </header>
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+        <div className="rounded-[22px] bg-white p-4">
+          <p className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase">
+            Connected project
+          </p>
+          <select
+            aria-label="Active project"
+            className="mt-2 h-11 w-full rounded-[14px] bg-[#f2f3ef] px-3 text-[13px] font-semibold outline-none"
+            disabled={data.projects.length === 0}
+            onChange={(event) => onProjectSelect?.(event.target.value)}
+            value={data.selectedProjectId ?? ""}
+          >
+            {data.projects.length === 0 ? (
+              <option value="">No connected projects</option>
+            ) : (
+              data.projects.map((project) => (
+                <option key={project.id} value={project.id}>
+                  {project.repositoryPath ?? project.name}
+                </option>
+              ))
+            )}
+          </select>
+          <form className="mt-4" onSubmit={onRepositoryConnect}>
+            <label
+              className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase"
+              htmlFor="mobile-repository-url"
+            >
+              Connect another repository
+            </label>
+            <input
+              aria-label="Public Git repository URL"
+              className="mt-2 h-11 w-full rounded-[14px] bg-[#f2f3ef] px-3 text-[12px] outline-none placeholder:text-[#aaa7a3]"
+              disabled={connecting}
+              id="mobile-repository-url"
+              onChange={(event) => onRepositoryChange?.(event.target.value)}
+              placeholder="https://git.openputer.com/owner/repo.git"
+              required
+              type="url"
+              value={repositoryValue}
+            />
+            <button
+              className="mt-2 flex h-10 w-full items-center justify-center gap-2 rounded-[14px] bg-[#c8ff00] text-[12px] font-semibold text-black disabled:opacity-50"
+              disabled={connecting || !repositoryValue.trim()}
+              type="submit"
+            >
+              {connecting ? (
+                <LoaderCircle className="size-3.5 animate-spin" />
+              ) : null}
+              {connecting ? "Connecting…" : "Connect repository"}
+            </button>
+          </form>
+        </div>
+        {data.selectedProjectId ? (
+          <div className="mt-4">
+            <CreateWorkForm
+              body={createIssueBody}
+              onBodyChange={onCreateBodyChange}
+              onSubmit={onCreateIssue}
+              onTitleChange={onCreateTitleChange}
+              pending={pendingAction === "issue"}
+              title={createIssueTitle}
+            />
+          </div>
+        ) : null}
+        {statusMessage ? (
+          <p className="mt-3 text-center text-[11px] text-[#807b76]">
+            {statusMessage}
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+const ChatSettingsPanel = ({
+  modelId = "openrouter/openai/gpt-oss-20b:free",
+  modelLabel = "GPT-OSS 20B Free",
+  onClose,
+}: {
+  readonly modelId?: string;
+  readonly modelLabel?: string;
+  readonly onClose?: () => void;
+}) => (
+  <section
+    aria-label="Chat settings"
+    className="absolute inset-0 z-40 flex flex-col bg-[#f7f8f5] text-[#11110f]"
+  >
+    <header className="flex h-20 shrink-0 items-center border-b border-[#e9eae6] bg-white px-4">
+      <div>
+        <h2 className="text-[18px] font-semibold">Settings</h2>
+        <p className="text-[11px] text-[#807b76]">
+          Configure how Zopu responds.
+        </p>
+      </div>
+      <button
+        aria-label="Close settings"
+        className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
+        onClick={onClose}
+        type="button"
+      >
+        <X className="size-5" />
+      </button>
+    </header>
+    <div className="p-4">
+      <div className="rounded-[22px] bg-white p-4">
+        <label
+          className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase"
+          htmlFor="mobile-chat-model"
+        >
+          Chat model
+        </label>
+        <select
+          className="mt-2 h-11 w-full rounded-[14px] bg-[#f2f3ef] px-3 text-[13px] font-semibold outline-none"
+          id="mobile-chat-model"
+          value={modelId}
+        >
+          <option value={modelId}>{modelLabel}</option>
+        </select>
+        <p className="mt-2 text-[11px] leading-4 text-[#807b76]">
+          A tool-capable free OpenRouter model is active for the local Zopu
+          agent.
+        </p>
+      </div>
+    </div>
+  </section>
+);
+
 const WorkUnitActions = ({
  onReview,
  onStart,
@@ -1224,16 +1431,126 @@ const assistantStatusDotClass: Record<
  red: "bg-[#e04b3f]",
 };

+const ChatWorkUnitCard = ({
+  onOpen,
+  onReview,
+  onStart,
+  pendingAction,
+  workUnit,
+}: {
+  readonly onOpen?: (workUnitId?: string) => void;
+  readonly onReview?: (reviewUrl: string) => void;
+  readonly onStart?: (workUnitId: string) => void;
+  readonly pendingAction?: string | null;
+  readonly workUnit?: MobileWorkUnitView;
+}) => {
+  if (!workUnit) {
+    return null;
+  }
+  return (
+    <article
+      className={cn(
+        "mt-5 rounded-[22px] p-[14px]",
+        workUnitToneClass[workUnit.tone]
+      )}
+    >
+      <button
+        className="block w-full text-left"
+        onClick={() => onOpen?.(workUnit.id)}
+        type="button"
+      >
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              "text-[10px] font-semibold uppercase",
+              workUnitStatusClass[workUnit.tone]
+            )}
+          >
+            {workUnit.statusLabel}
+          </span>
+          <span className="text-[10px] opacity-60">{workUnit.code}</span>
+          <ChevronRight className="ml-auto size-4" />
+        </div>
+        <h2 className="mt-2 text-[17px] leading-5 font-semibold">
+          {workUnit.title}
+        </h2>
+        <p className="mt-1 line-clamp-2 text-[12px] leading-4 opacity-70">
+          {workUnit.summary}
+        </p>
+        <div className="mt-3 h-1.5 rounded-full bg-current/10">
+          <div
+            className="h-full rounded-full bg-current"
+            style={{ width: `${workUnit.progress}%` }}
+          />
+        </div>
+        <div className="mt-1.5 flex text-[10px] font-semibold">
+          <span>{workUnit.progress}% complete</span>
+          <span className="ml-auto opacity-60">{workUnit.nextAction}</span>
+        </div>
+      </button>
+      <WorkUnitActions
+        onReview={onReview}
+        onStart={onStart}
+        pending={pendingAction === `issue:${workUnit.id}`}
+        workUnit={workUnit}
+      />
+    </article>
+  );
+};
+
 const CharacterChat = ({
+  createIssueBody,
+  createIssueTitle,
  data,
+  modelId,
+  modelLabel,
  onChange,
+  onMessageSubmit,
  onCreateIssueFromSignal,
-  onSubmit,
+  onCreateBodyChange,
+  onCreateIssue,
+  onCreateTitleChange,
+  onManageProjects,
+  onOpen,
+  onProjectManagerClose,
+  onProjectSelect,
+  onRepositoryChange,
+  onRepositoryConnect,
+  onReview,
+  onSettingsClose,
+  onSettingsOpen,
+  onStart,
+  pendingAction,
+  projectManagerOpen,
+  repositoryValue,
+  settingsOpen,
  statusMessage,
  value,
 }: ComposerProps & {
+  createIssueBody: string;
+  createIssueTitle: string;
  data: MobileWorkspaceView;
+  modelId?: string;
+  modelLabel?: string;
+  onCreateBodyChange: (value: string) => void;
+  onCreateIssue: (event: FormEvent<HTMLFormElement>) => void;
  onCreateIssueFromSignal?: () => void;
+  onCreateTitleChange: (value: string) => void;
+  onManageProjects?: () => void;
+  onOpen?: (workUnitId?: string) => void;
+  onProjectManagerClose?: () => void;
+  onProjectSelect?: (projectId: string) => void;
+  onRepositoryChange?: (value: string) => void;
+  onRepositoryConnect?: (event: FormEvent<HTMLFormElement>) => void;
+  onMessageSubmit?: (message: string) => Promise<void>;
+  onReview?: (reviewUrl: string) => void;
+  onSettingsClose?: () => void;
+  onSettingsOpen?: () => void;
+  onStart?: (workUnitId: string) => void;
+  pendingAction?: string | null;
+  projectManagerOpen?: boolean;
+  repositoryValue?: string;
+  settingsOpen?: boolean;
 }) => (
  <div className="mx-auto h-[min(100dvh,858px)] w-full max-w-[390px] overflow-hidden bg-black">
    <main className="relative h-full overflow-hidden rounded-[30px] bg-white px-4 text-[#11110f]">
@@ -1253,146 +1570,218 @@ const CharacterChat = ({
            {data.assistant.statusLabel}
          </p>
        </div>
-        <MoreHorizontal className="ml-auto size-5" />
+        <button
+          aria-label="Open settings"
+          className="ml-auto flex size-9 items-center justify-center rounded-full bg-[#f2f3ef]"
+          onClick={onSettingsOpen}
+          type="button"
+        >
+          <MoreHorizontal className="size-5" />
+        </button>
      </header>
-      <section className="absolute inset-x-4 top-[106px] bottom-[105px] overflow-y-auto pb-6">
-        {data.assistant.messages.length === 0 ? (
-          <>
-            <div className="w-fit rounded-full bg-[#f4f4f2] px-2.5 py-1.5 text-[10px] text-[#aaa7a3]">
-              TODAY
-            </div>
-            <div className="mt-10 flex items-center gap-2 text-[14px] text-[#55524f]">
-              <span className="flex size-6 items-center justify-center rounded-[8px] bg-[#f4f4f2]">
-                <Sparkles className="size-4" />
-              </span>
-              <strong>Zopu</strong>
-              <span className="text-[#b5b2ae]">• a fresh start</span>
-            </div>
-            <p className="mt-3 text-[17px] leading-5">
-              Good morning. What are we making clearer today?
-            </p>
-            <div className="mt-4 flex gap-7 text-[12px] font-semibold text-[#55524f]">
-              <button
-                className="flex items-center gap-2"
-                onClick={() => onChange("Summarize my latest project signals")}
-                type="button"
-              >
-                <FileText className="size-4" />
-                Summarize
-              </button>
-              <button
-                className="flex items-center gap-2"
-                onClick={() => onChange("Plan the next steps for my project")}
-                type="button"
-              >
-                <ListChecks className="size-4" />
-                Plan
-              </button>
-              <button
-                className="flex items-center gap-2"
-                onClick={() => onChange("Explore risks in my active work")}
-                type="button"
-              >
-                ◉ Explore
-              </button>
-            </div>
-            {data.latestSignal ? (
-              <section className="mt-12 rounded-[22px] bg-[#f4f4f2] p-[14px]">
-                <div className="flex items-center">
-                  <span className="flex size-8 items-center justify-center rounded-[10px] bg-[#c8ff00]">
-                    ↗
-                  </span>
-                  <div className="ml-3 min-w-0">
-                    <h2 className="truncate text-[15px] leading-4 font-semibold">
-                      {data.latestSignal.title}
-                    </h2>
-                    <p className="text-[10px] text-[#b5b2ae]">
-                      Latest project signal
-                    </p>
-                  </div>
-                  <ChevronRight className="ml-auto size-4" />
-                </div>
-                <p className="mt-3 text-[13px] leading-[18px]">
-                  {data.latestSignal.summary}
-                </p>
+      <div className="absolute inset-x-0 top-[82px]">
+        <ProjectSwitcher
+          data={data}
+          onManageProjects={onManageProjects}
+          onProjectSelect={onProjectSelect}
+        />
+      </div>
+      <Conversation className="absolute inset-x-4 top-[127px] bottom-[105px]">
+        <ConversationContent className="min-h-full gap-0 p-0 pb-6">
+          {data.assistant.messages.length === 0 ? (
+            <>
+              <div className="w-fit rounded-full bg-[#f4f4f2] px-2.5 py-1.5 text-[10px] text-[#aaa7a3]">
+                TODAY
+              </div>
+              <div className="mt-10 flex items-center gap-2 text-[14px] text-[#55524f]">
+                <span className="flex size-6 items-center justify-center rounded-[8px] bg-[#f4f4f2]">
+                  <Sparkles className="size-4" />
+                </span>
+                <strong>Zopu</strong>
+                <span className="text-[#b5b2ae]">• a fresh start</span>
+              </div>
+              <p className="mt-3 text-[17px] leading-5">
+                Good morning. What are we making clearer today?
+              </p>
+              <div className="mt-4 flex gap-7 text-[12px] font-semibold text-[#55524f]">
                <button
-                  className="mt-3 h-8 rounded-[11px] bg-black px-3 text-[11px] font-semibold text-white"
-                  onClick={onCreateIssueFromSignal}
+                  className="flex items-center gap-2"
+                  onClick={() =>
+                    onChange("Summarize my latest project signals")
+                  }
                  type="button"
                >
-                  Create work from signal
+                  <FileText className="size-4" />
+                  Summarize
                </button>
-              </section>
-            ) : null}
-          </>
-        ) : (
-          <div className="grid gap-5">
-            {data.assistant.messages.map((message) =>
-              message.role === "user" ? (
-                <div
-                  className="ml-auto max-w-[86%] rounded-[22px] bg-[#0c0c0b] px-4 py-3 text-[16px] leading-6 whitespace-pre-wrap text-white"
+                <button
+                  className="flex items-center gap-2"
+                  onClick={() => onChange("Plan the next steps for my project")}
+                  type="button"
+                >
+                  <ListChecks className="size-4" />
+                  Plan
+                </button>
+                <button
+                  className="flex items-center gap-2"
+                  onClick={() => onChange("Explore risks in my active work")}
+                  type="button"
+                >
+                  ◉ Explore
+                </button>
+              </div>
+              {data.latestSignal ? (
+                <section className="mt-12 rounded-[22px] bg-[#f4f4f2] p-[14px]">
+                  <div className="flex items-center">
+                    <span className="flex size-8 items-center justify-center rounded-[10px] bg-[#c8ff00]">
+                      ↗
+                    </span>
+                    <div className="ml-3 min-w-0">
+                      <h2 className="truncate text-[15px] leading-4 font-semibold">
+                        {data.latestSignal.title}
+                      </h2>
+                      <p className="text-[10px] text-[#b5b2ae]">
+                        Latest project signal
+                      </p>
+                    </div>
+                    <ChevronRight className="ml-auto size-4" />
+                  </div>
+                  <p className="mt-3 text-[13px] leading-[18px]">
+                    {data.latestSignal.summary}
+                  </p>
+                  <button
+                    className="mt-3 h-8 rounded-[11px] bg-black px-3 text-[11px] font-semibold text-white"
+                    onClick={onCreateIssueFromSignal}
+                    type="button"
+                  >
+                    Create work from signal
+                  </button>
+                </section>
+              ) : null}
+            </>
+          ) : (
+            <div className="grid gap-5">
+              {data.assistant.messages.map((message) => (
+                <Message
+                  className="max-w-full gap-0"
+                  from={message.role}
                  key={message.id}
                >
-                  {message.text}
-                </div>
-              ) : (
-                <div key={message.id}>
-                  <div className="flex items-center gap-2">
-                    <span className="flex size-7 items-center justify-center rounded-[9px] bg-[#c8ff00]">
-                      <Sparkles className="size-4" />
-                    </span>
-                    <strong className="text-[14px]">Zopu</strong>
-                    <span className="rounded-full bg-[#f1f1ef] px-2 py-1 text-[9px] text-[#aaa7a3]">
-                      THINKING PARTNER
-                    </span>
-                  </div>
-                  <p className="mt-3 text-[16px] leading-[21px] whitespace-pre-wrap">
-                    {message.text}
-                  </p>
-                </div>
-              )
-            )}
-            {data.assistant.isBusy ? (
-              <p className="text-[13px] text-[#807b76]">Zopu is thinking…</p>
-            ) : null}
-          </div>
-        )}
-      </section>
-      <form
-        className="absolute inset-x-3 bottom-[34px] flex h-[53px] items-center rounded-[27px] bg-[#f4f4f2] p-2"
-        onSubmit={onSubmit}
-      >
-        <button
-          aria-label="Attach file"
-          className="flex size-10 items-center justify-center rounded-full bg-white"
-          type="button"
-        >
-          <Paperclip className="size-5" />
-        </button>
-        <input
-          className="min-w-0 flex-1 bg-transparent px-2 text-[14px] outline-none placeholder:text-[#b5b2ae]"
-          onChange={(event) => onChange(event.target.value)}
-          placeholder="Ask anything..."
-          value={value}
+                  <MessageContent
+                    className={cn(
+                      "max-w-full gap-0 overflow-visible p-0",
+                      message.role === "user"
+                        ? "ml-auto w-fit max-w-[86%] rounded-[22px] bg-[#0c0c0b] px-4 py-3 text-[16px] leading-6 text-white group-[.is-user]:rounded-[22px] group-[.is-user]:bg-[#0c0c0b] group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-white"
+                        : "w-full bg-transparent text-[#11110f] dark:text-[#11110f]"
+                    )}
+                  >
+                    {message.role === "assistant" ? (
+                      <>
+                        <div className="flex items-center gap-2">
+                          <span className="flex size-7 items-center justify-center rounded-[9px] bg-[#c8ff00]">
+                            <Sparkles className="size-4" />
+                          </span>
+                          <strong className="text-[14px]">Zopu</strong>
+                          <span className="rounded-full bg-[#f1f1ef] px-2 py-1 text-[9px] text-[#aaa7a3]">
+                            THINKING PARTNER
+                          </span>
+                        </div>
+                        <MessageResponse
+                          className="mt-3 text-[16px] leading-[21px] text-[#11110f] dark:text-[#11110f]"
+                          isAnimating={data.assistant.isBusy}
+                        >
+                          {message.text}
+                        </MessageResponse>
+                      </>
+                    ) : (
+                      <span className="whitespace-pre-wrap">
+                        {message.text}
+                      </span>
+                    )}
+                  </MessageContent>
+                </Message>
+              ))}
+              {data.assistant.isBusy ? (
+                <p className="text-[13px] text-[#807b76]">Zopu is thinking…</p>
+              ) : null}
+            </div>
+          )}
+          <ChatWorkUnitCard
+            onOpen={onOpen}
+            onReview={onReview}
+            onStart={onStart}
+            pendingAction={pendingAction}
+            workUnit={data.selectedWorkUnit}
+          />
+        </ConversationContent>
+        <ConversationScrollButton
+          aria-label="Scroll to latest message"
+          className="bottom-2 size-9 rounded-full border border-[#dededb] bg-white text-black shadow-sm"
        />
-        <button
-          aria-label="Record voice message"
-          className="flex size-10 items-center justify-center rounded-full bg-white"
-          type="button"
-        >
-          <Mic className="size-5" />
-        </button>
-        <button
-          aria-label="Send"
-          className="ml-1 flex size-10 items-center justify-center rounded-full bg-black text-white"
-          type="submit"
-        >
-          <ArrowUp className="size-5" />
-        </button>
-      </form>
+      </Conversation>
+      <PromptInput
+        className="absolute inset-x-3 bottom-[34px] w-auto [&_[data-slot=input-group]]:min-h-[56px] [&_[data-slot=input-group]]:rounded-full [&_[data-slot=input-group]]:border-0 [&_[data-slot=input-group]]:bg-[#f4f4f2] [&_[data-slot=input-group]]:px-2 [&_[data-slot=input-group]]:py-1.5 [&_[data-slot=input-group]]:shadow-none [&_[data-slot=input-group]]:dark:bg-[#f4f4f2]"
+        onSubmit={async (message) => {
+          if (onMessageSubmit) {
+            await onMessageSubmit(message.text);
+            return;
+          }
+          onChange(message.text);
+        }}
+      >
+        <PromptInputBody>
+          <PromptInputButton
+            aria-label="Attach file"
+            className="size-11 shrink-0 rounded-full bg-white text-black hover:bg-white/80"
+            size="icon-sm"
+          >
+            <Paperclip className="size-5" />
+          </PromptInputButton>
+          <PromptInputTextarea
+            aria-label="Ask anything..."
+            className="max-h-20 min-h-10 flex-1 resize-none bg-transparent px-2 py-2.5 text-[15px] leading-5 shadow-none outline-none placeholder:text-[#aaa7a3] dark:bg-transparent"
+            onChange={(event) => onChange(event.currentTarget.value)}
+            placeholder="Ask anything..."
+            value={value}
+          />
+          <PromptInputSubmit
+            aria-label="Send"
+            className="size-11 shrink-0 rounded-full bg-black text-white hover:bg-black/85 disabled:bg-black disabled:text-white disabled:opacity-100"
+            disabled={!value.trim() || data.assistant.isBusy}
+            size="icon-sm"
+            status={data.assistant.isBusy ? "streaming" : "ready"}
+          >
+            <ArrowUp className="size-5" />
+          </PromptInputSubmit>
+        </PromptInputBody>
+      </PromptInput>
      <p className="absolute inset-x-0 bottom-[13px] text-center text-[9px] text-[#b5b2ae]">
        {statusMessage ?? "Press Enter to send · Shift + Enter for a new line"}
      </p>
+      {projectManagerOpen ? (
+        <ProjectManagementPanel
+          createIssueBody={createIssueBody}
+          createIssueTitle={createIssueTitle}
+          data={data}
+          onClose={onProjectManagerClose}
+          onCreateBodyChange={onCreateBodyChange}
+          onCreateIssue={onCreateIssue}
+          onCreateTitleChange={onCreateTitleChange}
+          onProjectSelect={onProjectSelect}
+          onRepositoryChange={onRepositoryChange}
+          onRepositoryConnect={onRepositoryConnect}
+          pendingAction={pendingAction}
+          repositoryValue={repositoryValue}
+          statusMessage={statusMessage}
+        />
+      ) : null}
+      {settingsOpen ? (
+        <ChatSettingsPanel
+          modelId={modelId}
+          modelLabel={modelLabel}
+          onClose={onSettingsClose}
+        />
+      ) : null}
    </main>
  </div>
 );
@@ -1402,21 +1791,32 @@ export const MobileWorkspaceScreenRenderer = ({
  createIssueBody,
  createIssueTitle,
  data,
+  modelId,
+  modelLabel,
  onBack,
  onComposerChange,
+  onComposerMessageSubmit,
  onComposerSubmit,
  onCreateBodyChange,
  onCreateIssue,
  onCreateIssueFromSignal,
  onCreateTitleChange,
  onManageProjects,
+  onProjectManagerClose,
  onOpenAssistant,
  onOpenUnit,
  onProjectSelect,
+  onRepositoryChange,
+  onRepositoryConnect,
  onReviewUnit,
+  onSettingsClose,
+  onSettingsOpen,
  onStartUnit,
  onViewWork,
  pendingAction,
+  projectManagerOpen,
+  repositoryValue,
+  settingsOpen,
  statusMessage,
  variant,
 }: MobileWorkspaceRendererProps) => {
@@ -1432,8 +1832,30 @@ export const MobileWorkspaceScreenRenderer = ({
    return (
      <CharacterChat
        {...composerProps}
+        createIssueBody={createIssueBody}
+        createIssueTitle={createIssueTitle}
        data={data}
+        modelId={modelId}
+        modelLabel={modelLabel}
+        onCreateBodyChange={onCreateBodyChange}
+        onCreateIssue={onCreateIssue}
        onCreateIssueFromSignal={onCreateIssueFromSignal}
+        onCreateTitleChange={onCreateTitleChange}
+        onManageProjects={onManageProjects}
+        onMessageSubmit={onComposerMessageSubmit}
+        onOpen={onOpenUnit}
+        onProjectManagerClose={onProjectManagerClose}
+        onProjectSelect={onProjectSelect}
+        onRepositoryChange={onRepositoryChange}
+        onRepositoryConnect={onRepositoryConnect}
+        onReview={onReviewUnit}
+        onSettingsClose={onSettingsClose}
+        onSettingsOpen={onSettingsOpen}
+        onStart={onStartUnit}
+        pendingAction={pendingAction}
+        projectManagerOpen={projectManagerOpen}
+        repositoryValue={repositoryValue}
+        settingsOpen={settingsOpen}
      />
    );
  }
--- a/packages/ui/src/components/mobile-workspace/models.ts
+++ b/packages/ui/src/components/mobile-workspace/models.ts
@@ -2,8 +2,10 @@ export type MobileWorkUnitTone = "blue" | "green" | "orange" | "purple";

 export interface MobileProjectView {
  readonly connected: boolean;
+  readonly host?: string;
  readonly id: string;
  readonly name: string;
+  readonly repositoryPath?: string;
 }

 export interface MobileWorkUnitView {