[codex] guard settings API key entries

static/frontend/src/components/settings/SettingsPage.test.ts

@@ -10,6 +10,7 @@ vi.mock("@tanstack/react-query", () => ({
 }));
 
 import { useQuery } from "@tanstack/react-query";
+import { getApiKeyValue } from "./apiKeys";
 
 interface ServerStatus {
   status: string;
@@ -160,6 +161,10 @@ describe("SettingsPage ApiKeysSection Logic", () => {
       expect(truncated).toBe("short...");
     });
 
+    it("normalizes object key entries", () => {
+      expect(getApiKeyValue({ key: "sk-object-key" })).toBe("sk-object-key");
+    });
+
     it("checks if keys array has items", () => {
       const data = { keys: ["key1", "key2"] };
       const hasKeys = data?.keys?.length > 0;

static/frontend/src/components/settings/SettingsPage.tsx

@@ -20,6 +20,7 @@ import { useI18n } from '@/contexts';
 import { ProxySettings } from './ProxySettings';
 import { AuthManager } from './AuthManager';
 import { PortConfiguration } from './PortConfig';
+import { type ApiKeyEntry, getApiKeyValue } from './apiKeys';
 import styles from './SettingsPage.module.css';
 
 // API functions
@@ -164,7 +165,7 @@ function StatusBar() {
 
 function ApiKeysSection() {
   const { t } = useI18n();
-  const { data, isLoading, refetch } = useQuery<{ keys: string[] }>({
+  const { data, isLoading, refetch } = useQuery<{ keys: ApiKeyEntry[] }>({
     queryKey: ['apiKeys'],
     queryFn: fetchApiKeys,
   });
@@ -229,17 +230,22 @@ function ApiKeysSection() {
       </p>
       <div className={styles.keyList}>
         {data?.keys?.length ? (
-          data.keys.map((key) => (
-            <div key={key} className={styles.keyItem}>
-              <code className={styles.keyValue}>{key.substring(0, 16)}...</code>
-              <button 
-                className={styles.deleteButton}
-                onClick={() => handleDelete(key)}
-              >
-                {t.common.delete}
-              </button>
-            </div>
-          ))
+          data.keys.map((entry) => {
+            const key = getApiKeyValue(entry);
+            if (!key) return null;
+
+            return (
+              <div key={key} className={styles.keyItem}>
+                <code className={styles.keyValue}>{key.substring(0, 16)}...</code>
+                <button
+                  className={styles.deleteButton}
+                  onClick={() => handleDelete(key)}
+                >
+                  {t.common.delete}
+                </button>
+              </div>
+            );
+          })
         ) : (
           <div className={styles.emptyState}>{t.settingsPage.noApiKeys}</div>
         )}

static/frontend/src/components/settings/apiKeys.ts

@@ -0,0 +1,5 @@
+export type ApiKeyEntry = string | { key?: string; value?: string };
+
+export function getApiKeyValue(key: ApiKeyEntry) {
+  return typeof key === 'string' ? key : key.key || key.value || '';
+}