feat(web): add docsUrl for providers to install from

Author: KaviiSuri

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

@@ -2,6 +2,8 @@ import { type ServerProviderStatus } from "@t3tools/contracts";
 import { memo } from "react";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import { CircleAlertIcon } from "lucide-react";
+import { PROVIDER_OPTIONS } from "~/session-logic";
+import { ensureSentenceEnds } from "~/lib/utils";
 
 export const ProviderHealthBanner = memo(function ProviderHealthBanner({
   status,
@@ -17,6 +19,8 @@ export const ProviderHealthBanner = memo(function ProviderHealthBanner({
       ? `${status.provider} provider is unavailable.`
       : `${status.provider} provider has limited availability.`;
 
+  const opts = PROVIDER_OPTIONS.find((opt) => opt.value === status.provider);
+
   return (
     <div className="pt-3 mx-auto max-w-3xl">
       <Alert variant={status.status === "error" ? "error" : "warning"}>
@@ -25,7 +29,20 @@ export const ProviderHealthBanner = memo(function ProviderHealthBanner({
           {status.provider === "codex" ? "Codex provider status" : `${status.provider} status`}
         </AlertTitle>
         <AlertDescription className="line-clamp-3" title={status.message ?? defaultMessage}>
-          {status.message ?? defaultMessage}
+          {ensureSentenceEnds(status.message ?? defaultMessage)}
+          {opts?.docsUrl ? (
+            <>
+              {" "}
+              <a
+                className="underline underline-offset-4 text-foreground hover:text-primary"
+                href={opts.docsUrl}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Installation Guide
+              </a>
+            </>
+          ) : null}
         </AlertDescription>
       </Alert>
     </div>

apps/web/src/lib/utils.ts

@@ -30,3 +30,11 @@ export const newProjectId = (): ProjectId => ProjectId.makeUnsafe(randomUUID());
 export const newThreadId = (): ThreadId => ThreadId.makeUnsafe(randomUUID());
 
 export const newMessageId = (): MessageId => MessageId.makeUnsafe(randomUUID());
+
+export const ensureSentenceEnds = (value: string): string => {
+  const trimmed = value.trim();
+  if ([".", "!", "?"].includes(trimmed.at(-1) ?? "")) {
+    return trimmed;
+  }
+  return `${trimmed}.`;
+};

apps/web/src/session-logic.ts

@@ -24,10 +24,26 @@ export const PROVIDER_OPTIONS: Array<{
   value: ProviderPickerKind;
   label: string;
   available: boolean;
+  docsUrl: string | null;
 }> = [
-  { value: "codex", label: "Codex", available: true },
-  { value: "claudeCode", label: "Claude Code", available: false },
-  { value: "cursor", label: "Cursor", available: false },
+  {
+    value: "codex",
+    label: "Codex",
+    available: true,
+    docsUrl: "https://developers.openai.com/codex/cli/#cli-setup",
+  },
+  {
+    value: "claudeCode",
+    label: "Claude Code",
+    available: false,
+    docsUrl: "https://code.claude.com/docs/en/quickstart#step-1-install-claude-code",
+  },
+  {
+    value: "cursor",
+    label: "Cursor",
+    available: false,
+    docsUrl: "https://cursor.com/docs/cli/installation#installation",
+  },
 ];
 
 export interface WorkLogEntry {