style: show human-readable provider name in Settings model dropdown

Author: marian2js

apps/desktop/src/features/agents/display-helpers.ts

@@ -13,17 +13,32 @@ export function formatTaskCount(count: number): string {
 }
 
 /**
- * Auth-action phrases → clean provider display names.
+ * Auth-action phrases and slug-style IDs → clean provider display names.
  */
 const PROVIDER_NAME_MAP: Record<string, string> = {
   "Sign in with GitHub": "GitHub Copilot",
   "Use API key": "API Key",
+  "github-copilot": "GitHub Copilot",
+  "openai": "OpenAI",
+  "anthropic": "Anthropic",
+  "google": "Google",
 };
 
+/**
+ * Convert a kebab-case slug to title case (e.g. "my-provider" → "My Provider").
+ */
+function formatProviderSlug(slug: string): string {
+  return slug
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
 /**
  * Cleans up provider names that read like auth actions
- * (e.g. "Sign in with GitHub") into proper display labels.
+ * (e.g. "Sign in with GitHub") or raw slugs (e.g. "github-copilot")
+ * into proper display labels.
  */
 export function cleanProviderName(name: string): string {
-  return PROVIDER_NAME_MAP[name] ?? name;
+  return PROVIDER_NAME_MAP[name] ?? (name.includes("-") ? formatProviderSlug(name) : name);
 }

apps/desktop/src/features/settings/components/ProjectSettings.tsx

@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { cleanProviderName } from "@/features/agents/display-helpers";
 import type { SidecarClient } from "@/lib/sidecar/client";
 import { toast } from "sonner";
 import { DeleteProjectDialog } from "./DeleteProjectDialog";
@@ -101,7 +102,10 @@ export function ProjectSettings({
   const [models, setModels] = useState<ProviderModelOption[]>([]);
   const [isLoadingModels, setIsLoadingModels] = useState(false);
 
-  // Build provider list: connected provider IDs with display names from the providers catalog
+  // Build provider list: connected provider IDs with human-readable display names
+  const connectionNameMap = new Map(
+    (authOverview?.connections ?? []).map((c) => [c.providerId, c.providerName]),
+  );
   const providerNameMap = new Map(
     (authOverview?.providers ?? []).map((p) => [p.id, p.name]),
   );
@@ -110,7 +114,7 @@ export function ProjectSettings({
     : [];
   const connectedProviders = connectedProviderIds.map((pid) => ({
     providerId: pid,
-    displayName: providerNameMap.get(pid) ?? pid,
+    displayName: cleanProviderName(connectionNameMap.get(pid) ?? providerNameMap.get(pid) ?? pid),
   }));
 
   // Load model catalog when provider changes

apps/desktop/src/features/settings/components/settings-provider-display-name.test.ts

@@ -0,0 +1,80 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const src = readFileSync(
+  resolve(import.meta.dirname, "ProjectSettings.tsx"),
+  "utf-8",
+);
+
+const displayHelpersSrc = readFileSync(
+  resolve(import.meta.dirname, "../../agents/display-helpers.ts"),
+  "utf-8",
+);
+
+// ---------------------------------------------------------------------------
+// AC1: Settings PROVIDER dropdown shows human-readable names, not raw slugs
+// ---------------------------------------------------------------------------
+
+void test("Settings imports cleanProviderName from display-helpers", () => {
+  assert.ok(
+    src.includes("cleanProviderName"),
+    "ProjectSettings must import cleanProviderName to format provider display names",
+  );
+});
+
+void test("Settings applies cleanProviderName to provider display names", () => {
+  assert.ok(
+    src.includes("cleanProviderName("),
+    "ProjectSettings must call cleanProviderName() when building provider display names",
+  );
+});
+
+// ---------------------------------------------------------------------------
+// AC2: Display format matches Connections page provider naming
+// ---------------------------------------------------------------------------
+
+void test("Settings uses same cleanProviderName utility as Connections page", () => {
+  assert.ok(
+    src.includes('from "@/features/agents/display-helpers"') ||
+    src.includes("from '../../agents/display-helpers'") ||
+    src.includes('from "../../agents/display-helpers"'),
+    "Must import cleanProviderName from the same module the Connections page uses",
+  );
+});
+
+// ---------------------------------------------------------------------------
+// AC3: The underlying data value remains the slug (no functional change)
+// ---------------------------------------------------------------------------
+
+void test("Select option value remains the raw providerId slug", () => {
+  assert.ok(
+    src.includes("value={p.providerId}") || src.includes("value={p.providerId}"),
+    "SelectItem value must use the raw providerId slug for data binding",
+  );
+});
+
+// ---------------------------------------------------------------------------
+// AC4: All provider options use human-readable labels
+// ---------------------------------------------------------------------------
+
+void test("display-helpers handles slug-style provider names as fallback", () => {
+  assert.ok(
+    displayHelpersSrc.includes("formatProviderSlug") ||
+    displayHelpersSrc.includes("github-copilot") ||
+    displayHelpersSrc.includes("split"),
+    "display-helpers must handle slug-to-display conversion for provider names that are raw slugs",
+  );
+});
+
+// ---------------------------------------------------------------------------
+// AC5: Provider name resolution uses connection providerName field
+// ---------------------------------------------------------------------------
+
+void test("Settings builds provider name from connections providerName field", () => {
+  assert.ok(
+    src.includes("c.providerName") || src.includes("providerName"),
+    "Must use connection.providerName for name resolution (same source as Connections page)",
+  );
+});