fix(api,web): add workspace context to widgets and auto-detect workspace ID (#532)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(authenticated)/settings/credentials/audit/page.tsx

@@ -14,6 +14,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { fetchCredentialAuditLog, type AuditLogEntry } from "@/lib/api/credentials";
+import { useWorkspaceId } from "@/lib/hooks";
 
 const ACTIVITY_ACTIONS = [
   { value: "CREDENTIAL_CREATED", label: "Created" },
@@ -39,17 +40,17 @@ export default function CredentialAuditPage(): React.ReactElement {
   const [filters, setFilters] = useState<FilterState>({});
   const [hasFilters, setHasFilters] = useState(false);
 
-  // TODO: Get workspace ID from context/auth
-  const workspaceId = "default-workspace-id"; // Placeholder
+  const workspaceId = useWorkspaceId();
 
   useEffect(() => {
-    void loadLogs();
-  }, [page, filters]);
+    if (!workspaceId) return;
+    void loadLogs(workspaceId);
+  }, [workspaceId, page, filters]);
 
-  async function loadLogs(): Promise<void> {
+  async function loadLogs(wsId: string): Promise<void> {
     try {
       setIsLoading(true);
-      const response = await fetchCredentialAuditLog(workspaceId, {
+      const response = await fetchCredentialAuditLog(wsId, {
         ...filters,
         page,
         limit,

apps/web/src/app/(authenticated)/settings/credentials/page.tsx

@@ -6,22 +6,24 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { fetchCredentials, type Credential } from "@/lib/api/credentials";
+import { useWorkspaceId } from "@/lib/hooks";
 
 export default function CredentialsPage(): React.ReactElement {
   const [credentials, setCredentials] = useState<Credential[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const workspaceId = "default-workspace-id";
+  const workspaceId = useWorkspaceId();
 
   useEffect(() => {
-    void loadCredentials();
-  }, []);
+    if (!workspaceId) return;
+    void loadCredentials(workspaceId);
+  }, [workspaceId]);
 
-  async function loadCredentials(): Promise<void> {
+  async function loadCredentials(wsId: string): Promise<void> {
     try {
       setIsLoading(true);
-      const response = await fetchCredentials(workspaceId);
+      const response = await fetchCredentials(wsId);
       setCredentials(response.data);
       setError(null);
     } catch (err) {

apps/web/src/lib/api/client.ts

@@ -202,9 +202,13 @@ export async function apiRequest<T>(endpoint: string, options: ApiRequestOptions
       ...baseHeaders,
     };
 
-    // Add workspace ID header if provided (recommended over query string)
-    if (workspaceId) {
-      headers["X-Workspace-Id"] = workspaceId;
+    // Add workspace ID header — use explicit value, or auto-detect from localStorage
+    const resolvedWorkspaceId =
+      workspaceId ??
+      (typeof window !== "undefined" ? localStorage.getItem("mosaic-workspace-id") : null) ??
+      undefined;
+    if (resolvedWorkspaceId) {
+      headers["X-Workspace-Id"] = resolvedWorkspaceId;
     }
 
     // Add CSRF token for state-changing requests (POST, PUT, PATCH, DELETE)