fix(web): let empty-provider composer open settings

apps/web/src/components/chat/ChatComposer.tsx

@@ -117,6 +117,7 @@ import { ComposerPendingApprovalPanel } from "./ComposerPendingApprovalPanel";
 import { ComposerPendingUserInputPanel } from "./ComposerPendingUserInputPanel";
 import { ComposerPlanFollowUpBanner } from "./ComposerPlanFollowUpBanner";
 import { ComposerControl, ComposerControlIcon, ComposerSelectControl } from "./ComposerControl";
+import { ComposerNoProviderControl } from "./ComposerNoProviderControl";
 import { resolveComposerMenuActiveItemId } from "./composerMenuHighlight";
 import { searchSlashCommandItems } from "./composerSlashCommandSearch";
 import {
@@ -3474,17 +3475,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
               >
                 <div className="-m-1 -ms-3.5 flex min-w-0 flex-1 items-center gap-1 overflow-x-auto p-1 ps-3.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                   {noProviderAvailable ? (
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="ghost"
-                      disabled
-                      data-chat-provider-unavailable="true"
-                      className="shrink-0 gap-2 px-2 text-secondary-label sm:px-3"
-                    >
-                      <CircleAlertIcon className="size-4" />
-                      No provider available
-                    </Button>
+                    <ComposerNoProviderControl />
                   ) : (
                     <ProviderModelPicker
                       compact={isComposerFooterCompact}

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

@@ -0,0 +1,23 @@
+import { createElement, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({ to, children, ...props }: { to: string; children?: ReactNode }) =>
+    createElement("a", { href: to, ...props }, children),
+}));
+
+import { ComposerNoProviderControl } from "./ComposerNoProviderControl";
+
+describe("ComposerNoProviderControl", () => {
+  it("links the empty-provider chip to provider settings", () => {
+    const markup = renderToStaticMarkup(<ComposerNoProviderControl />);
+
+    expect(markup).toContain('href="/settings/providers"');
+    expect(markup).toContain("No provider available");
+    expect(markup).toContain('data-chat-provider-unavailable="true"');
+    expect(markup).toContain("Open provider settings");
+    expect(markup).not.toContain('disabled=""');
+    expect(markup).not.toContain("aria-disabled");
+  });
+});

apps/web/src/components/chat/ComposerNoProviderControl.tsx

@@ -0,0 +1,24 @@
+import { Link } from "@tanstack/react-router";
+import { CircleAlertIcon } from "lucide-react";
+
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { ComposerControl, ComposerControlIcon } from "./ComposerControl";
+
+export function ComposerNoProviderControl() {
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<span className="flex shrink-0" />}>
+        <ComposerControl
+          render={<Link to="/settings/providers" />}
+          aria-label="Open provider settings"
+          className="-ms-2.5"
+          data-chat-provider-unavailable="true"
+        >
+          <ComposerControlIcon icon={CircleAlertIcon} />
+          No provider available
+        </ComposerControl>
+      </TooltipTrigger>
+      <TooltipPopup>Open provider settings</TooltipPopup>
+    </Tooltip>
+  );
+}