feat(dashboard): add dedicated Factory Droid diagnostics page

- add /droid route under a new Compatible CLIs sidebar section

- expose /api/droid/diagnostics and /api/droid/settings/raw for install and BYOK visibility

- include read-only settings.json viewer plus model/provider breakdown

- add unit coverage for droid dashboard service parsing and path logic

README.md

@@ -64,6 +64,7 @@ The dashboard provides visual management for all account types:
 - **Claude Accounts**: Create isolated instances (work, personal, client)
 - **OAuth Providers**: One-click auth for Gemini, Codex, Antigravity, Kiro, Copilot
 - **API Profiles**: Configure GLM, Kimi with your keys
+- **Factory Droid**: Track Droid install location and BYOK settings health
 - **Updates Center**: Track support rollouts (Droid target, CLIProxy provider changes, WebSearch integrations)
 - **Health Monitor**: Real-time status across all profiles
 
@@ -166,6 +167,8 @@ CCS also persists Droid's active model selector in `~/.factory/settings.json`
 (`model: custom:<alias>`). This avoids passing `-m` argv in interactive mode,
 which Droid treats as queued prompt text.
 
+Dashboard parity: `ccs config` -> `Factory Droid`
+
 ### Per-Profile Target Defaults
 
 You can pin a default target (`claude` or `droid`) per profile:

src/web-server/routes/droid-routes.ts

@@ -0,0 +1,34 @@
+import type { Request, Response } from 'express';
+import { Router } from 'express';
+import {
+  getDroidDashboardDiagnostics,
+  getDroidRawSettings,
+} from '../services/droid-dashboard-service';
+
+const router = Router();
+
+/**
+ * GET /api/droid/diagnostics
+ * Dashboard-ready Droid installation + BYOK configuration diagnostics.
+ */
+router.get('/diagnostics', (_req: Request, res: Response): void => {
+  try {
+    res.json(getDroidDashboardDiagnostics());
+  } catch (error) {
+    res.status(500).json({ error: (error as Error).message });
+  }
+});
+
+/**
+ * GET /api/droid/settings/raw
+ * Raw ~/.factory/settings.json payload for read-only viewer.
+ */
+router.get('/settings/raw', (_req: Request, res: Response): void => {
+  try {
+    res.json(getDroidRawSettings());
+  } catch (error) {
+    res.status(500).json({ error: (error as Error).message });
+  }
+});
+
+export default router;

src/web-server/routes/index.ts

@@ -21,6 +21,7 @@ import cliproxyStatsRoutes from './cliproxy-stats-routes';
 import cliproxySyncRoutes from './cliproxy-sync-routes';
 import copilotRoutes from './copilot-routes';
 import cursorRoutes from './cursor-routes';
+import droidRoutes from './droid-routes';
 import miscRoutes from './misc-routes';
 import cliproxyServerRoutes from './proxy-routes';
 import authRoutes from './auth-routes';
@@ -67,6 +68,9 @@ apiRoutes.use('/copilot', copilotRoutes);
 // ==================== Cursor ====================
 apiRoutes.use('/cursor', cursorRoutes);
 
+// ==================== Droid ====================
+apiRoutes.use('/droid', droidRoutes);
+
 // ==================== CLIProxy Server Settings ====================
 apiRoutes.use('/cliproxy-server', cliproxyServerRoutes);
 

src/web-server/services/compatible-cli-types.ts

@@ -0,0 +1,70 @@
+export type DroidBinarySource = 'CCS_DROID_PATH' | 'PATH' | 'missing';
+
+export interface DroidBinaryDiagnostics {
+  installed: boolean;
+  path: string | null;
+  installDir: string | null;
+  source: DroidBinarySource;
+  version: string | null;
+  overridePath: string | null;
+}
+
+export interface DroidConfigFileDiagnostics {
+  label: string;
+  path: string;
+  resolvedPath: string;
+  exists: boolean;
+  isSymlink: boolean;
+  isRegularFile: boolean;
+  sizeBytes: number | null;
+  mtimeMs: number | null;
+  parseError: string | null;
+  readError: string | null;
+}
+
+export interface DroidCustomModelDiagnostics {
+  displayName: string;
+  model: string;
+  provider: string;
+  baseUrl: string;
+  host: string | null;
+  maxOutputTokens: number | null;
+  isCcsManaged: boolean;
+  apiKeyState: 'set' | 'missing';
+  apiKeyPreview: string | null;
+}
+
+export interface DroidByokDiagnostics {
+  activeModelSelector: string | null;
+  customModelCount: number;
+  ccsManagedCount: number;
+  userManagedCount: number;
+  invalidModelEntryCount: number;
+  providerBreakdown: Record<string, number>;
+  customModels: DroidCustomModelDiagnostics[];
+}
+
+export interface DroidDashboardDiagnostics {
+  binary: DroidBinaryDiagnostics;
+  files: {
+    settings: DroidConfigFileDiagnostics;
+    globalConfig: DroidConfigFileDiagnostics;
+  };
+  byok: DroidByokDiagnostics;
+  warnings: string[];
+  docsReference: {
+    providerValues: string[];
+    settingsHierarchy: string[];
+    notes: string[];
+  };
+}
+
+export interface DroidRawSettingsResponse {
+  path: string;
+  resolvedPath: string;
+  exists: boolean;
+  mtime: number;
+  rawText: string;
+  settings: Record<string, unknown> | null;
+  parseError: string | null;
+}

src/web-server/services/droid-dashboard-service.ts

@@ -0,0 +1,298 @@
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import { execFileSync } from 'child_process';
+import { detectDroidCli } from '../../targets/droid-detector';
+import type {
+  DroidByokDiagnostics,
+  DroidConfigFileDiagnostics,
+  DroidCustomModelDiagnostics,
+  DroidDashboardDiagnostics,
+  DroidRawSettingsResponse,
+} from './compatible-cli-types';
+
+interface DroidConfigPaths {
+  settingsPath: string;
+  settingsDisplayPath: string;
+  globalConfigPath: string;
+  globalConfigDisplayPath: string;
+}
+
+interface JsonFileProbe {
+  diagnostics: DroidConfigFileDiagnostics;
+  json: Record<string, unknown> | null;
+  rawText: string;
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function asString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
+}
+
+function parseHost(value: string): string | null {
+  try {
+    return new URL(value).host || null;
+  } catch {
+    return null;
+  }
+}
+
+export function maskApiKeyPreview(value: string): string {
+  if (!value) return '';
+  const suffix = value.slice(-4);
+  return `***${suffix}`;
+}
+
+function isCcsManagedDisplayName(displayName: string): boolean {
+  return displayName.startsWith('CCS ') || displayName.startsWith('ccs-');
+}
+
+export function resolveDroidConfigPaths(
+  options: {
+    platform?: NodeJS.Platform;
+    env?: NodeJS.ProcessEnv;
+    homeDir?: string;
+  } = {}
+): DroidConfigPaths {
+  const platform = options.platform ?? process.platform;
+  const env = options.env ?? process.env;
+  const homeDir = options.homeDir ?? os.homedir();
+
+  const byokBase = env.CCS_HOME || homeDir;
+  const settingsPath = path.join(byokBase, '.factory', 'settings.json');
+
+  const globalConfigRoot =
+    platform === 'win32'
+      ? env.APPDATA || path.join(homeDir, 'AppData', 'Roaming')
+      : env.XDG_CONFIG_HOME || path.join(homeDir, '.config');
+  const globalConfigPath = path.join(globalConfigRoot, 'factory', 'config.json');
+
+  return {
+    settingsPath,
+    settingsDisplayPath: '~/.factory/settings.json',
+    globalConfigPath,
+    globalConfigDisplayPath:
+      platform === 'win32' ? '%APPDATA%/factory/config.json' : '~/.config/factory/config.json',
+  };
+}
+
+function getBinaryVersion(binaryPath: string): string | null {
+  try {
+    return execFileSync(binaryPath, ['--version'], {
+      encoding: 'utf8',
+      stdio: ['ignore', 'pipe', 'ignore'],
+      timeout: 5000,
+    })
+      .trim()
+      .split('\n')[0]
+      .trim();
+  } catch {
+    return null;
+  }
+}
+
+function readJsonFileProbe(filePath: string, label: string, displayPath: string): JsonFileProbe {
+  if (!fs.existsSync(filePath)) {
+    return {
+      diagnostics: {
+        label,
+        path: displayPath,
+        resolvedPath: filePath,
+        exists: false,
+        isSymlink: false,
+        isRegularFile: false,
+        sizeBytes: null,
+        mtimeMs: null,
+        parseError: null,
+        readError: null,
+      },
+      json: null,
+      rawText: '{}',
+    };
+  }
+
+  const stat = fs.lstatSync(filePath);
+  const diagnostics: DroidConfigFileDiagnostics = {
+    label,
+    path: displayPath,
+    resolvedPath: filePath,
+    exists: true,
+    isSymlink: stat.isSymbolicLink(),
+    isRegularFile: stat.isFile(),
+    sizeBytes: stat.size,
+    mtimeMs: stat.mtimeMs,
+    parseError: null,
+    readError: null,
+  };
+
+  if (diagnostics.isSymlink) {
+    diagnostics.readError = 'Refusing symlink file for safety.';
+    return { diagnostics, json: null, rawText: '{}' };
+  }
+
+  if (!diagnostics.isRegularFile) {
+    diagnostics.readError = 'Target is not a regular file.';
+    return { diagnostics, json: null, rawText: '{}' };
+  }
+
+  try {
+    const rawText = fs.readFileSync(filePath, 'utf8');
+    try {
+      const parsed = JSON.parse(rawText);
+      if (!isObject(parsed)) {
+        diagnostics.parseError = 'JSON root must be an object.';
+        return { diagnostics, json: null, rawText };
+      }
+      return { diagnostics, json: parsed, rawText };
+    } catch (error) {
+      diagnostics.parseError = (error as Error).message;
+      return { diagnostics, json: null, rawText };
+    }
+  } catch (error) {
+    diagnostics.readError = (error as Error).message;
+    return { diagnostics, json: null, rawText: '{}' };
+  }
+}
+
+export function summarizeDroidCustomModels(customModelsValue: unknown): DroidByokDiagnostics {
+  const rows: DroidCustomModelDiagnostics[] = [];
+  const providerBreakdown: Record<string, number> = {};
+  let invalidModelEntryCount = 0;
+
+  const source = Array.isArray(customModelsValue)
+    ? customModelsValue
+    : isObject(customModelsValue)
+      ? Object.values(customModelsValue)
+      : [];
+
+  for (const item of source) {
+    if (!isObject(item)) {
+      invalidModelEntryCount += 1;
+      continue;
+    }
+
+    const displayName = asString(item.displayName);
+    const model = asString(item.model);
+    const baseUrl = asString(item.baseUrl);
+    const providerRaw = asString(item.provider);
+    const apiKey = asString(item.apiKey);
+
+    if (!displayName || !model || !baseUrl || !providerRaw) {
+      invalidModelEntryCount += 1;
+      continue;
+    }
+
+    const provider = providerRaw.toLowerCase();
+    providerBreakdown[provider] = (providerBreakdown[provider] ?? 0) + 1;
+
+    rows.push({
+      displayName,
+      model,
+      provider,
+      baseUrl,
+      host: parseHost(baseUrl),
+      maxOutputTokens: typeof item.maxOutputTokens === 'number' ? item.maxOutputTokens : null,
+      isCcsManaged: isCcsManagedDisplayName(displayName),
+      apiKeyState: apiKey ? 'set' : 'missing',
+      apiKeyPreview: apiKey ? maskApiKeyPreview(apiKey) : null,
+    });
+  }
+
+  const ccsManagedCount = rows.filter((row) => row.isCcsManaged).length;
+
+  return {
+    activeModelSelector: null,
+    customModelCount: rows.length,
+    ccsManagedCount,
+    userManagedCount: rows.length - ccsManagedCount,
+    invalidModelEntryCount,
+    providerBreakdown,
+    customModels: rows,
+  };
+}
+
+export function getDroidDashboardDiagnostics(): DroidDashboardDiagnostics {
+  const paths = resolveDroidConfigPaths();
+  const binaryPath = detectDroidCli();
+
+  const source = process.env.CCS_DROID_PATH ? 'CCS_DROID_PATH' : binaryPath ? 'PATH' : 'missing';
+
+  const settingsProbe = readJsonFileProbe(
+    paths.settingsPath,
+    'BYOK settings',
+    paths.settingsDisplayPath
+  );
+  const globalConfigProbe = readJsonFileProbe(
+    paths.globalConfigPath,
+    'Global config',
+    paths.globalConfigDisplayPath
+  );
+
+  const byok = summarizeDroidCustomModels(settingsProbe.json?.customModels);
+  byok.activeModelSelector = asString(settingsProbe.json?.model);
+
+  const warnings: string[] = [];
+  if (!binaryPath) warnings.push('Droid binary is not detected in PATH or CCS_DROID_PATH.');
+  if (settingsProbe.diagnostics.parseError) {
+    warnings.push('~/.factory/settings.json contains invalid JSON.');
+  }
+  if (byok.invalidModelEntryCount > 0) {
+    warnings.push(`${byok.invalidModelEntryCount} customModels entries are malformed.`);
+  }
+  if (globalConfigProbe.diagnostics.parseError) {
+    warnings.push('Global Droid config JSON is invalid.');
+  }
+
+  return {
+    binary: {
+      installed: !!binaryPath,
+      path: binaryPath,
+      installDir: binaryPath ? path.dirname(binaryPath) : null,
+      source,
+      version: binaryPath ? getBinaryVersion(binaryPath) : null,
+      overridePath: process.env.CCS_DROID_PATH || null,
+    },
+    files: {
+      settings: settingsProbe.diagnostics,
+      globalConfig: globalConfigProbe.diagnostics,
+    },
+    byok,
+    warnings,
+    docsReference: {
+      providerValues: ['anthropic', 'openai', 'generic-chat-completion-api'],
+      settingsHierarchy: [
+        'project-level config',
+        'user-level config',
+        'home-level config',
+        'CLI flags and env vars',
+      ],
+      notes: [
+        'BYOK custom models are read from ~/.factory/settings.json customModels[]',
+        'Interactive model selection uses settings.model (custom:<alias>)',
+        'droid exec supports --model for one-off execution mode',
+      ],
+    },
+  };
+}
+
+export function getDroidRawSettings(): DroidRawSettingsResponse {
+  const paths = resolveDroidConfigPaths();
+  const settingsProbe = readJsonFileProbe(
+    paths.settingsPath,
+    'BYOK settings',
+    paths.settingsDisplayPath
+  );
+
+  return {
+    path: paths.settingsDisplayPath,
+    resolvedPath: paths.settingsPath,
+    exists: settingsProbe.diagnostics.exists,
+    mtime: settingsProbe.diagnostics.mtimeMs ?? Date.now(),
+    rawText: settingsProbe.rawText,
+    settings: settingsProbe.json,
+    parseError: settingsProbe.diagnostics.parseError,
+  };
+}

tests/unit/web-server/droid-dashboard-service.test.ts

@@ -0,0 +1,114 @@
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import {
+  getDroidRawSettings,
+  maskApiKeyPreview,
+  resolveDroidConfigPaths,
+  summarizeDroidCustomModels,
+} from '../../../src/web-server/services/droid-dashboard-service';
+
+const testRoot = path.join(os.tmpdir(), `ccs-droid-dashboard-test-${Date.now()}`);
+
+beforeEach(() => {
+  fs.mkdirSync(testRoot, { recursive: true });
+  process.env.CCS_HOME = testRoot;
+});
+
+afterEach(() => {
+  delete process.env.CCS_HOME;
+  if (fs.existsSync(testRoot)) {
+    fs.rmSync(testRoot, { recursive: true, force: true });
+  }
+});
+
+describe('droid-dashboard-service', () => {
+  it('resolves droid config paths on unix-like platforms', () => {
+    const resolved = resolveDroidConfigPaths({
+      platform: 'darwin',
+      env: {
+        CCS_HOME: '/tmp/ccs-home',
+        XDG_CONFIG_HOME: '/tmp/xdg',
+      } as NodeJS.ProcessEnv,
+      homeDir: '/Users/tester',
+    });
+
+    expect(resolved.settingsPath).toBe('/tmp/ccs-home/.factory/settings.json');
+    expect(resolved.globalConfigPath).toBe('/tmp/xdg/factory/config.json');
+    expect(resolved.settingsDisplayPath).toBe('~/.factory/settings.json');
+    expect(resolved.globalConfigDisplayPath).toBe('~/.config/factory/config.json');
+  });
+
+  it('resolves droid config paths on windows platforms', () => {
+    const resolved = resolveDroidConfigPaths({
+      platform: 'win32',
+      env: {
+        APPDATA: 'C:/Users/test/AppData/Roaming',
+      } as NodeJS.ProcessEnv,
+      homeDir: 'C:/Users/test',
+    });
+
+    expect(resolved.settingsPath).toBe(path.join('C:/Users/test', '.factory', 'settings.json'));
+    expect(resolved.globalConfigPath).toBe(
+      path.join('C:/Users/test/AppData/Roaming', 'factory', 'config.json')
+    );
+    expect(resolved.globalConfigDisplayPath).toBe('%APPDATA%/factory/config.json');
+  });
+
+  it('masks api key preview with only suffix', () => {
+    expect(maskApiKeyPreview('sk-abcdefghijklmnop')).toBe('***mnop');
+  });
+
+  it('summarizes custom model entries with provider breakdown and ownership', () => {
+    const summary = summarizeDroidCustomModels([
+      {
+        displayName: 'CCS codex',
+        model: 'gpt-5-codex',
+        baseUrl: 'http://127.0.0.1:8317/v1',
+        apiKey: 'secret-token-1234',
+        provider: 'openai',
+      },
+      {
+        displayName: 'Factory team profile',
+        model: 'claude-sonnet-4-5',
+        baseUrl: 'https://api.anthropic.com',
+        apiKey: 'another-token-9999',
+        provider: 'anthropic',
+      },
+      {
+        displayName: 'bad entry',
+      },
+    ]);
+
+    expect(summary.customModelCount).toBe(2);
+    expect(summary.ccsManagedCount).toBe(1);
+    expect(summary.userManagedCount).toBe(1);
+    expect(summary.invalidModelEntryCount).toBe(1);
+    expect(summary.providerBreakdown.openai).toBe(1);
+    expect(summary.providerBreakdown.anthropic).toBe(1);
+    expect(summary.customModels[0].apiKeyPreview).toBe('***1234');
+  });
+
+  it('returns raw settings payload for missing settings file', () => {
+    const raw = getDroidRawSettings();
+
+    expect(raw.exists).toBe(false);
+    expect(raw.path).toBe('~/.factory/settings.json');
+    expect(raw.rawText).toBe('{}');
+    expect(raw.settings).toBeNull();
+  });
+
+  it('returns parseError when settings.json is invalid JSON', () => {
+    const settingsDir = path.join(testRoot, '.factory');
+    fs.mkdirSync(settingsDir, { recursive: true });
+    fs.writeFileSync(path.join(settingsDir, 'settings.json'), '{ invalid-json');
+
+    const raw = getDroidRawSettings();
+
+    expect(raw.exists).toBe(true);
+    expect(raw.parseError).toBeString();
+    expect(raw.settings).toBeNull();
+    expect(raw.rawText).toContain('invalid-json');
+  });
+});

ui/src/App.tsx

@@ -27,6 +27,7 @@ const CliproxyControlPanelPage = lazy(() =>
 );
 const CopilotPage = lazy(() => import('@/pages/copilot').then((m) => ({ default: m.CopilotPage })));
 const CursorPage = lazy(() => import('@/pages/cursor').then((m) => ({ default: m.CursorPage })));
+const DroidPage = lazy(() => import('@/pages/droid').then((m) => ({ default: m.DroidPage })));
 const AccountsPage = lazy(() =>
   import('@/pages/accounts').then((m) => ({ default: m.AccountsPage }))
 );
@@ -117,6 +118,14 @@ export default function App() {
                         </Suspense>
                       }
                     />
+                    <Route
+                      path="/droid"
+                      element={
+                        <Suspense fallback={<PageLoader />}>
+                          <DroidPage />
+                        </Suspense>
+                      }
+                    />
                     <Route
                       path="/accounts"
                       element={

ui/src/components/layout/app-sidebar.tsx

@@ -11,6 +11,7 @@ import {
   BarChart3,
   Gauge,
   Github,
+  TerminalSquare,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import {
@@ -103,6 +104,10 @@ const navGroups: SidebarGroupDef[] = [
       },
     ],
   },
+  {
+    title: 'Compatible CLIs',
+    items: [{ path: '/droid', icon: TerminalSquare, label: 'Factory Droid' }],
+  },
   {
     title: 'System',
     items: [

ui/src/hooks/use-droid.ts

@@ -0,0 +1,119 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { withApiBase } from '@/lib/api-client';
+
+export interface DroidBinaryDiagnostics {
+  installed: boolean;
+  path: string | null;
+  installDir: string | null;
+  source: 'CCS_DROID_PATH' | 'PATH' | 'missing';
+  version: string | null;
+  overridePath: string | null;
+}
+
+export interface DroidConfigFileDiagnostics {
+  label: string;
+  path: string;
+  resolvedPath: string;
+  exists: boolean;
+  isSymlink: boolean;
+  isRegularFile: boolean;
+  sizeBytes: number | null;
+  mtimeMs: number | null;
+  parseError: string | null;
+  readError: string | null;
+}
+
+export interface DroidCustomModelDiagnostics {
+  displayName: string;
+  model: string;
+  provider: string;
+  baseUrl: string;
+  host: string | null;
+  maxOutputTokens: number | null;
+  isCcsManaged: boolean;
+  apiKeyState: 'set' | 'missing';
+  apiKeyPreview: string | null;
+}
+
+export interface DroidDashboardDiagnostics {
+  binary: DroidBinaryDiagnostics;
+  files: {
+    settings: DroidConfigFileDiagnostics;
+    globalConfig: DroidConfigFileDiagnostics;
+  };
+  byok: {
+    activeModelSelector: string | null;
+    customModelCount: number;
+    ccsManagedCount: number;
+    userManagedCount: number;
+    invalidModelEntryCount: number;
+    providerBreakdown: Record<string, number>;
+    customModels: DroidCustomModelDiagnostics[];
+  };
+  warnings: string[];
+  docsReference: {
+    providerValues: string[];
+    settingsHierarchy: string[];
+    notes: string[];
+  };
+}
+
+export interface DroidRawSettings {
+  path: string;
+  resolvedPath: string;
+  exists: boolean;
+  mtime: number;
+  rawText: string;
+  settings: Record<string, unknown> | null;
+  parseError: string | null;
+}
+
+async function fetchDroidDiagnostics(): Promise<DroidDashboardDiagnostics> {
+  const res = await fetch(withApiBase('/droid/diagnostics'));
+  if (!res.ok) throw new Error('Failed to fetch Droid diagnostics');
+  return res.json();
+}
+
+async function fetchDroidRawSettings(): Promise<DroidRawSettings> {
+  const res = await fetch(withApiBase('/droid/settings/raw'));
+  if (!res.ok) throw new Error('Failed to fetch Droid raw settings');
+  return res.json();
+}
+
+export function useDroid() {
+  const diagnosticsQuery = useQuery({
+    queryKey: ['droid-diagnostics'],
+    queryFn: fetchDroidDiagnostics,
+    refetchInterval: 10000,
+  });
+
+  const rawSettingsQuery = useQuery({
+    queryKey: ['droid-raw-settings'],
+    queryFn: fetchDroidRawSettings,
+  });
+
+  return useMemo(
+    () => ({
+      diagnostics: diagnosticsQuery.data,
+      diagnosticsLoading: diagnosticsQuery.isLoading,
+      diagnosticsError: diagnosticsQuery.error,
+      refetchDiagnostics: diagnosticsQuery.refetch,
+
+      rawSettings: rawSettingsQuery.data,
+      rawSettingsLoading: rawSettingsQuery.isLoading,
+      rawSettingsError: rawSettingsQuery.error,
+      refetchRawSettings: rawSettingsQuery.refetch,
+    }),
+    [
+      diagnosticsQuery.data,
+      diagnosticsQuery.isLoading,
+      diagnosticsQuery.error,
+      diagnosticsQuery.refetch,
+      rawSettingsQuery.data,
+      rawSettingsQuery.isLoading,
+      rawSettingsQuery.error,
+      rawSettingsQuery.refetch,
+    ]
+  );
+}

ui/src/pages/droid.tsx

@@ -0,0 +1,380 @@
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Copy,
+  FileCode2,
+  Folder,
+  GripVertical,
+  Loader2,
+  RefreshCw,
+  Server,
+  ShieldCheck,
+  TerminalSquare,
+  XCircle,
+} from 'lucide-react';
+import { useDroid } from '@/hooks/use-droid';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { CodeEditor } from '@/components/shared/code-editor';
+import { cn } from '@/lib/utils';
+
+function formatTimestamp(value: number | null | undefined): string {
+  if (!value || !Number.isFinite(value)) return 'N/A';
+  return new Date(value).toLocaleString();
+}
+
+function formatBytes(value: number | null | undefined): string {
+  if (!value || value <= 0) return '0 B';
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  return `${(value / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function DetailRow({
+  label,
+  value,
+  mono = false,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-3 text-sm">
+      <span className="text-muted-foreground shrink-0">{label}</span>
+      <span className={cn('text-right break-all', mono && 'font-mono text-xs')}>{value}</span>
+    </div>
+  );
+}
+
+export function DroidPage() {
+  const {
+    diagnostics,
+    diagnosticsLoading,
+    diagnosticsError,
+    refetchDiagnostics,
+    rawSettings,
+    rawSettingsLoading,
+    refetchRawSettings,
+  } = useDroid();
+
+  const [copied, setCopied] = useState(false);
+
+  const copyRawSettings = async () => {
+    if (!rawSettings?.rawText) return;
+    await navigator.clipboard.writeText(rawSettings.rawText);
+    setCopied(true);
+    toast.success('Droid settings copied to clipboard');
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  const refreshAll = async () => {
+    await Promise.all([refetchDiagnostics(), refetchRawSettings()]);
+  };
+
+  const customModels = diagnostics?.byok.customModels ?? [];
+  const providerRows = useMemo(
+    () => Object.entries(diagnostics?.byok.providerBreakdown ?? {}).sort((a, b) => b[1] - a[1]),
+    [diagnostics?.byok.providerBreakdown]
+  );
+
+  const renderOverview = () => {
+    if (diagnosticsLoading) {
+      return (
+        <div className="flex h-full items-center justify-center text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin mr-2" />
+          Loading Droid diagnostics...
+        </div>
+      );
+    }
+
+    if (diagnosticsError || !diagnostics) {
+      return (
+        <div className="flex h-full items-center justify-center text-destructive px-6 text-center">
+          Failed to load Droid diagnostics.
+        </div>
+      );
+    }
+
+    return (
+      <ScrollArea className="h-full">
+        <div className="space-y-4 p-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base flex items-center gap-2">
+                <TerminalSquare className="h-4 w-4" />
+                Runtime & Installation
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Status</span>
+                <Badge variant={diagnostics.binary.installed ? 'default' : 'secondary'}>
+                  {diagnostics.binary.installed ? 'Detected' : 'Not Found'}
+                </Badge>
+              </div>
+              <DetailRow label="Detection source" value={diagnostics.binary.source} mono />
+              <DetailRow
+                label="Binary path"
+                value={diagnostics.binary.path || 'Not detected'}
+                mono
+              />
+              <DetailRow
+                label="Install directory"
+                value={diagnostics.binary.installDir || 'N/A'}
+                mono
+              />
+              <DetailRow label="Version" value={diagnostics.binary.version || 'Unknown'} mono />
+              <DetailRow
+                label="Override (CCS_DROID_PATH)"
+                value={diagnostics.binary.overridePath || 'Not set'}
+                mono
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base flex items-center gap-2">
+                <Folder className="h-4 w-4" />
+                Config Files
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {[diagnostics.files.settings, diagnostics.files.globalConfig].map((file) => (
+                <div key={file.label} className="rounded-md border p-3 space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-medium text-sm">{file.label}</span>
+                    {file.exists ? (
+                      <CheckCircle2 className="h-4 w-4 text-green-600" />
+                    ) : (
+                      <XCircle className="h-4 w-4 text-muted-foreground" />
+                    )}
+                  </div>
+                  <DetailRow label="Path" value={file.path} mono />
+                  <DetailRow label="Resolved" value={file.resolvedPath} mono />
+                  <DetailRow label="Size" value={formatBytes(file.sizeBytes)} />
+                  <DetailRow label="Last modified" value={formatTimestamp(file.mtimeMs)} />
+                  {file.parseError && (
+                    <p className="text-xs text-amber-600">Parse warning: {file.parseError}</p>
+                  )}
+                  {file.readError && (
+                    <p className="text-xs text-destructive">Read warning: {file.readError}</p>
+                  )}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base flex items-center gap-2">
+                <Server className="h-4 w-4" />
+                BYOK Summary
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <DetailRow
+                label="Active model selector"
+                value={diagnostics.byok.activeModelSelector || 'Not set'}
+                mono
+              />
+              <DetailRow label="Custom models" value={String(diagnostics.byok.customModelCount)} />
+              <DetailRow label="CCS-managed" value={String(diagnostics.byok.ccsManagedCount)} />
+              <DetailRow label="User-managed" value={String(diagnostics.byok.userManagedCount)} />
+              <DetailRow
+                label="Malformed entries"
+                value={String(diagnostics.byok.invalidModelEntryCount)}
+              />
+              <Separator />
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">Providers</p>
+                <div className="flex flex-wrap gap-1.5">
+                  {providerRows.length === 0 && (
+                    <Badge variant="secondary" className="font-mono">
+                      none
+                    </Badge>
+                  )}
+                  {providerRows.map(([provider, count]) => (
+                    <Badge key={provider} variant="outline" className="font-mono text-xs">
+                      {provider}: {count}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base flex items-center gap-2">
+                <ShieldCheck className="h-4 w-4" />
+                Docs-Aligned Notes
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              {diagnostics.docsReference.notes.map((note) => (
+                <p key={note} className="text-muted-foreground">
+                  - {note}
+                </p>
+              ))}
+              <Separator />
+              <p className="text-xs text-muted-foreground">
+                Provider values: {diagnostics.docsReference.providerValues.join(', ')}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Settings hierarchy: {diagnostics.docsReference.settingsHierarchy.join(' -> ')}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">Custom Models</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border overflow-hidden">
+                <div className="grid grid-cols-[2fr_1fr_2fr] bg-muted/40 px-3 py-2 text-xs font-medium">
+                  <span>Name / Model</span>
+                  <span>Provider</span>
+                  <span>Base URL</span>
+                </div>
+                <ScrollArea className="h-52">
+                  <div className="divide-y">
+                    {customModels.length === 0 && (
+                      <div className="px-3 py-4 text-xs text-muted-foreground">
+                        No custom models
+                      </div>
+                    )}
+                    {customModels.map((model) => (
+                      <div
+                        key={`${model.displayName}-${model.model}-${model.baseUrl}`}
+                        className="grid grid-cols-[2fr_1fr_2fr] gap-2 px-3 py-2 text-xs"
+                      >
+                        <div className="min-w-0">
+                          <p className="font-medium truncate">{model.displayName}</p>
+                          <p className="text-muted-foreground font-mono truncate">{model.model}</p>
+                        </div>
+                        <div className="min-w-0">
+                          <p className="truncate">{model.provider}</p>
+                          <p className="text-muted-foreground">{model.apiKeyPreview || 'no-key'}</p>
+                        </div>
+                        <div className="min-w-0">
+                          <p className="truncate" title={model.baseUrl}>
+                            {model.host || model.baseUrl}
+                          </p>
+                          <p className="text-muted-foreground font-mono truncate">
+                            {model.baseUrl}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+            </CardContent>
+          </Card>
+
+          {diagnostics.warnings.length > 0 && (
+            <Card className="border-amber-200 bg-amber-50/50 dark:bg-amber-950/20">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 text-amber-600" />
+                  Warnings
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-1.5">
+                {diagnostics.warnings.map((warning) => (
+                  <p key={warning} className="text-sm text-amber-800 dark:text-amber-300">
+                    - {warning}
+                  </p>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <div className="h-[calc(100vh-100px)] overflow-hidden">
+      <PanelGroup direction="horizontal" className="h-full">
+        <Panel defaultSize={45} minSize={35}>
+          <div className="h-full border-r bg-muted/20">{renderOverview()}</div>
+        </Panel>
+        <PanelResizeHandle className="w-2 bg-border hover:bg-primary/20 transition-colors cursor-col-resize flex items-center justify-center group">
+          <GripVertical className="w-3 h-3 text-muted-foreground group-hover:text-primary" />
+        </PanelResizeHandle>
+        <Panel defaultSize={55} minSize={35}>
+          <div className="h-full flex flex-col">
+            <div className="p-4 border-b bg-background flex items-center justify-between gap-2">
+              <div className="min-w-0">
+                <h2 className="font-semibold flex items-center gap-2">
+                  <FileCode2 className="h-4 w-4 text-primary" />
+                  Droid BYOK Settings
+                </h2>
+                <p className="text-xs text-muted-foreground font-mono truncate">
+                  {rawSettings?.path || '~/.factory/settings.json'}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={copyRawSettings}
+                  disabled={!rawSettings?.rawText}
+                >
+                  <Copy className="h-4 w-4 mr-1" />
+                  {copied ? 'Copied' : 'Copy'}
+                </Button>
+                <Button variant="outline" size="sm" onClick={refreshAll}>
+                  <RefreshCw
+                    className={cn(
+                      'h-4 w-4',
+                      diagnosticsLoading || rawSettingsLoading ? 'animate-spin' : ''
+                    )}
+                  />
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex-1 overflow-auto">
+              {rawSettingsLoading ? (
+                <div className="h-full flex items-center justify-center text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin mr-2" />
+                  Loading settings.json...
+                </div>
+              ) : (
+                <div className="h-full flex flex-col">
+                  {rawSettings?.parseError && (
+                    <div className="mx-4 mt-4 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:bg-amber-950/20 dark:text-amber-300">
+                      Parse warning: {rawSettings.parseError}
+                    </div>
+                  )}
+                  <div className="flex-1 p-4 pt-3">
+                    <div className="h-full rounded-md border overflow-hidden bg-background">
+                      <CodeEditor
+                        value={rawSettings?.rawText || '{}'}
+                        onChange={() => {}}
+                        language="json"
+                        readonly
+                        minHeight="100%"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </Panel>
+      </PanelGroup>
+    </div>
+  );
+}

ui/src/pages/index.tsx

@@ -17,3 +17,5 @@ export { AnalyticsPage } from './analytics';
 export { CursorPage } from './cursor';
 
 export { UpdatesPage } from './updates';
+
+export { DroidPage } from './droid';