UI

Author: itsmeakhil

apps/desktop-ui/src/components/api-client/collections/use-collections.ts

@@ -8,29 +8,16 @@ import { useAuthState } from "react-firebase-hooks/auth"
 import { backendFetch } from "@/lib/backend-auth"
 import { broadcastApiClientUpdate, useApiClientSyncListener } from "@/lib/api-client-sync"
 import { isDesktop } from "@/lib/desktop/is-desktop"
-import { diffFiles, newManifest, parseCollection, serializeCollection, MANIFEST_FILE } from "@/lib/api-client/file-store"
+import { countLiteralAuthSecrets, diffFiles, newManifest, parseCollection, serializeCollection, MANIFEST_FILE } from "@/lib/api-client/file-store"
+import { moveCollectionSecretsToVault } from "@/lib/api-client/move-to-vault"
+import { useCipherKey } from "@/lib/use-cipher-key"
 
 const STORAGE_KEY = "api-client-collections"
-/** Registered folder-collection paths (desktop only — paths are machine-local). */
-const FILE_REGISTRY_KEY = "api-client-file-collections"
 
 function sortCollections(cols: Collection[]) {
     return [...cols].sort((a, b) => a.name.localeCompare(b.name))
 }
 
-function readFileRegistry(): string[] {
-    try {
-        const parsed = JSON.parse(localStorage.getItem(FILE_REGISTRY_KEY) ?? "[]")
-        return Array.isArray(parsed) ? parsed.filter((p): p is string => typeof p === "string") : []
-    } catch {
-        return []
-    }
-}
-
-function writeFileRegistry(paths: string[]) {
-    localStorage.setItem(FILE_REGISTRY_KEY, JSON.stringify(paths))
-}
-
 /** Carry UI-only open/closed state (stripped from disk) across reloads, by folder id. */
 function applyOpenState(prev: Collection | undefined, next: Collection): Collection {
     if (!prev) return next
@@ -61,6 +48,12 @@ export function useCollections() {
     const migrationRanRef = React.useRef(false)
     /** Paths already toasted about, so a failing folder doesn't re-toast on every window focus. */
     const failedFilePathsRef = React.useRef(new Set<string>())
+    /** Collections already warned about literal credentials — once per session is enough. */
+    const secretWarnedRef = React.useRef(new Set<string>())
+    const cipherKey = useCipherKey()
+    // Latest file collections for toast-action callbacks (they outlive the closing render).
+    const fileCollectionsRef = React.useRef(fileCollections)
+    fileCollectionsRef.current = fileCollections
 
     // DB collections + folder-backed collections, one list for consumers.
     const allCollections = React.useMemo(
@@ -71,12 +64,14 @@ export function useCollections() {
     /** (Re-)read every registered folder collection from disk. Desktop only. */
     const reloadFileCollections = React.useCallback(async () => {
         if (!isDesktop()) return
-        const paths = readFileRegistry()
+        const { readCollectionFiles, allowCollectionDir, loadCollectionRegistry } = await import(
+            "@/lib/desktop/collection-files"
+        )
+        const paths = await loadCollectionRegistry()
         if (paths.length === 0) {
             setFileCollections((cur) => (cur.length === 0 ? cur : []))
             return
         }
-        const { readCollectionFiles, allowCollectionDir } = await import("@/lib/desktop/collection-files")
         const loaded: Collection[] = []
         for (const path of paths) {
             try {
@@ -121,6 +116,22 @@ export function useCollections() {
     ): Promise<boolean> => {
         const next = { ...target, ...patch, items: nextItems }
         setFileCollections((cur) => cur.map((c) => (c.id === target.id ? next : c)))
+        // Literal credentials are redacted by the serializer (never written to git-able
+        // files) — tell the user once so a "missing" token isn't a mystery, and offer
+        // to move them into the encrypted vault (rewrites fields to {{vault.*}} tokens).
+        if (!secretWarnedRef.current.has(target.id) && countLiteralAuthSecrets(next) > 0) {
+            secretWarnedRef.current.add(target.id)
+            toast.warning(
+                "Credentials typed directly are not saved into collection files — keep them in the encrypted vault as {{vault.NAME}} tokens",
+                {
+                    duration: 10000,
+                    action: {
+                        label: "Move to vault",
+                        onClick: () => void moveFileCollectionSecrets(target.id),
+                    },
+                }
+            )
+        }
         try {
             const { writes, deletes } = diffFiles(serializeCollection(target), serializeCollection(next))
             if (writes.length > 0 || deletes.length > 0) {
@@ -136,6 +147,26 @@ export function useCollections() {
         }
     }
 
+    /** Toast action: move every literal credential in a folder collection into the vault. */
+    const moveFileCollectionSecrets = async (collectionId: string) => {
+        const target = fileCollectionsRef.current.find((c) => c.id === collectionId)
+        if (!target) return
+        try {
+            const { collection: moved, moved: count } = await moveCollectionSecretsToVault(target, cipherKey)
+            if (count === 0) return
+            if (await mutateFileCollection(target, moved.items)) {
+                toast.success(
+                    count === 1
+                        ? "1 credential moved to the vault"
+                        : `${count} credentials moved to the vault`
+                )
+            }
+        } catch (e) {
+            console.error("Error moving credentials to vault", e)
+            toast.error(e instanceof Error ? e.message : "Failed to move credentials to the vault")
+        }
+    }
+
     React.useEffect(() => {
         if (!user) migrationRanRef.current = false
     }, [user])
@@ -325,7 +356,8 @@ export function useCollections() {
         // Deleting a folder collection = forget it, never touch the user's files.
         const fileCol = fileCollections.find((c) => c.id === itemId)
         if (fileCol?.source) {
-            writeFileRegistry(readFileRegistry().filter((p) => p !== fileCol.source!.path))
+            const { loadCollectionRegistry, saveCollectionRegistry } = await import("@/lib/desktop/collection-files")
+            await saveCollectionRegistry((await loadCollectionRegistry()).filter((p) => p !== fileCol.source!.path))
             setFileCollections((cur) => cur.filter((c) => c.id !== itemId))
             toast.success("Folder collection removed from list (files kept)")
             return
@@ -705,7 +737,8 @@ export function useCollections() {
             const removedPaths = new Set(
                 fileCollections.filter((c) => fileIds.has(c.id)).map((c) => c.source!.path)
             )
-            writeFileRegistry(readFileRegistry().filter((p) => !removedPaths.has(p)))
+            const { loadCollectionRegistry, saveCollectionRegistry } = await import("@/lib/desktop/collection-files")
+            await saveCollectionRegistry((await loadCollectionRegistry()).filter((p) => !removedPaths.has(p)))
             setFileCollections((cur) => cur.filter((c) => !fileIds.has(c.id)))
             ids = ids.filter((id) => !fileIds.has(id))
             if (ids.length === 0) {
@@ -781,13 +814,12 @@ export function useCollections() {
     const openFolderCollection = async (): Promise<Collection | null> => {
         if (!isDesktop()) return null
         try {
-            const { pickFolder, readCollectionFiles, writeCollectionFiles } = await import(
-                "@/lib/desktop/collection-files"
-            )
+            const { pickFolder, readCollectionFiles, writeCollectionFiles, loadCollectionRegistry, saveCollectionRegistry } =
+                await import("@/lib/desktop/collection-files")
             const path = await pickFolder()
             if (!path) return null
 
-            const registry = readFileRegistry()
+            const registry = await loadCollectionRegistry()
             if (registry.includes(path)) {
                 toast.info("This folder collection is already open")
                 return fileCollections.find((c) => c.source?.path === path) ?? null
@@ -806,7 +838,7 @@ export function useCollections() {
                 col = { id: manifest.id, name, items: [], source: { kind: "file", path } }
             }
 
-            writeFileRegistry([...registry, path])
+            await saveCollectionRegistry([...registry, path])
             setFileCollections((cur) => [...cur.filter((c) => c.id !== col.id), col])
             toast.success(`Opened folder collection "${col.name}"`)
             return col

apps/desktop-ui/src/lib/api-client/__tests__/file-store.test.ts

@@ -1,4 +1,5 @@
 import {
+    countLiteralAuthSecrets,
     diffFiles,
     parseCollection,
     serializeCollection,
@@ -86,6 +87,81 @@ describe("file-store", () => {
         expect(all).toContain("{{vault.apiToken}}")
     })
 
+    test("literal credentials are redacted; vault tokens and non-secret fields survive", () => {
+        const col: Collection = {
+            id: "c",
+            name: "c",
+            items: [
+                request({
+                    id: "r1",
+                    name: "AWS",
+                    auth: {
+                        type: "aws-sigv4",
+                        awsSigV4: {
+                            accessKeyId: "AKIA123",
+                            secretAccessKey: "SUPER-SECRET-LITERAL",
+                            region: "us-east-1",
+                            service: "s3",
+                        },
+                    },
+                }),
+                request({
+                    id: "r2",
+                    name: "Bearer literal",
+                    auth: { type: "bearer", token: "eyJhbGciOi-literal-jwt" },
+                }),
+                request({
+                    id: "r3",
+                    name: "Bearer vaulted",
+                    auth: { type: "bearer", token: "{{vault.apiToken}}" },
+                }),
+                request({
+                    id: "r4",
+                    name: "OAuth",
+                    auth: {
+                        type: "oauth2",
+                        oauth2: {
+                            grantType: "client_credentials",
+                            tokenUrl: "https://idp/token",
+                            clientId: "public-client-id",
+                            clientSecret: "literal-client-secret",
+                            accessToken: "cached-access-token",
+                        },
+                    },
+                }),
+            ],
+        }
+        const all = serializeCollection(col).map((f) => f.content).join("\n")
+        expect(all).not.toContain("SUPER-SECRET-LITERAL")
+        expect(all).not.toContain("eyJhbGciOi-literal-jwt")
+        expect(all).not.toContain("literal-client-secret")
+        expect(all).not.toContain("cached-access-token")
+        expect(all).toContain("AKIA123") // access key id is not the secret half
+        expect(all).toContain("public-client-id")
+        expect(all).toContain("{{vault.apiToken}}")
+        expect(countLiteralAuthSecrets(col)).toBe(3)
+    })
+
+    test("folder defaultAuth is redacted too", () => {
+        const col: Collection = {
+            id: "c",
+            name: "c",
+            items: [
+                {
+                    id: "f",
+                    name: "F",
+                    type: "folder",
+                    items: [],
+                    defaultAuth: { type: "basic", username: "bob", password: "hunter2" },
+                },
+            ],
+        }
+        const all = serializeCollection(col).map((f) => f.content).join("\n")
+        expect(all).not.toContain("hunter2")
+        expect(all).toContain("bob")
+        expect(countLiteralAuthSecrets(col)).toBe(1)
+    })
+
     test("isOpen and KeyValueItem ids never reach disk", () => {
         const all = serializeCollection(collection()).map((f) => f.content).join("\n")
         expect(all).not.toContain("isOpen")

apps/desktop-ui/src/lib/api-client/__tests__/move-to-vault.test.ts

@@ -0,0 +1,95 @@
+import { planVaultMoves } from "../move-to-vault"
+import type { Collection, CollectionFolder, CollectionRequest } from "@/components/api-client/types"
+
+const request = (over: Partial<CollectionRequest>): CollectionRequest => ({
+    id: "r",
+    name: "Req",
+    method: "GET",
+    url: "https://x",
+    params: [],
+    headers: [],
+    body: { type: "none", content: "" },
+    auth: { type: "none" },
+    ...over,
+})
+
+describe("planVaultMoves", () => {
+    test("rewrites literals to {{vault.*}} tokens and plans creates", () => {
+        const col: Collection = {
+            id: "c",
+            name: "c",
+            items: [
+                request({ id: "r1", name: "Login", auth: { type: "bearer", token: "literal-abc" } }),
+            ],
+        }
+        const plan = planVaultMoves(col, new Map())
+        expect(plan.moved).toBe(1)
+        expect(plan.creates).toEqual([{ name: "login-token", value: "literal-abc" }])
+        expect((plan.collection.items[0] as CollectionRequest).auth.token).toBe("{{vault.login-token}}")
+        // original untouched
+        expect((col.items[0] as CollectionRequest).auth.token).toBe("literal-abc")
+    })
+
+    test("reuses an existing vault entry holding the same value", () => {
+        const col: Collection = {
+            id: "c",
+            name: "c",
+            items: [request({ id: "r1", name: "Login", auth: { type: "bearer", token: "shared-secret" } })],
+        }
+        const plan = planVaultMoves(col, new Map([["prod-api-key", "shared-secret"]]))
+        expect(plan.creates).toEqual([])
+        expect(plan.moved).toBe(1)
+        expect((plan.collection.items[0] as CollectionRequest).auth.token).toBe("{{vault.prod-api-key}}")
+    })
+
+    test("suffixes when the name is taken by a different value; dedupes same value across requests", () => {
+        const col: Collection = {
+            id: "c",
+            name: "c",
+            items: [
+                request({ id: "r1", name: "Login", auth: { type: "bearer", token: "new-secret" } }),
+                request({ id: "r2", name: "Login", auth: { type: "bearer", token: "new-secret" } }),
+            ],
+        }
+        const plan = planVaultMoves(col, new Map([["login-token", "different-value"]]))
+        expect(plan.creates).toEqual([{ name: "login-token-2", value: "new-secret" }])
+        expect(plan.moved).toBe(2)
+        const tokens = plan.collection.items.map((i) => (i as CollectionRequest).auth.token)
+        expect(tokens).toEqual(["{{vault.login-token-2}}", "{{vault.login-token-2}}"])
+    })
+
+    test("covers folder defaultAuth and nested fields; leaves tokens alone", () => {
+        const folder: CollectionFolder = {
+            id: "f",
+            name: "AWS stuff",
+            type: "folder",
+            items: [
+                request({
+                    id: "r1",
+                    name: "S3",
+                    auth: {
+                        type: "aws-sigv4",
+                        awsSigV4: {
+                            accessKeyId: "AKIA1",
+                            secretAccessKey: "aws-literal",
+                            region: "us-east-1",
+                            service: "s3",
+                        },
+                    },
+                }),
+                request({ id: "r2", name: "Vaulted", auth: { type: "bearer", token: "{{vault.ok}}" } }),
+            ],
+            defaultAuth: { type: "basic", username: "bob", password: "hunter2" },
+        }
+        const col: Collection = { id: "c", name: "c", items: [folder] }
+        const plan = planVaultMoves(col, new Map())
+        expect(plan.creates.map((c) => c.name).sort()).toEqual(["aws-stuff-password", "s3-secretaccesskey"])
+        expect(plan.moved).toBe(2)
+        const outFolder = plan.collection.items[0] as CollectionFolder
+        expect(outFolder.defaultAuth?.password).toBe("{{vault.aws-stuff-password}}")
+        const s3 = outFolder.items[0] as CollectionRequest
+        expect(s3.auth.awsSigV4?.secretAccessKey).toBe("{{vault.s3-secretaccesskey}}")
+        expect(s3.auth.awsSigV4?.accessKeyId).toBe("AKIA1")
+        expect((outFolder.items[1] as CollectionRequest).auth.token).toBe("{{vault.ok}}")
+    })
+})