feat(provider): add Kilo and Kilo Cloud providers

apps/mobile/src/components/LocalWorkspaceNotice.tsx

@@ -0,0 +1,44 @@
+import { NativeStackScreenOptions } from "../native/StackHeader";
+import { ActivityIndicator, View } from "react-native";
+import { EmptyState } from "./EmptyState";
+import { AppText } from "./AppText";
+import type { threadLocalWorkspace } from "../state/threadLocalWorkspace";
+
+export function LocalWorkspaceNotice({
+  state,
+  title,
+}: {
+  readonly title: string;
+  readonly state: ReturnType<typeof threadLocalWorkspace>["localWorkspaceState"];
+}) {
+  return (
+    <View className="flex-1 items-center justify-center bg-sheet px-6">
+      <NativeStackScreenOptions options={{ title }} />
+      {state === "loading" ? (
+        <View className="items-center gap-4">
+          <ActivityIndicator />
+          <AppText className="text-sm text-foreground-muted">
+            Loading conversation workspace...
+          </AppText>
+        </View>
+      ) : (
+        <EmptyState
+          title={
+            state === "error"
+              ? "Workspace could not be loaded"
+              : state === "cloud"
+                ? "Remote workspace"
+                : "Workspace unavailable"
+          }
+          detail={
+            state === "error"
+              ? "Check the environment connection and reopen this conversation to try again."
+              : state === "cloud"
+                ? "This cloud conversation cannot use local files, Git, terminals or review diffs."
+                : "This conversation has no available local workspace."
+          }
+        />
+      )}
+    </View>
+  );
+}

apps/mobile/src/components/ProviderIcon.tsx

@@ -1,3 +1,4 @@
+import { kiloIconPaths } from "@t3tools/client-runtime/kilo-icon";
 import { Image } from "expo-image";
 import { Path, Svg } from "react-native-svg";
 import { View } from "react-native";
@@ -133,6 +134,15 @@ export function ProviderIcon(props: ProviderIconProps) {
     );
   }
 
+  if (props.provider === "kilo" || props.provider === "kilo-cloud") {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 512 512">
+        {kiloIconPaths.map((path) => (
+          <Path key={path.d} {...path} />
+        ))}
+      </Svg>
+    );
+  }
   if (props.provider === "opencode") {
     return (
       <Svg width={size} height={size} viewBox="0 0 32 40" fill="none">

apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx

@@ -1,3 +1,4 @@
+import { LocalWorkspaceNotice } from "../../components/LocalWorkspaceNotice";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
@@ -350,7 +351,8 @@ function useThreadFilesWorkspace(params: {
   const routeCwd = firstRouteParam(params.cwd);
   const routeProjectName = firstRouteParam(params.projectName);
   const { selectedThread, selectedThreadProject } = useThreadSelection();
-  const { selectedThreadCwd } = useSelectedThreadWorktree();
+  const { selectedThreadCwd, localWorkspaceEnabled, localWorkspaceState } =
+    useSelectedThreadWorktree();
   const environmentId =
     routeEnvironmentId !== null
       ? EnvironmentId.make(routeEnvironmentId)
@@ -362,26 +364,20 @@ function useThreadFilesWorkspace(params: {
   } | null;
 
   return {
-    cwd: routeCwd ?? selectedThreadCwd ?? project?.workspaceRoot ?? null,
+    localWorkspaceState: routeThreadId !== null ? localWorkspaceState : ("unavailable" as const),
+    cwd:
+      routeThreadId !== null
+        ? localWorkspaceEnabled
+          ? selectedThreadCwd
+          : null
+        : (routeCwd ?? project?.workspaceRoot ?? null),
     environmentId,
     projectName: routeProjectName ?? project?.title ?? "Files",
     selectedThread,
     threadId,
   };
 }
 
-function FilesUnavailable() {
-  return (
-    <View className="flex-1 items-center justify-center bg-sheet px-6">
-      <NativeStackScreenOptions options={{ title: "Files" }} />
-      <EmptyState
-        title="Files unavailable"
-        detail="This thread does not have an active workspace path."
-      />
-    </View>
-  );
-}
-
 function FilesToolbarBottomFade() {
   const sheetColor = String(useUniwindTheme()["--color-sheet"]);
 
@@ -416,9 +412,8 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
   const { fileInspector, layout, showAuxiliaryPane } = useAdaptiveWorkspaceLayout();
   const [searchQuery, setSearchQuery] = useState("");
   const { themeAppearance: highlightTheme } = useAppearancePreferences();
-  const { cwd, environmentId, projectName, selectedThread, threadId } = useThreadFilesWorkspace(
-    props.route.params,
-  );
+  const { cwd, environmentId, projectName, selectedThread, threadId, localWorkspaceState } =
+    useThreadFilesWorkspace(props.route.params);
   const revealedInspectorRef = useRef(false);
   const entriesQuery = useFileTreeEntries({
     environmentId,
@@ -496,6 +491,9 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
     }
   }, [cwd, fileInspector.supported, showAuxiliaryPane]);
 
+  if (threadId !== null && localWorkspaceState !== "local" && localWorkspaceState !== "loading")
+    return <LocalWorkspaceNotice title="Files" state={localWorkspaceState} />;
+
   if (selectedThread === null || environmentId === null || threadId === null) {
     if (fileInspector.supported) {
       return (
@@ -510,7 +508,7 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
   }
 
   if (cwd === null) {
-    return <FilesUnavailable />;
+    return <LocalWorkspaceNotice title="Files" state={localWorkspaceState} />;
   }
 
   if (fileInspector.supported) {
@@ -564,9 +562,8 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
   const params = props.route.params;
   const relativePath = normalizeRoutePath(params.path);
   const targetLine = normalizeRouteLine(firstRouteParam(params.line));
-  const { cwd, environmentId, projectName, selectedThread, threadId } = useThreadFilesWorkspace(
-    props.route.params,
-  );
+  const { cwd, environmentId, projectName, selectedThread, threadId, localWorkspaceState } =
+    useThreadFilesWorkspace(props.route.params);
   const [modeOverride, setModeOverride] = useState<{
     readonly path: string;
     readonly mode: FileViewMode;
@@ -854,6 +851,9 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
     handleReturnToThread();
   }, [handleReturnToThread, navigation]);
 
+  if (threadId !== null && localWorkspaceState !== "local" && localWorkspaceState !== "loading")
+    return <LocalWorkspaceNotice title="Files" state={localWorkspaceState} />;
+
   // A file opened from a project draft has no thread, and needs none: the thread only supplies
   // the workspace to read from and the target to navigate back to, both of which a draft names
   // for itself. Wait only for what this file actually cannot render without.
@@ -862,7 +862,7 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
   }
 
   if (cwd === null) {
-    return <FilesUnavailable />;
+    return <LocalWorkspaceNotice title="Files" state={localWorkspaceState} />;
   }
 
   if (relativePath === null) {

apps/mobile/src/features/review/ReviewSheet.tsx

@@ -1,3 +1,4 @@
+import { LocalWorkspaceNotice } from "../../components/LocalWorkspaceNotice";
 import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
 import { useNavigation, type StaticScreenProps } from "@react-navigation/native";
 import { nativeHeaderScrollEdgeEffects } from "../../native/StackHeader";
@@ -447,8 +448,15 @@ type ReviewSheetProps = StaticScreenProps<{
 }>;
 
 export function ReviewSheet(props: ReviewSheetProps) {
-  const { nativeReviewDiffStyle } = useAppearanceCodeSurface();
   useAdaptiveWorkspacePaneRole("inspector");
+  const { localWorkspaceEnabled, localWorkspaceState } = useSelectedThreadWorktree();
+  if (!localWorkspaceEnabled)
+    return <LocalWorkspaceNotice title="Review changes" state={localWorkspaceState} />;
+  return <LocalReviewSheet {...props} />;
+}
+
+function LocalReviewSheet(props: ReviewSheetProps) {
+  const { nativeReviewDiffStyle } = useAppearanceCodeSurface();
   const { panes, showAuxiliaryPane } = useAdaptiveWorkspaceLayout();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();

apps/mobile/src/features/review/useReviewHeaderPresentation.tsx

@@ -43,6 +43,7 @@ export function useReviewHeaderPresentation(props: {
   const gitMenuAvailable =
     selectedThread !== null && String(selectedThread.id) === String(props.threadId);
   const gitMenu = useThreadGitMenuDefinition({
+    gitControlsEnabled: props.selectedThreadCwd !== null,
     environmentId: props.environmentId,
     threadId: props.threadId,
     currentBranch: selectedThread?.branch ?? null,

apps/mobile/src/features/review/useReviewSections.ts

@@ -34,7 +34,8 @@ export function useReviewSections(input: {
   readonly reviewCache: ReviewCacheForThread;
 }) {
   const { environmentId, reviewCache, threadId } = input;
-  const enabled = input.enabled ?? true;
+  const { localWorkspaceEnabled } = useSelectedThreadWorktree();
+  const enabled = localWorkspaceEnabled && (input.enabled ?? true);
   const selectedThread = useSelectedThreadProjection();
   const { selectedThreadCwd } = useSelectedThreadWorktree();
   const diffPreview = useEnvironmentQuery(

apps/mobile/src/features/settings/SettingsProviderAccountsRouteScreen.tsx

@@ -8,6 +8,7 @@ import { useRef, useState } from "react";
 import { Alert, Linking, Pressable, ScrollView, TextInput, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { ProviderIcon } from "../../components/ProviderIcon";
 import { AppText as Text } from "../../components/AppText";
 import { ScreenScrollView } from "../../components/ScreenScrollView";
 import { useEnvironmentQuery } from "../../state/query";
@@ -43,18 +44,42 @@ export function SettingsProviderAccountsRouteScreen() {
                 {environment.serverConfig.providers
                   .filter(
                     (provider) =>
+                      provider.driver === "kilo-cloud" ||
+                      provider.driver === "kilo" ||
                       provider.setup?.canAuthenticate ||
                       (provider.driver === "acpRegistry" && provider.installed),
                   )
-                  .map((provider) => (
-                    <ProviderAccount
-                      key={provider.instanceId}
-                      environment={environment}
-                      provider={provider}
-                    />
-                  ))}
+                  .map((provider) =>
+                    provider.driver === "kilo" || provider.driver === "kilo-cloud" ? (
+                      <View
+                        key={provider.instanceId}
+                        className="gap-2 border-b border-border-subtle p-4"
+                      >
+                        <View className="flex-row items-center gap-2">
+                          <ProviderIcon provider="kilo" size={24} />
+                          <Text>{provider.displayName}</Text>
+                        </View>
+                        {provider.message ? (
+                          <Text className="text-foreground-muted">{provider.message}</Text>
+                        ) : null}
+                        <Text className="text-foreground-muted">
+                          {provider.driver === "kilo-cloud"
+                            ? "Kilo Cloud runs in a remote repository and uses Kilo credit. Closing T3 does not stop remote work or billing. Manage its account and repository in web or desktop Settings."
+                            : "Kilo runs on this environment and trusts native configuration, plugins and MCP servers. Tool approvals are not a sandbox. Manage its account profile in web or desktop Settings."}
+                        </Text>
+                      </View>
+                    ) : (
+                      <ProviderAccount
+                        key={provider.instanceId}
+                        environment={environment}
+                        provider={provider}
+                      />
+                    ),
+                  )}
                 {!environment.serverConfig.providers.some(
                   (provider) =>
+                    provider.driver === "kilo-cloud" ||
+                    provider.driver === "kilo" ||
                     provider.setup?.canAuthenticate ||
                     (provider.driver === "acpRegistry" && provider.installed),
                 ) ? (

apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx

@@ -1,3 +1,5 @@
+import { LocalWorkspaceNotice } from "../../components/LocalWorkspaceNotice";
+import { useSelectedThreadWorktree } from "../../state/use-selected-thread-worktree";
 import { DEFAULT_TERMINAL_ID, EnvironmentId, ThreadId } from "@t3tools/contracts";
 import { type KnownTerminalSession } from "@t3tools/client-runtime/state/terminal";
 import { SymbolView } from "../../components/AppSymbol";
@@ -239,6 +241,13 @@ type ThreadTerminalRouteScreenProps = StaticScreenProps<{
 }>;
 
 export function ThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps) {
+  const { localWorkspaceEnabled, localWorkspaceState } = useSelectedThreadWorktree();
+  if (!localWorkspaceEnabled)
+    return <LocalWorkspaceNotice title="Terminal" state={localWorkspaceState} />;
+  return <LocalThreadTerminalRouteScreen {...props} />;
+}
+
+function LocalThreadTerminalRouteScreen(props: ThreadTerminalRouteScreenProps) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const writeTerminal = useAtomCommand(terminalEnvironment.write, "terminal write");

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

@@ -1,5 +1,7 @@
 import { useAtomValue } from "@effect/atom-react";
-import { useThreadReportedModelSelection } from "../../state/entities";
+import { cloudExecutionLabel } from "@t3tools/client-runtime/cloudExecutionLabels";
+import { AppText } from "../../components/AppText";
+import { useThreadCloudExecution, useThreadReportedModelSelection } from "../../state/entities";
 import { UsageLimitRecoveryCard } from "./UsageLimitRecoveryCard";
 import { useNavigation } from "@react-navigation/native";
 import type { WorktreeSetupCardProps } from "./worktree-setup-card";
@@ -316,6 +318,10 @@ const USER_INPUT_TOGGLE_TIMING = {
 
 export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: ThreadDetailScreenProps) {
   const navigation = useNavigation();
+  const cloudExecution = useThreadCloudExecution({
+    environmentId: props.environmentId,
+    threadId: props.selectedThread.id,
+  });
   const { session: voiceInputSession } = useGlobalVoiceInput();
   const reportedModelSelection = useThreadReportedModelSelection({
     environmentId: props.environmentId,
@@ -335,21 +341,26 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
       threadId: props.selectedThread.id,
     });
   }, [navigation, props.environmentId, props.selectedThread.id]);
+  const browserPreviewAvailable =
+    props.threadCwd !== null &&
+    !cloudExecution &&
+    props.serverConfig?.environment.capabilities.serverBrowser === true;
   const browserTabs = useThreadServerBrowserTabs({
     environmentId: props.environmentId,
     threadId: props.selectedThread.id,
-    enabled: props.serverConfig?.environment.capabilities.serverBrowser === true,
+    enabled: browserPreviewAvailable,
   });
   const openBrowserPreview = useCallback(
     (tabId?: string) => {
+      if (!browserPreviewAvailable) return;
       Keyboard.dismiss();
       navigation.navigate("ThreadBrowserPreview", {
         environmentId: props.environmentId,
         threadId: props.selectedThread.id,
         ...(tabId === undefined ? {} : { tabId }),
       });
     },
-    [navigation, props.environmentId, props.selectedThread.id],
+    [browserPreviewAvailable, navigation, props.environmentId, props.selectedThread.id],
   );
   const insets = useSafeAreaInsets();
   const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
@@ -1148,7 +1159,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
         <View className="flex-1" />
       )}
 
-      {showContent ? (
+      {showContent && browserPreviewAvailable ? (
         <ThreadBrowserFloat
           key={selectedThreadKey}
           environmentId={props.environmentId}
@@ -1336,6 +1347,33 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
                     : undefined
                 }
               >
+                {cloudExecution ? (
+                  <View className="px-3 py-2">
+                    <AppText>
+                      Kilo Cloud · {cloudExecution.repository} · {cloudExecution.branch}
+                    </AppText>
+                    <AppText>
+                      Last observation:{" "}
+                      {cloudExecution.observedAt
+                        ? new Date(cloudExecution.observedAt).toLocaleString()
+                        : "unavailable"}
+                      . Task: {cloudExecutionLabel(cloudExecution.task)}.{" "}
+                      {cloudExecution.result
+                        ? `Result: ${cloudExecutionLabel(cloudExecution.result)}. `
+                        : ""}
+                      Sandbox: {cloudExecutionLabel(cloudExecution.sandbox)}. Compute:{" "}
+                      {cloudExecutionLabel(cloudExecution.billing)}
+                      {cloudExecution.billingAttribution === "payer_shared"
+                        ? " (shared account)"
+                        : ""}
+                      .
+                    </AppText>
+                    <AppText>
+                      Remote repository. Closing T3 does not stop remote work or billing. Local
+                      files and checkpoints are unavailable.
+                    </AppText>
+                  </View>
+                ) : null}
                 {isProviderSubagent ? (
                   <View
                     className="self-center px-3 pt-1.5"