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

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

@@ -2,6 +2,8 @@ import { PROVIDER_DISPLAY_NAMES, type ServerProvider } 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 ProviderStatusBanner = memo(function ProviderStatusBanner({
   status,
@@ -19,13 +21,28 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
       : `${providerLabel} provider has limited availability.`;
   const title = `${providerLabel} provider status`;
 
+  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"}>
         <CircleAlertIcon />
         <AlertTitle>{title}</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

@@ -34,3 +34,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

@@ -26,10 +26,26 @@ export const PROVIDER_OPTIONS: Array<{
   value: ProviderPickerKind;
   label: string;
   available: boolean;
+  docsUrl: string;
 }> = [
-  { value: "codex", label: "Codex", available: true },
-  { value: "claudeAgent", label: "Claude", available: true },
-  { value: "cursor", label: "Cursor", available: false },
+  {
+    value: "codex",
+    label: "Codex",
+    available: true,
+    docsUrl: "https://developers.openai.com/codex/cli/#cli-setup",
+  },
+  {
+    value: "claudeAgent",
+    label: "Claude",
+    available: true,
+    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 {