ccnew 0.1.10

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

@@ -0,0 +1,103 @@
+import clsx from "clsx";
+import { Bot, Boxes, ChevronRight, Search, Settings2, ShieldCheck, Sparkles, TerminalSquare } from "lucide-react";
+import type { AppSnapshot, PlatformId } from "../../types";
+import { LogoMark } from "../ui/logo-mark";
+
+const platformIcons = {
+  codex: Bot,
+  opencode: Boxes,
+  openclaw: ShieldCheck
+};
+
+export function AppSidebar(props: {
+  snapshot: AppSnapshot;
+  activePlatform: PlatformId;
+  onPlatformChange: (platform: PlatformId) => void;
+}) {
+  return (
+    <aside className="glass flex w-[252px] shrink-0 flex-col rounded-[28px] border border-white/6 px-4 py-5 shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+      <div className="flex items-center gap-3 px-2">
+        <LogoMark />
+        <div>
+          <div className="text-[11px] font-semibold uppercase tracking-[0.34em] text-slate-500">FHL</div>
+          <div className="font-['Space_Grotesk'] text-xl font-bold text-slate-50">Control</div>
+        </div>
+      </div>
+
+      <div className="mt-6 rounded-2xl border border-white/6 bg-white/[0.02] px-3 py-2">
+        <div className="flex items-center gap-2 text-sm text-slate-400">
+          <Search className="h-4 w-4" />
+          <span>Search providers / routes / models</span>
+        </div>
+      </div>
+
+      <div className="mt-6">
+        <div className="px-2 text-[11px] uppercase tracking-[0.3em] text-slate-500">Clients</div>
+        <div className="mt-2 space-y-2">
+          {props.snapshot.platforms.map((item) => {
+            const Icon = platformIcons[item.id];
+
+            return (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => props.onPlatformChange(item.id)}
+                className={clsx(
+                  "flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition",
+                  item.id === props.activePlatform
+                    ? "border-cyan-300/20 bg-cyan-400/[0.08]"
+                    : "border-white/6 bg-white/[0.02] hover:bg-white/[0.045]"
+                )}
+              >
+                <div
+                  className={clsx(
+                    "rounded-xl p-2",
+                    item.id === props.activePlatform ? "bg-cyan-400/12 text-cyan-200" : "bg-slate-900/70 text-slate-400"
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="font-medium text-slate-100">{item.label}</div>
+                  <div className="truncate text-xs text-slate-500">{item.providerCount} saved routes</div>
+                </div>
+                <ChevronRight className="h-4 w-4 text-slate-600" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="mt-6">
+        <div className="px-2 text-[11px] uppercase tracking-[0.3em] text-slate-500">Modules</div>
+        <div className="mt-2 space-y-2">
+          <div className="rounded-2xl border border-white/6 bg-white/[0.02] px-4 py-3">
+            <div className="flex items-center gap-2 text-sm text-slate-200">
+              <TerminalSquare className="h-4 w-4 text-cyan-300" />
+              Provider Workspace
+            </div>
+          </div>
+          <div className="rounded-2xl border border-white/6 bg-white/[0.02] px-4 py-3">
+            <div className="flex items-center gap-2 text-sm text-slate-200">
+              <Sparkles className="h-4 w-4 text-slate-300" />
+              MCP / Prompts / Skills
+            </div>
+          </div>
+          <div className="rounded-2xl border border-white/6 bg-white/[0.02] px-4 py-3">
+            <div className="flex items-center gap-2 text-sm text-slate-200">
+              <Settings2 className="h-4 w-4 text-slate-300" />
+              Desktop Settings
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-auto rounded-[24px] border border-cyan-300/10 bg-gradient-to-br from-cyan-400/[0.07] to-teal-400/[0.05] p-4">
+        <div className="text-[11px] uppercase tracking-[0.3em] text-cyan-200/65">Visual Target</div>
+        <div className="mt-3 text-sm font-medium leading-6 text-slate-200">
+          CC Switch-style structure and density, with your own name and logo only.
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/components/layout/top-toolbar.tsx

@@ -0,0 +1,44 @@
+export function TopToolbar(props: {
+  title: string;
+  currentRoute: string | null;
+  onRefresh: () => void;
+  onProbe: () => void;
+}) {
+  return (
+    <header className="flex items-center justify-between gap-4 border-b border-white/6 pb-5">
+      <div>
+        <div className="text-[11px] uppercase tracking-[0.34em] text-slate-500">Desktop Control Center</div>
+        <h1 className="mt-2 font-['Space_Grotesk'] text-[38px] font-bold tracking-[-0.05em] text-slate-50">
+          {props.title}
+        </h1>
+        <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">
+          Closer to the CC Switch control-surface layout, with denser modules and utility-first hierarchy.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button className="rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-200">MCP</button>
+        <button className="rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-200">Prompts</button>
+        <button className="rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-200">Skills</button>
+        <div className="rounded-2xl border border-emerald-400/10 bg-emerald-400/[0.05] px-4 py-3">
+          <div className="text-[11px] uppercase tracking-[0.28em] text-emerald-300/70">Current Route</div>
+          <div className="mt-1 text-sm font-medium text-emerald-200">{props.currentRoute || "No Active Route"}</div>
+        </div>
+        <button
+          type="button"
+          onClick={props.onRefresh}
+          className="rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-200"
+        >
+          Refresh
+        </button>
+        <button
+          type="button"
+          onClick={props.onProbe}
+          className="rounded-2xl border border-cyan-300/18 bg-cyan-400/[0.1] px-4 py-3 text-sm font-medium text-cyan-100"
+        >
+          Probe
+        </button>
+      </div>
+    </header>
+  );
+}

package/src/components/layout/workspace-tabs.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { workspaceSections, type WorkspaceSectionId } from "../../lib/workspace-sections";
+
+export function WorkspaceTabs(props: {
+  activeSection: WorkspaceSectionId;
+  onSectionChange: (section: WorkspaceSectionId) => void;
+}) {
+  return (
+    <div className="mt-4 flex items-center gap-2 border-b border-white/6 pb-4">
+      {workspaceSections.map((section) => {
+        const Icon = section.icon;
+
+        return (
+          <button
+            key={section.id}
+            type="button"
+            onClick={() => props.onSectionChange(section.id)}
+            className={clsx(
+              "inline-flex items-center gap-2 rounded-2xl border px-4 py-3 text-sm transition",
+              props.activeSection === section.id
+                ? "border-cyan-300/18 bg-cyan-400/[0.1] text-cyan-100"
+                : "border-white/8 bg-white/[0.03] text-slate-300 hover:bg-white/[0.05]"
+            )}
+          >
+            <Icon className="h-4 w-4" />
+            {section.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/providers/inspector-panel.tsx

@@ -0,0 +1,84 @@
+import { Activity, Rocket } from "lucide-react";
+import type { PlatformSnapshot, ProbeResult } from "../../types";
+
+export function InspectorPanel(props: { platform: PlatformSnapshot; probeResults?: ProbeResult[] }) {
+  return (
+    <article className="space-y-4">
+      <div className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Health</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Route latency
+        </h2>
+
+        <div className="mt-4 space-y-2">
+          {(props.probeResults || []).map((result) => (
+            <div
+              key={result.baseUrl}
+              className="flex items-center justify-between rounded-2xl border border-white/6 bg-white/[0.03] px-3 py-3"
+            >
+              <div className="min-w-0 pr-3">
+                <div className="truncate text-sm text-slate-200">{result.baseUrl}</div>
+                <div className="mt-1 text-[11px] uppercase tracking-[0.24em] text-slate-500">
+                  {result.ok ? "Available" : "Failed"}
+                </div>
+              </div>
+              <div className="text-sm font-medium text-cyan-200">{result.latency} ms</div>
+            </div>
+          ))}
+
+          {!props.probeResults?.length ? (
+            <div className="rounded-2xl border border-white/6 bg-white/[0.03] px-3 py-4 text-sm text-slate-500">
+              Click Probe in the toolbar to load latency data.
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Targets</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Live config files
+        </h2>
+
+        <div className="mt-4 space-y-2">
+          {props.platform.targetFiles.map((file) => (
+            <div key={file} className="rounded-2xl border border-white/6 bg-white/[0.03] px-3 py-3 text-sm text-slate-300">
+              {file}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="rounded-[24px] border border-cyan-300/12 bg-gradient-to-br from-cyan-400/[0.08] to-teal-400/[0.05] p-5">
+        <div className="flex items-center gap-2 text-sm font-medium text-cyan-100">
+          <Rocket className="h-4 w-4" />
+          Release Panel
+        </div>
+        <div className="mt-3 text-sm leading-6 text-slate-300/80">
+          Architecture now mirrors the same component-heavy desktop shell direction instead of a single-page mock.
+        </div>
+      </div>
+
+      <div className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="flex items-center gap-2 text-sm font-medium text-slate-200">
+          <Activity className="h-4 w-4 text-emerald-300" />
+          Workspace status
+        </div>
+        <div className="mt-3 space-y-2 text-sm text-slate-400">
+          <div className="flex items-center justify-between">
+            <span>Provider Sync</span>
+            <span className="text-emerald-300">Healthy</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Route Cache</span>
+            <span className="text-cyan-200">Ready</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Config Targets</span>
+            <span className="text-slate-200">{props.platform.targetFiles.length}</span>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/components/providers/metric-strip.tsx

@@ -0,0 +1,26 @@
+import { CloudLightning, FolderOpen, KeyRound, LayoutGrid } from "lucide-react";
+
+const icons = [LayoutGrid, KeyRound, CloudLightning, FolderOpen];
+
+export function MetricStrip(props: { items: Array<{ label: string; value: string; hint: string }> }) {
+  return (
+    <section className="mt-4 grid grid-cols-4 gap-3">
+      {props.items.map((item, index) => {
+        const Icon = icons[index];
+
+        return (
+          <article key={item.label} className="rounded-[20px] border border-white/6 bg-white/[0.03] px-4 py-4">
+            <div className="flex items-center justify-between">
+              <div className="text-[11px] uppercase tracking-[0.28em] text-slate-500">{item.label}</div>
+              <Icon className="h-4 w-4 text-cyan-300/80" />
+            </div>
+            <div className="mt-4 font-['Space_Grotesk'] text-2xl font-bold tracking-[-0.04em] text-slate-50">
+              {item.value}
+            </div>
+            <div className="mt-1 text-xs text-slate-500">{item.hint}</div>
+          </article>
+        );
+      })}
+    </section>
+  );
+}

package/src/components/providers/provider-editor.tsx

@@ -0,0 +1,87 @@
+type EditorForm = {
+  name: string;
+  baseUrl: string;
+  apiKey: string;
+  model: string;
+};
+
+const modelOptions = ["gpt-5.4", "gpt-5.3-codex", "gpt-5.2", "gpt-5.1-codex-max"];
+
+export function ProviderEditor(props: {
+  form: EditorForm;
+  onChange: (next: EditorForm) => void;
+  onSubmit: () => void;
+  isSaving: boolean;
+}) {
+  return (
+    <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+      <div>
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Quick Editor</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Provider form
+        </h2>
+        <p className="mt-2 text-sm leading-6 text-slate-400">
+          Compact editor panel, closer to the right-side utility workflow used by CC Switch.
+        </p>
+      </div>
+
+      <form
+        className="mt-5 space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          props.onSubmit();
+        }}
+      >
+        <label className="block">
+          <div className="mb-2 text-[11px] uppercase tracking-[0.26em] text-slate-500">Provider Name</div>
+          <input
+            value={props.form.name}
+            onChange={(event) => props.onChange({ ...props.form, name: event.target.value })}
+            className="w-full rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 outline-none transition focus:border-cyan-300/24"
+          />
+        </label>
+
+        <label className="block">
+          <div className="mb-2 text-[11px] uppercase tracking-[0.26em] text-slate-500">Base URL</div>
+          <input
+            value={props.form.baseUrl}
+            onChange={(event) => props.onChange({ ...props.form, baseUrl: event.target.value })}
+            className="w-full rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 outline-none transition focus:border-cyan-300/24"
+          />
+        </label>
+
+        <label className="block">
+          <div className="mb-2 text-[11px] uppercase tracking-[0.26em] text-slate-500">API Key</div>
+          <input
+            type="password"
+            value={props.form.apiKey}
+            onChange={(event) => props.onChange({ ...props.form, apiKey: event.target.value })}
+            className="w-full rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 outline-none transition focus:border-cyan-300/24"
+          />
+        </label>
+
+        <label className="block">
+          <div className="mb-2 text-[11px] uppercase tracking-[0.26em] text-slate-500">Model</div>
+          <select
+            value={props.form.model}
+            onChange={(event) => props.onChange({ ...props.form, model: event.target.value })}
+            className="w-full rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 outline-none transition focus:border-cyan-300/24"
+          >
+            {modelOptions.map((item) => (
+              <option key={item} value={item} className="bg-slate-950">
+                {item}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <button
+          type="submit"
+          className="w-full rounded-2xl border border-cyan-300/18 bg-cyan-400/[0.12] px-4 py-3 text-sm font-medium text-cyan-100 shadow-[0_12px_28px_rgba(6,182,212,0.12)]"
+        >
+          {props.isSaving ? "Saving..." : "Save & Apply"}
+        </button>
+      </form>
+    </article>
+  );
+}

package/src/components/providers/provider-table.tsx

@@ -0,0 +1,85 @@
+import { Plus } from "lucide-react";
+import clsx from "clsx";
+import type { PlatformSnapshot, Provider } from "../../types";
+
+export function ProviderTable(props: {
+  platform: PlatformSnapshot;
+  onEdit: (provider: Provider) => void;
+  onActivate: (providerId: string) => void;
+}) {
+  return (
+    <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Provider Matrix</div>
+          <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+            Saved providers
+          </h2>
+          <p className="mt-2 text-sm leading-6 text-slate-400">
+            The primary working area follows the desktop-table layout instead of stacked marketing cards.
+          </p>
+        </div>
+
+        <button className="inline-flex items-center gap-2 rounded-xl border border-white/8 bg-white/[0.03] px-3 py-2 text-xs text-slate-300">
+          <Plus className="h-4 w-4" />
+          Add
+        </button>
+      </div>
+
+      <div className="mt-5 overflow-hidden rounded-[20px] border border-white/6 bg-[#0b121a]">
+        <div className="grid grid-cols-[1.2fr_0.8fr_1.2fr_0.72fr] gap-3 border-b border-white/6 px-4 py-3 text-[11px] uppercase tracking-[0.24em] text-slate-500">
+          <div>Name</div>
+          <div>Model</div>
+          <div>Base URL</div>
+          <div>Status</div>
+        </div>
+
+        <div className="divide-y divide-white/6">
+          {props.platform.providers.map((provider) => (
+            <div
+              key={provider.id}
+              className={clsx(
+                "grid grid-cols-[1.2fr_0.8fr_1.2fr_0.72fr] gap-3 px-4 py-4 transition",
+                provider.isActive ? "bg-cyan-400/[0.06]" : "hover:bg-white/[0.03]"
+              )}
+            >
+              <div className="min-w-0">
+                <div className="truncate text-sm font-medium text-slate-100">{provider.name}</div>
+                <div className="mt-1 text-xs text-slate-500">{provider.updatedAt.slice(0, 10)}</div>
+              </div>
+              <div className="min-w-0">
+                <div className="truncate text-sm text-slate-300">{provider.model}</div>
+                <div className="mt-1 text-xs text-slate-500">{provider.maskedApiKey}</div>
+              </div>
+              <div className="min-w-0">
+                <div className="truncate text-sm text-slate-300">{provider.baseUrl}</div>
+                <button
+                  type="button"
+                  onClick={() => props.onEdit(provider)}
+                  className="mt-2 rounded-lg border border-white/8 bg-white/[0.03] px-2.5 py-1 text-[11px] text-slate-300"
+                >
+                  Edit
+                </button>
+              </div>
+              <div className="flex flex-col items-start gap-2">
+                {provider.isActive ? (
+                  <span className="rounded-full bg-cyan-400/12 px-2.5 py-1 text-[11px] font-medium text-cyan-200">
+                    Active
+                  </span>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => props.onActivate(provider.id)}
+                    className="rounded-lg border border-cyan-300/14 bg-cyan-400/[0.08] px-3 py-1.5 text-[11px] text-cyan-100"
+                  >
+                    Enable
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/components/ui/logo-mark.tsx

@@ -0,0 +1,32 @@
+export function LogoMark() {
+  return (
+    <div className="h-11 w-11 drop-shadow-[0_16px_30px_rgba(12,142,127,0.24)]">
+      <svg viewBox="0 0 128 128" className="h-11 w-11" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="fml-bg-react" x1="16" y1="12" x2="108" y2="116" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#071A24" />
+            <stop offset="0.55" stopColor="#103847" />
+            <stop offset="1" stopColor="#0C8E7F" />
+          </linearGradient>
+          <radialGradient id="fml-glow-react" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(96 28) rotate(135) scale(42)">
+            <stop stopColor="#5EEAD4" stopOpacity="0.85" />
+            <stop offset="1" stopColor="#5EEAD4" stopOpacity="0" />
+          </radialGradient>
+          <linearGradient id="fml-stroke-react" x1="24" y1="30" x2="98" y2="98" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#FFF9EE" />
+            <stop offset="1" stopColor="#D5FBF5" />
+          </linearGradient>
+        </defs>
+        <rect x="8" y="8" width="112" height="112" rx="30" fill="url(#fml-bg-react)" />
+        <rect x="8.75" y="8.75" width="110.5" height="110.5" rx="29.25" stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" />
+        <circle cx="96" cy="28" r="30" fill="url(#fml-glow-react)" opacity="0.72" />
+        <path d="M26 36V92" stroke="url(#fml-stroke-react)" strokeWidth="10" strokeLinecap="round" />
+        <path d="M26 36H54" stroke="url(#fml-stroke-react)" strokeWidth="10" strokeLinecap="round" />
+        <path d="M26 62H47" stroke="url(#fml-stroke-react)" strokeWidth="10" strokeLinecap="round" />
+        <path d="M60 92V36L74 62L88 36V92" stroke="url(#fml-stroke-react)" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M88 92H102" stroke="#F3C46C" strokeWidth="10" strokeLinecap="round" />
+        <path d="M102 36V92" stroke="#F3C46C" strokeWidth="10" strokeLinecap="round" />
+      </svg>
+    </div>
+  );
+}

package/src/features/mcp/mcp-view.tsx

@@ -0,0 +1,45 @@
+const connectors = [
+  { name: "Filesystem", status: "Connected", detail: "Workspace root mounted with read/write scope" },
+  { name: "Browser", status: "Ready", detail: "Web browsing enabled for docs, releases and references" },
+  { name: "Git", status: "Healthy", detail: "Repository metadata and branch graph available" },
+  { name: "Shell", status: "Allowed", detail: "Local command execution within workspace boundaries" }
+];
+
+export function McpView() {
+  return (
+    <section className="mt-4 grid min-h-0 flex-1 grid-cols-[1.1fr_0.9fr] gap-4">
+      <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Connector Registry</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          MCP endpoints
+        </h2>
+        <div className="mt-5 space-y-3">
+          {connectors.map((item) => (
+            <div key={item.name} className="rounded-[20px] border border-white/6 bg-white/[0.03] p-4">
+              <div className="flex items-center justify-between">
+                <div className="text-sm font-medium text-slate-100">{item.name}</div>
+                <div className="rounded-full bg-cyan-400/12 px-2.5 py-1 text-[11px] text-cyan-200">{item.status}</div>
+              </div>
+              <div className="mt-2 text-sm leading-6 text-slate-400">{item.detail}</div>
+            </div>
+          ))}
+        </div>
+      </article>
+
+      <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Policy Surface</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Access profile
+        </h2>
+        <div className="mt-5 space-y-3">
+          {["Workspace Write", "Network Access", "Prompt Upgrade", "Parallel Agents"].map((item) => (
+            <div key={item} className="flex items-center justify-between rounded-[18px] border border-white/6 bg-white/[0.03] px-4 py-3">
+              <span className="text-sm text-slate-200">{item}</span>
+              <span className="text-xs uppercase tracking-[0.24em] text-emerald-300">Enabled</span>
+            </div>
+          ))}
+        </div>
+      </article>
+    </section>
+  );
+}

package/src/features/prompts/prompts-view.tsx

@@ -0,0 +1,40 @@
+const promptCards = [
+  { name: "Default Coding", tone: "Direct", notes: "For implementation, debugging and repo-level changes." },
+  { name: "UI Review", tone: "Critical", notes: "For visual comparison, layout review and polish passes." },
+  { name: "Provider Setup", tone: "Operational", notes: "For relay config, route switching and install flows." }
+];
+
+export function PromptsView() {
+  return (
+    <section className="mt-4 grid min-h-0 flex-1 grid-cols-[1.18fr_0.82fr] gap-4">
+      <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Prompt Library</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Saved prompt profiles
+        </h2>
+        <div className="mt-5 space-y-3">
+          {promptCards.map((item) => (
+            <div key={item.name} className="rounded-[20px] border border-white/6 bg-white/[0.03] p-4">
+              <div className="flex items-center justify-between">
+                <div className="text-sm font-medium text-slate-100">{item.name}</div>
+                <div className="rounded-full bg-white/[0.05] px-2.5 py-1 text-[11px] text-slate-300">{item.tone}</div>
+              </div>
+              <div className="mt-2 text-sm leading-6 text-slate-400">{item.notes}</div>
+            </div>
+          ))}
+        </div>
+      </article>
+
+      <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Active Prompt</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Prompt editor
+        </h2>
+        <div className="mt-5 rounded-[20px] border border-white/6 bg-[#0b121a] p-4 text-sm leading-7 text-slate-300">
+          You are a coding assistant for ccon. Prioritize provider workflows, desktop release preparation,
+          route health, and concrete implementation over abstract planning.
+        </div>
+      </article>
+    </section>
+  );
+}

package/src/features/providers/providers-view.tsx

@@ -0,0 +1,40 @@
+import { InspectorPanel } from "../../components/providers/inspector-panel";
+import { MetricStrip } from "../../components/providers/metric-strip";
+import { ProviderEditor } from "../../components/providers/provider-editor";
+import { ProviderTable } from "../../components/providers/provider-table";
+import type { ReturnTypeUseControlWorkspace } from "./types";
+
+export function ProvidersView(props: { workspace: ReturnTypeUseControlWorkspace }) {
+  return (
+    <>
+      <MetricStrip items={props.workspace.metrics} />
+
+      <section className="mt-4 grid min-h-0 flex-1 grid-cols-[1.2fr_0.94fr_0.72fr] gap-4">
+        <ProviderTable
+          platform={props.workspace.platform}
+          onEdit={props.workspace.openProvider}
+          onActivate={(providerId) =>
+            props.workspace.activateMutation.mutate({
+              platform: props.workspace.platform.id,
+              providerId
+            })
+          }
+        />
+
+        <ProviderEditor
+          form={props.workspace.editorForm}
+          onChange={props.workspace.setEditorForm}
+          onSubmit={() =>
+            props.workspace.saveMutation.mutate({
+              platform: props.workspace.platform.id,
+              ...props.workspace.editorForm
+            })
+          }
+          isSaving={props.workspace.saveMutation.isPending}
+        />
+
+        <InspectorPanel platform={props.workspace.platform} probeResults={props.workspace.probeQuery.data?.results} />
+      </section>
+    </>
+  );
+}

package/src/features/providers/types.ts

@@ -0,0 +1,26 @@
+import type { PlatformId, PlatformSnapshot, ProbeResult, Provider } from "../../types";
+
+export type ProviderEditorForm = {
+  name: string;
+  baseUrl: string;
+  apiKey: string;
+  model: string;
+};
+
+export type ReturnTypeUseControlWorkspace = {
+  metrics: Array<{ label: string; value: string; hint: string }>;
+  platform: PlatformSnapshot;
+  openProvider: (provider: Provider) => void;
+  activateMutation: {
+    mutate: (input: { platform: PlatformId; providerId: string }) => void;
+  };
+  editorForm: ProviderEditorForm;
+  setEditorForm: (next: ProviderEditorForm) => void;
+  saveMutation: {
+    mutate: (input: { platform: PlatformId; name: string; baseUrl: string; apiKey: string; model: string }) => void;
+    isPending: boolean;
+  };
+  probeQuery: {
+    data?: { results: ProbeResult[] };
+  };
+};