feat(server): add Pi Agent provider

apps/mobile/src/components/ProviderIcon.tsx

@@ -1,5 +1,5 @@
 import { Image } from "expo-image";
-import { Path, Svg } from "react-native-svg";
+import { Path, Rect, Svg } from "react-native-svg";
 import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
 
 type ProviderIconProps = {
@@ -23,6 +23,20 @@ export function ProviderIcon(props: ProviderIconProps) {
     );
   }
 
+  if (props.provider?.trim().toLowerCase() === "piagent") {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 800 800" fill="none">
+        <Rect width="800" height="800" rx="160" fill="#000" />
+        <Path
+          fill="#fff"
+          fillRule="evenodd"
+          d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"
+        />
+        <Path fill="#fff" d="M517.36 400H634.72V634.72H517.36Z" />
+      </Svg>
+    );
+  }
+
   if (props.provider === "claudeAgent") {
     return (
       <Svg width={size} height={size} viewBox="0 0 256 257" fill="none">

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx

@@ -880,7 +880,10 @@ export function NewTaskDraftScreen(props: {
     const selectedWorktreePath =
       draft.workspaceSelection?.worktreePath ?? flow.selectedWorktreePath;
     const startFromOrigin = draft.workspaceSelection?.startFromOrigin ?? flow.startFromOrigin;
-    const runtimeMode = draft.runtimeMode ?? flow.runtimeMode;
+    // The flow reconciles the draft mode against the selected provider's
+    // current capabilities. Dispatch that value even when the draft still
+    // contains the pre-switch mode.
+    const runtimeMode = flow.runtimeMode;
     const interactionMode = resolveProviderInteractionMode(
       selectedEnvironmentServerConfig?.providers.find(
         (provider) => provider.instanceId === modelSelection?.instanceId,

apps/mobile/src/features/threads/ThreadComposer.tsx

@@ -8,6 +8,7 @@ import type {
   RuntimeMode,
   ServerConfig as T3ServerConfig,
 } from "@t3tools/contracts";
+import { getProviderSupportedRuntimeModes } from "@t3tools/client-runtime/runtime-mode-options";
 import { StackActions, useFocusEffect, useNavigation } from "@react-navigation/native";
 import type { ReactNode } from "react";
 import {
@@ -335,6 +336,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
       ) ?? null
     );
   }, [props.serverConfig, props.selectedThread.modelSelection.instanceId]);
+  const supportedRuntimeModes = getProviderSupportedRuntimeModes(selectedProviderStatus);
   const composerOwnerKey = scopedThreadKey(props.environmentId, props.selectedThread.id);
 
   const composerMenu = useComposerCommandMenu({
@@ -500,6 +502,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
       onUpdateOptionSelections: (options) =>
         props.onUpdateModelSelection({ ...currentModelSelection, options }),
       runtimeMode: currentRuntimeMode,
+      supportedRuntimeModes,
       onUpdateRuntimeMode: props.onUpdateRuntimeMode,
     }),
     [
@@ -508,6 +511,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
       props.onUpdateModelSelection,
       props.onUpdateRuntimeMode,
       providerOptionDescriptors,
+      supportedRuntimeModes,
       settingsOwnerId,
       threadProviderGroups,
     ],

apps/mobile/src/features/threads/ThreadSettingsSheet.tsx

@@ -7,6 +7,10 @@ import type {
   RuntimeMode,
   ServerProvider,
 } from "@t3tools/contracts";
+import {
+  getProviderSupportedRuntimeModes,
+  reconcileRuntimeMode,
+} from "@t3tools/client-runtime/runtime-mode-options";
 import { useAtomValue } from "@effect/atom-react";
 import type { LegendListRenderItemProps } from "@legendapp/list/react-native";
 import { AnimatedLegendList } from "@legendapp/list/reanimated";
@@ -68,7 +72,7 @@ import {
   NATIVE_MAIL_SEARCH_TOOLBAR_CONTENT_INSET,
   NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED,
 } from "../layout/native-mail-search-toolbar";
-import { RUNTIME_MODE_CHOICES, selectableChoices } from "./thread-settings-options";
+import { filterRuntimeModeChoices, selectableChoices } from "./thread-settings-options";
 import {
   canCommitPendingModel,
   modelMatchesCatalogQuery,
@@ -329,6 +333,7 @@ type ThreadSettingsSessionProps = {
   readonly optionDescriptors: ReadonlyArray<ProviderOptionDescriptor>;
   readonly onUpdateOptionSelections: (selections: ReadonlyArray<ProviderOptionSelection>) => void;
   readonly runtimeMode: RuntimeMode;
+  readonly supportedRuntimeModes?: ReadonlyArray<RuntimeMode> | undefined;
   readonly onUpdateRuntimeMode: (mode: RuntimeMode) => void;
 };
 
@@ -378,6 +383,11 @@ type ThreadSettingsSessionValue = {
   readonly providerInstanceId?: ProviderInstanceId;
   readonly providerGroups: ReadonlyArray<ProviderGroup>;
   readonly runtimeMode: RuntimeMode;
+  readonly runtimeModeChoices: ReadonlyArray<{
+    readonly mode: RuntimeMode;
+    readonly label: string;
+    readonly description: string;
+  }>;
   readonly onUpdateRuntimeMode: (mode: RuntimeMode) => void;
   readonly displayedDescriptors: ReadonlyArray<ProviderOptionDescriptor>;
   readonly providerExpansionOverrides: ReadonlySet<string>;
@@ -410,6 +420,28 @@ function ThreadSettingsSessionProvider(
     () => new Set(),
   );
   const [pendingModel, setPendingModel] = useState<ModelOption | null>(null);
+  // Model selection is staged in this sheet. Resolve runtime capabilities from
+  // that staged option so switching to a narrower provider immediately
+  // updates the Runtime submenu before Save applies the model.
+  // Always read the staged option back from the current provider snapshot:
+  // status refreshes can change capabilities while this sheet is open.
+  const latestPendingModel = useMemo(
+    () =>
+      pendingModel
+        ? props.providerGroups
+            .flatMap((group) => group.models)
+            .find((option) => option.key === pendingModel.key)
+        : undefined,
+    [pendingModel, props.providerGroups],
+  );
+  const stagedSupportedRuntimeModes = pendingModel
+    ? latestPendingModel?.supportedRuntimeModes
+    : props.supportedRuntimeModes;
+  const runtimeMode = reconcileRuntimeMode(props.runtimeMode, stagedSupportedRuntimeModes);
+  const runtimeModeChoices = useMemo(
+    () => filterRuntimeModeChoices(stagedSupportedRuntimeModes),
+    [stagedSupportedRuntimeModes],
+  );
 
   const isApplied = useCallback(
     (option: ModelOption) =>
@@ -502,7 +534,8 @@ function ThreadSettingsSessionProvider(
       environmentId: props.environmentId,
       providerInstanceId: props.providerInstanceId,
       providerGroups: props.providerGroups,
-      runtimeMode: props.runtimeMode,
+      runtimeMode,
+      runtimeModeChoices,
       onUpdateRuntimeMode: props.onUpdateRuntimeMode,
       displayedDescriptors,
       providerExpansionOverrides,
@@ -536,7 +569,8 @@ function ThreadSettingsSessionProvider(
       providerFilter,
       props.onUpdateRuntimeMode,
       props.providerGroups,
-      props.runtimeMode,
+      runtimeMode,
+      runtimeModeChoices,
       searchQuery,
       showLegacyToggle,
       toggleProvider,
@@ -766,7 +800,8 @@ function ThreadSettingsOptionsItem(props: {
             isLast
             label="Runtime"
             value={
-              RUNTIME_MODE_CHOICES.find((choice) => choice.mode === session.runtimeMode)?.label
+              session.runtimeModeChoices.find((choice) => choice.mode === session.runtimeMode)
+                ?.label
             }
             onPress={() => props.onOpenSubmenu({ kind: "runtime" })}
           />
@@ -940,7 +975,7 @@ function ThreadSettingsChoiceContent(props: {
   const submenuContent =
     props.submenu.kind === "runtime"
       ? {
-          rows: RUNTIME_MODE_CHOICES.map((choice) => ({
+          rows: session.runtimeModeChoices.map((choice) => ({
             id: choice.mode,
             label: choice.label,
             description: choice.description,
@@ -1350,6 +1385,7 @@ export function NewTaskThreadSettingsRouteScreen() {
       optionDescriptors={optionDescriptors}
       onUpdateOptionSelections={flow.setSelectedModelOptions}
       runtimeMode={flow.runtimeMode}
+      supportedRuntimeModes={getProviderSupportedRuntimeModes(flow.selectedProviderStatus)}
       onUpdateRuntimeMode={flow.setRuntimeMode}
     >
       <ThreadSettingsPickerNavigator onClose={() => navigation.goBack()} />

apps/mobile/src/features/threads/new-task-flow-provider.tsx

@@ -77,6 +77,10 @@ import {
 } from "../../state/use-remote-environment-registry";
 import { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
 import { type VcsRef } from "@t3tools/client-runtime/state/vcs";
+import {
+  getProviderSupportedRuntimeModes,
+  reconcileRuntimeMode,
+} from "@t3tools/client-runtime/runtime-mode-options";
 import {
   buildHomeProjectScopes,
   sortHomeProjectScopes,
@@ -415,7 +419,7 @@ export function NewTaskFlowProvider(props: React.PropsWithChildren) {
     draftStartFromOrigin ??
     selectedEnvironmentServerConfig?.settings.newWorktreesStartFromOrigin ??
     true;
-  const runtimeMode = selectedProjectDraft.runtimeMode ?? DEFAULT_RUNTIME_MODE;
+  const configuredRuntimeMode = selectedProjectDraft.runtimeMode ?? DEFAULT_RUNTIME_MODE;
 
   // Antigravity keeps unavailable selections so sign-out or a catalog change
   // cannot switch the user's model. Other providers retain their fallback
@@ -473,6 +477,16 @@ export function NewTaskFlowProvider(props: React.PropsWithChildren) {
       ) ?? null,
     [selectedEnvironmentServerConfig, selectedModel?.instanceId],
   );
+  const runtimeMode = reconcileRuntimeMode(
+    configuredRuntimeMode,
+    getProviderSupportedRuntimeModes(selectedProviderStatus),
+  );
+  useEffect(() => {
+    if (selectedProjectDraftKey === null || runtimeMode === configuredRuntimeMode) {
+      return;
+    }
+    updateComposerDraftSettings(selectedProjectDraftKey, { runtimeMode });
+  }, [configuredRuntimeMode, runtimeMode, selectedProjectDraftKey]);
   const planModeEnabled =
     legacyPlanModeEnabled && selectedProviderStatus?.showInteractionModeToggle !== false;
   const interactionMode = planModeEnabled
@@ -493,15 +507,20 @@ export function NewTaskFlowProvider(props: React.PropsWithChildren) {
       const provider = selectedEnvironmentServerConfig?.providers.find(
         (candidate) => candidate.instanceId === selection.instanceId,
       );
+      const runtimeMode = reconcileRuntimeMode(
+        configuredRuntimeMode,
+        getProviderSupportedRuntimeModes(provider),
+      );
       updateComposerDraftSettings(selectedProjectDraftKey, {
         modelSelection: selection,
+        ...(runtimeMode !== configuredRuntimeMode ? { runtimeMode } : {}),
         ...(provider?.showInteractionModeToggle === false
           ? { interactionMode: DEFAULT_PROVIDER_INTERACTION_MODE }
           : {}),
       });
       setStickyComposerModelSelection(selection);
     },
-    [modelOptions, selectedEnvironmentServerConfig, selectedProjectDraftKey],
+    [configuredRuntimeMode, modelOptions, selectedEnvironmentServerConfig, selectedProjectDraftKey],
   );
   const setSelectedModelOptions = useCallback(
     (options: ReadonlyArray<ProviderOptionSelection> | undefined) => {
@@ -906,7 +925,7 @@ export function NewTaskFlowProvider(props: React.PropsWithChildren) {
         text,
         attachments: draft.attachments,
         modelSelection: draftModelSelection,
-        runtimeMode: draft.runtimeMode ?? DEFAULT_RUNTIME_MODE,
+        runtimeMode,
         interactionMode: resolvePendingTaskInteractionMode({
           preferenceLoaded: planModePreferenceLoaded,
           planModeEnabled: legacyPlanModeEnabled,
@@ -946,6 +965,7 @@ export function NewTaskFlowProvider(props: React.PropsWithChildren) {
       selectedProjectDraftKey,
       legacyPlanModeEnabled,
       planModePreferenceLoaded,
+      runtimeMode,
       startFromOrigin,
       workspaceMode,
     ],

apps/mobile/src/features/threads/thread-settings-options.test.ts

@@ -1,7 +1,7 @@
 import type { ProviderOptionDescriptor } from "@t3tools/contracts";
 import { describe, expect, it } from "vite-plus/test";
 
-import { selectableChoices } from "./thread-settings-options";
+import { filterRuntimeModeChoices, selectableChoices } from "./thread-settings-options";
 
 const effortDescriptor: Extract<ProviderOptionDescriptor, { type: "select" }> = {
   id: "effort",
@@ -27,3 +27,26 @@ describe("selectableChoices", () => {
     ]);
   });
 });
+
+describe("filterRuntimeModeChoices", () => {
+  it("keeps every runtime mode for providers without the optional capability", () => {
+    expect(filterRuntimeModeChoices(undefined).map((choice) => choice.mode)).toEqual([
+      "approval-required",
+      "auto-accept-edits",
+      "auto",
+      "full-access",
+    ]);
+  });
+
+  it("filters to explicitly supported modes while preserving product order", () => {
+    expect(
+      filterRuntimeModeChoices(["full-access", "approval-required"]).map((choice) => choice.mode),
+    ).toEqual(["approval-required", "full-access"]);
+  });
+
+  it("keeps the defensive fallback visible for an explicitly empty capability list", () => {
+    expect(filterRuntimeModeChoices([]).map((choice) => choice.mode)).toEqual([
+      "approval-required",
+    ]);
+  });
+});

apps/mobile/src/features/threads/thread-settings-options.ts

@@ -1,4 +1,5 @@
 import type { ProviderOptionDescriptor, RuntimeMode } from "@t3tools/contracts";
+import { filterRuntimeModeOptions } from "@t3tools/client-runtime/runtime-mode-options";
 
 /**
  * Desktop-oriented effort keywords that don't belong in the phone picker.
@@ -36,6 +37,12 @@ export const RUNTIME_MODE_CHOICES: ReadonlyArray<{
   },
 ];
 
+export function filterRuntimeModeChoices(
+  supportedRuntimeModes: ReadonlyArray<RuntimeMode> | undefined,
+) {
+  return filterRuntimeModeOptions(RUNTIME_MODE_CHOICES, supportedRuntimeModes);
+}
+
 export function selectableChoices(
   descriptor: Extract<ProviderOptionDescriptor, { type: "select" }>,
 ) {

apps/mobile/src/features/threads/use-project-actions.ts

@@ -1,6 +1,10 @@
 import { useCallback } from "react";
 
 import { scopeThreadRef } from "@t3tools/client-runtime/environment";
+import {
+  getProviderSupportedRuntimeModes,
+  reconcileRuntimeMode,
+} from "@t3tools/client-runtime/runtime-mode-options";
 import { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
 import { mapAtomCommandResult } from "@t3tools/client-runtime/state/runtime";
 import {
@@ -127,6 +131,12 @@ export function useCreateProjectThread() {
       const provider = serverConfig?.providers.find(
         (candidate) => candidate.instanceId === input.modelSelection.instanceId,
       );
+      // Attachment preparation above can cross a provider snapshot refresh;
+      // resolve the mode from the live config immediately before dispatch.
+      const runtimeMode = reconcileRuntimeMode(
+        input.runtimeMode,
+        getProviderSupportedRuntimeModes(provider),
+      );
 
       const result = await startTurn({
         environmentId: input.project.environmentId,
@@ -141,7 +151,7 @@ export function useCreateProjectThread() {
           attachments: input.initialAttachments,
           uploadedAttachments: prepared.attachments,
           modelSelection: input.modelSelection,
-          runtimeMode: input.runtimeMode,
+          runtimeMode,
           interactionMode: resolveProviderInteractionMode(provider, input.interactionMode),
           workspaceMode: input.envMode,
           branch: input.branch,

apps/mobile/src/features/usage/usageProviders.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it, vi } from "vite-plus/test";
+
+vi.mock("../settings/appearance/AppearancePreferencesProvider", () => ({
+  useAppearancePreferences: () => ({ themeAppearance: "dark" }),
+}));
+
+import { PROVIDER_LABEL, PROVIDER_ORDER } from "./usageProviders";
+
+describe("mobile usage provider presentation", () => {
+  it("includes Pi in charts and model breakdowns", () => {
+    expect(PROVIDER_ORDER).toContain("pi");
+    expect(PROVIDER_LABEL.pi).toBe("Pi Agent");
+  });
+});

apps/mobile/src/features/usage/usageProviders.ts

@@ -5,23 +5,25 @@ import { useAppearancePreferences } from "../settings/appearance/AppearancePrefe
  * Series and table order. The chart stacks providers from the bottom in this
  * order, so it also fixes which band sits on top of the bars.
  */
-export const PROVIDER_ORDER: readonly UsageProviderKind[] = ["codex", "claude", "grok"];
+export const PROVIDER_ORDER: readonly UsageProviderKind[] = ["codex", "claude", "grok", "pi"];
 
 export const PROVIDER_LABEL: Record<UsageProviderKind, string> = {
   claude: "Claude Code",
   codex: "Codex",
   grok: "Grok Build",
+  pi: "Pi Agent",
 };
 
 /**
- * Claude's brand orange holds in both themes; Codex and Grok are neutrals and
- * must flip with the theme or their bars vanish against the matching background.
+ * Claude and Pi keep their series colours in both themes; Codex and Grok are
+ * neutrals and must flip or their bars vanish against the matching background.
  */
 export function useProviderColors(): Record<UsageProviderKind, string> {
   const { themeAppearance: scheme } = useAppearancePreferences();
   return {
     claude: "#d97757",
     codex: scheme === "dark" ? "#e6e6e6" : "#3c3c43",
     grok: scheme === "dark" ? "#a1a1aa" : "#52525b",
+    pi: "#8b9cf6",
   };
 }