Add expandable notification details and diagnostics copy (#410)

- Default notification details to collapsed
- Add redacted diagnostics copy with troubleshooting tips
- Expose new notification detail settings in chat preferences

Author: BunsDev

apps/web/src/appSettings.test.ts

@@ -10,6 +10,13 @@ describe("AppSettingsSchema", () => {
     expect(settings.codeViewerAutosave).toBe(false);
   });
 
+  it("defaults notification detail toggles to false", () => {
+    const settings = Schema.decodeUnknownSync(AppSettingsSchema)({});
+
+    expect(settings.showNotificationDetails).toBe(false);
+    expect(settings.includeDiagnosticsTipsInCopy).toBe(false);
+  });
+
   it("preserves an explicit codeViewerAutosave setting", () => {
     const settings = Schema.decodeUnknownSync(AppSettingsSchema)({
       codeViewerAutosave: true,
@@ -18,6 +25,16 @@ describe("AppSettingsSchema", () => {
     expect(settings.codeViewerAutosave).toBe(true);
   });
 
+  it("preserves explicit notification detail settings", () => {
+    const settings = Schema.decodeUnknownSync(AppSettingsSchema)({
+      showNotificationDetails: true,
+      includeDiagnosticsTipsInCopy: true,
+    });
+
+    expect(settings.showNotificationDetails).toBe(true);
+    expect(settings.includeDiagnosticsTipsInCopy).toBe(true);
+  });
+
   it("defaults the PR request changes button tone to warning", () => {
     const settings = Schema.decodeUnknownSync(AppSettingsSchema)({});
 

apps/web/src/appSettings.ts

@@ -80,6 +80,8 @@ export const AppSettingsSchema = Schema.Struct({
   rebaseBeforeCommit: Schema.Boolean.pipe(withDefaults(() => false)),
   enableAssistantStreaming: Schema.Boolean.pipe(withDefaults(() => false)),
   showAuthFailuresAsErrors: Schema.Boolean.pipe(withDefaults(() => true)),
+  showNotificationDetails: Schema.Boolean.pipe(withDefaults(() => false)),
+  includeDiagnosticsTipsInCopy: Schema.Boolean.pipe(withDefaults(() => false)),
   locale: AppLocale.pipe(withDefaults(() => DEFAULT_APP_LOCALE)),
   openLinksExternally: Schema.Boolean.pipe(withDefaults(() => false)),
   sidebarProjectSortOrder: SidebarProjectSortOrder.pipe(

apps/web/src/components/ChatView.tsx

@@ -4859,6 +4859,8 @@ export default function ChatView({ threadId, onMinimize }: ChatViewProps) {
       <ErrorNotificationBar
         threadError={activeThread.error}
         showAuthFailuresAsErrors={settings.showAuthFailuresAsErrors}
+        showNotificationDetails={settings.showNotificationDetails}
+        includeDiagnosticsTipsInCopy={settings.includeDiagnosticsTipsInCopy}
         onDismissThreadError={() => setThreadError(activeThread.id, null)}
         providerStatus={activeProviderStatus}
         transportState={transportState}

apps/web/src/components/chat/ErrorNotificationBar.test.tsx

@@ -0,0 +1,88 @@
+import type { ServerProviderStatus } from "@okcode/contracts";
+import type { ComponentProps, ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ErrorNotificationBar } from "./ErrorNotificationBar";
+
+function makeProviderStatus(overrides: Partial<ServerProviderStatus> = {}): ServerProviderStatus {
+  return {
+    provider: "codex",
+    status: "warning",
+    available: true,
+    authStatus: "authenticated",
+    checkedAt: "2026-04-10T12:00:00.000Z",
+    message: "Provider is checking state.",
+    ...overrides,
+  };
+}
+
+const THREAD_ERROR =
+  "Git command failed in GitCore.createWorktree: OPENAI_API_KEY=sk-proj-secret (/repo) - Base branch 'main' does not resolve to a commit yet.";
+
+function renderBar(
+  overrides: Partial<ComponentProps<typeof ErrorNotificationBar>> = {},
+): ReactElement {
+  const { onDismissThreadError, transportState, ...restOverrides } = overrides;
+  return (
+    <ErrorNotificationBar
+      threadError={THREAD_ERROR}
+      showAuthFailuresAsErrors
+      showNotificationDetails={false}
+      includeDiagnosticsTipsInCopy={true}
+      providerStatus={makeProviderStatus()}
+      isMobileCompanion={false}
+      {...restOverrides}
+      {...(onDismissThreadError ? { onDismissThreadError } : {})}
+      {...(transportState ? { transportState } : {})}
+    />
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("ErrorNotificationBar", () => {
+  it("keeps raw error text out of the collapsed bar and shows the aggregate count", () => {
+    const markup = renderToStaticMarkup(renderBar());
+
+    expect(markup).toContain("Show 2 notifications");
+    expect(markup).not.toContain("OPENAI_API_KEY=sk-proj-secret");
+    expect(markup).not.toContain("Base branch 'main' does not resolve to a commit yet.");
+  });
+
+  it("expands to show redacted error text and diagnostics copy", async () => {
+    let renderer: ReactTestRenderer | null = null;
+    await act(async () => {
+      renderer = create(renderBar());
+    });
+
+    const root = renderer!.root;
+    const toggle = root.findByProps({ "aria-label": "Show 2 notifications" });
+
+    await act(async () => {
+      toggle.props.onClick();
+    });
+
+    expect(root.findByProps({ "aria-label": "Hide 2 notifications" })).toBeTruthy();
+    expect(root.findByProps({ "aria-label": "Copy diagnostics" })).toBeTruthy();
+    expect(JSON.stringify(renderer!.toJSON())).toContain("Worktree thread could not start");
+    expect(JSON.stringify(renderer!.toJSON())).toContain(
+      "Base branch 'main' does not resolve to a commit yet.",
+    );
+  });
+
+  it("starts expanded when notification details are enabled", () => {
+    const markup = renderToStaticMarkup(
+      renderBar({
+        showNotificationDetails: true,
+      }),
+    );
+
+    expect(markup).toContain("Hide 2 notifications");
+    expect(markup).toContain("Worktree thread could not start");
+    expect(markup).toContain("Base branch &#x27;main&#x27; does not resolve to a commit yet.");
+  });
+});