@cryptiklemur/lattice 1.3.0 → 1.4.0

package/client/src/components/chat/PromptQuestion.tsx

@@ -0,0 +1,271 @@
+import { useState, useRef, useEffect } from "react";
+import { Check, Circle, CheckCircle2, MessageCircleQuestion, ChevronDown, Send } from "lucide-react";
+import type { HistoryMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { resolvePromptQuestion } from "../../stores/session";
+
+interface PromptQuestionProps {
+  message: HistoryMessage;
+}
+
+var LETTERS = ["A", "B", "C", "D"];
+
+export function PromptQuestion(props: PromptQuestionProps) {
+  var msg = props.message;
+  var { send } = useWebSocket();
+  var [otherText, setOtherText] = useState("");
+  var [selectedMulti, setSelectedMulti] = useState<Set<string>>(new Set());
+  var [focusIndex, setFocusIndex] = useState(-1);
+  var [expanded, setExpanded] = useState(false);
+  var optionsRef = useRef<HTMLDivElement>(null);
+
+  var questions = msg.promptQuestions || [];
+  var answers = msg.promptAnswers;
+  var status = msg.promptStatus || "pending";
+  var requestId = msg.toolId || "";
+
+  useEffect(function () {
+    if (status === "pending" && optionsRef.current) {
+      var firstBtn = optionsRef.current.querySelector("button");
+      if (firstBtn) firstBtn.focus();
+    }
+  }, [status]);
+
+  function submitAnswer(questionText: string, answer: string) {
+    var answerMap: Record<string, string> = {};
+    answerMap[questionText] = answer;
+    resolvePromptQuestion(requestId, answerMap);
+    send({
+      type: "chat:prompt_response",
+      requestId: requestId,
+      answers: answerMap,
+    });
+  }
+
+  function submitMultiSelect(questionText: string) {
+    var parts = Array.from(selectedMulti);
+    if (otherText.trim()) parts.push(otherText.trim());
+    submitAnswer(questionText, parts.join(", "));
+  }
+
+  function submitOther(questionText: string) {
+    if (!otherText.trim()) return;
+    submitAnswer(questionText, otherText.trim());
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent, optionCount: number, q: { question: string; multiSelect: boolean }, options: Array<{ label: string }>) {
+    if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+      e.preventDefault();
+      var next = focusIndex < optionCount - 1 ? focusIndex + 1 : 0;
+      setFocusIndex(next);
+      var btns = optionsRef.current?.querySelectorAll("[data-option]");
+      if (btns && btns[next]) (btns[next] as HTMLElement).focus();
+    }
+    if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      var prev = focusIndex > 0 ? focusIndex - 1 : optionCount - 1;
+      setFocusIndex(prev);
+      var btns = optionsRef.current?.querySelectorAll("[data-option]");
+      if (btns && btns[prev]) (btns[prev] as HTMLElement).focus();
+    }
+    if (e.key === "Enter" && !q.multiSelect && focusIndex >= 0 && focusIndex < options.length) {
+      e.preventDefault();
+      submitAnswer(q.question, options[focusIndex].label);
+    }
+  }
+
+  if (status === "answered" && answers) {
+    var firstAnswer = Object.entries(answers)[0];
+    var answeredQuestion = questions.length > 0 ? questions[0] : null;
+    return (
+      <div className="px-5 py-1.5" aria-live="polite">
+        <div
+          className="rounded-xl border border-success/15 bg-base-300/40 overflow-hidden cursor-pointer transition-colors hover:bg-base-300/60"
+          onClick={function () { setExpanded(!expanded); }}
+        >
+          <div className="flex items-center gap-2.5 px-4 py-2.5">
+            <CheckCircle2 size={15} className="text-success/60 flex-shrink-0" />
+            {answeredQuestion && (
+              <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/30">{answeredQuestion.header}</span>
+            )}
+            <span className="text-[12px] text-base-content/50">{firstAnswer ? firstAnswer[0] : ""}</span>
+            <span className="flex-1" />
+            <span className="text-[12px] font-medium text-base-content/70">{firstAnswer ? firstAnswer[1] : ""}</span>
+            <ChevronDown
+              size={12}
+              className={"text-base-content/25 transition-transform duration-200 " + (expanded ? "rotate-180" : "")}
+            />
+          </div>
+
+          {expanded && answeredQuestion && (
+            <div className="px-4 pb-3 border-t border-base-content/5">
+              <div className="flex flex-col gap-1 pt-2">
+                {answeredQuestion.options.map(function (opt, oi) {
+                  var isChosen = firstAnswer && firstAnswer[1] === opt.label;
+                  return (
+                    <div
+                      key={oi}
+                      className={
+                        "flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-[12px] " +
+                        (isChosen ? "bg-success/8 text-base-content/70" : "text-base-content/30")
+                      }
+                    >
+                      <span className={
+                        "w-5 h-5 rounded-md flex items-center justify-center text-[10px] font-mono font-bold flex-shrink-0 " +
+                        (isChosen ? "bg-success/20 text-success/80" : "bg-base-content/5 text-base-content/20")
+                      }>
+                        {LETTERS[oi] || ""}
+                      </span>
+                      <span className={isChosen ? "font-medium" : ""}>{opt.label}</span>
+                      {isChosen && <Check size={12} className="text-success/60 ml-auto" />}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "timed_out") {
+    return (
+      <div className="px-5 py-1.5">
+        <div className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-warning/5 border border-warning/15 text-[12px] text-warning/50 font-mono">
+          <Circle size={13} className="flex-shrink-0" />
+          Prompt timed out — no response sent
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-5 py-2" aria-live="polite">
+      {questions.map(function (q, qi) {
+        return (
+          <div
+            key={qi}
+            className="rounded-xl border border-primary/15 bg-base-300/50 overflow-hidden shadow-[0_2px_8px_oklch(from_var(--color-primary)_l_c_h/0.06)]"
+          >
+            <div className="flex items-center gap-2.5 px-4 py-2.5 border-b border-base-content/5 bg-base-content/[0.02]">
+              <MessageCircleQuestion size={14} className="text-primary/40 flex-shrink-0" />
+              <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-primary/35">{q.header}</span>
+              <span className="flex-1" />
+              <span className="text-[9px] font-mono text-base-content/20">select one</span>
+            </div>
+
+            <div className="px-4 py-3.5">
+              <div className="text-[13px] text-base-content/80 mb-3.5 leading-relaxed">{q.question}</div>
+
+              <div
+                ref={optionsRef}
+                className="flex flex-col gap-1.5"
+                role={q.multiSelect ? "group" : "radiogroup"}
+                aria-label={q.question}
+                onKeyDown={function (e) { handleKeyDown(e, q.options.length, q, q.options); }}
+              >
+                {q.options.map(function (opt, oi) {
+                  var isSelected = selectedMulti.has(opt.label);
+                  var isFocused = focusIndex === oi;
+                  return (
+                    <button
+                      key={oi}
+                      data-option={oi}
+                      role={q.multiSelect ? "checkbox" : "radio"}
+                      aria-checked={isSelected}
+                      tabIndex={q.multiSelect ? 0 : (isFocused || (focusIndex === -1 && oi === 0) ? 0 : -1)}
+                      onFocus={function () { setFocusIndex(oi); }}
+                      onClick={function () {
+                        if (q.multiSelect) {
+                          setSelectedMulti(function (prev) {
+                            var next = new Set(prev);
+                            if (next.has(opt.label)) {
+                              next.delete(opt.label);
+                            } else {
+                              next.add(opt.label);
+                            }
+                            return next;
+                          });
+                        } else {
+                          submitAnswer(q.question, opt.label);
+                        }
+                      }}
+                      className={
+                        "group text-left flex items-start gap-3 px-3.5 py-2.5 rounded-lg text-[12px] cursor-pointer transition-all duration-150 outline-none " +
+                        (isSelected
+                          ? "bg-primary/10 border border-primary/25 text-base-content/85 shadow-[0_0_0_1px_oklch(from_var(--color-primary)_l_c_h/0.1)]"
+                          : "bg-base-content/[0.02] border border-base-content/8 text-base-content/60 hover:bg-base-content/5 hover:border-base-content/15 hover:text-base-content/75") +
+                        " focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-1 focus-visible:ring-offset-base-300"
+                      }
+                    >
+                      <span className={
+                        "w-5 h-5 rounded-md flex items-center justify-center text-[10px] font-mono font-bold flex-shrink-0 mt-px transition-colors duration-150 " +
+                        (isSelected
+                          ? "bg-primary/25 text-primary"
+                          : "bg-base-content/6 text-base-content/30 group-hover:bg-base-content/10 group-hover:text-base-content/45")
+                      }>
+                        {q.multiSelect
+                          ? (isSelected ? <Check size={11} /> : LETTERS[oi] || "")
+                          : LETTERS[oi] || ""
+                        }
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="font-medium leading-snug">{opt.label}</div>
+                        {opt.description && (
+                          <div className="text-[11px] text-base-content/35 mt-0.5 leading-relaxed group-hover:text-base-content/45 transition-colors duration-150">{opt.description}</div>
+                        )}
+                      </div>
+                    </button>
+                  );
+                })}
+
+                <div className="flex items-center gap-2 mt-1.5 pt-1.5 border-t border-base-content/5">
+                  <input
+                    type="text"
+                    placeholder="Other..."
+                    value={otherText}
+                    onChange={function (e) { setOtherText(e.target.value); }}
+                    onKeyDown={function (e) {
+                      if (e.key === "Enter" && !q.multiSelect) {
+                        submitOther(q.question);
+                      }
+                    }}
+                    aria-label="Custom answer"
+                    className="flex-1 bg-base-content/[0.02] border border-base-content/8 rounded-lg px-3 py-2 text-[12px] text-base-content/60 placeholder:text-base-content/20 outline-none focus:border-primary/30 focus:bg-base-content/[0.04] transition-colors duration-150"
+                  />
+                  {!q.multiSelect && otherText.trim() && (
+                    <button
+                      onClick={function () { submitOther(q.question); }}
+                      className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary/15 text-primary text-[11px] font-medium hover:bg-primary/25 transition-colors duration-150 cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/40"
+                      aria-label="Submit custom answer"
+                    >
+                      <Send size={10} />
+                      Send
+                    </button>
+                  )}
+                </div>
+
+                {q.multiSelect && (
+                  <button
+                    onClick={function () { submitMultiSelect(q.question); }}
+                    disabled={selectedMulti.size === 0 && !otherText.trim()}
+                    className={
+                      "mt-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-[12px] font-medium transition-all duration-150 cursor-pointer " +
+                      (selectedMulti.size > 0 || otherText.trim()
+                        ? "bg-primary text-primary-content hover:bg-primary/85 shadow-sm focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-base-300"
+                        : "bg-base-content/5 text-base-content/20 cursor-not-allowed")
+                    }
+                  >
+                    <Send size={12} />
+                    Submit ({selectedMulti.size} selected)
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/client/src/components/chat/TodoCard.tsx

@@ -0,0 +1,57 @@
+import { Circle, CircleDot, CheckCircle2, ListTodo } from "lucide-react";
+import type { HistoryMessage } from "@lattice/shared";
+
+interface TodoCardProps {
+  message: HistoryMessage;
+}
+
+function StatusIcon(props: { status: string }) {
+  if (props.status === "completed") {
+    return <CheckCircle2 size={13} className="text-success/70 flex-shrink-0" />;
+  }
+  if (props.status === "in_progress") {
+    return <CircleDot size={13} className="text-primary/70 flex-shrink-0 animate-pulse" />;
+  }
+  return <Circle size={13} className="text-base-content/25 flex-shrink-0" />;
+}
+
+export function TodoCard(props: TodoCardProps) {
+  var todos = props.message.todos || [];
+  if (todos.length === 0) return null;
+
+  var completed = todos.filter(function (t) { return t.status === "completed"; }).length;
+  var total = todos.length;
+
+  return (
+    <div className="px-5 py-2">
+      <div className="rounded-xl border border-base-content/8 bg-base-300/60 overflow-hidden shadow-sm">
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-base-content/6 bg-base-content/3">
+          <ListTodo size={14} className="text-base-content/40 flex-shrink-0" />
+          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Tasks</span>
+          <span className="text-[10px] font-mono text-base-content/25">{completed}/{total}</span>
+        </div>
+
+        <div className="px-3 py-2">
+          {todos.map(function (todo) {
+            return (
+              <div
+                key={todo.id}
+                className={
+                  "flex items-start gap-2 px-2 py-1.5 rounded-md text-[12px] " +
+                  (todo.status === "completed" ? "text-base-content/35" : "text-base-content/65")
+                }
+              >
+                <div className="mt-0.5">
+                  <StatusIcon status={todo.status} />
+                </div>
+                <span className={todo.status === "completed" ? "line-through" : ""}>
+                  {todo.content}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/chat/ToolResultRenderer.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Columns2, AlignLeft, FileText, Image } from "lucide-react";
 
 interface ToolResultRendererProps {
@@ -324,7 +325,7 @@ export function ToolResultRenderer(props: ToolResultRendererProps) {
       <div className="px-2.5 py-2">
         <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold mb-0.5">Result</div>
         <div className="prose prose-sm max-w-none text-[11px] [&_table]:text-[11px] [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_th]:text-base-content/60 [&_td]:text-base-content/45 [&_table]:border-base-content/10 [&_th]:border-base-content/10 [&_td]:border-base-content/10 [&_th]:bg-base-100/50">
-          <Markdown>{result}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm]}>{result}</Markdown>
         </div>
       </div>
     );

package/client/src/components/chat/VoiceRecorder.tsx

@@ -0,0 +1,85 @@
+import { Mic } from "lucide-react";
+
+interface VoiceRecorderProps {
+  isRecording: boolean;
+  isSupported: boolean;
+  isSpeaking: boolean;
+  elapsed: number;
+  interimTranscript: string;
+  onStart: () => void;
+  onStop: () => void;
+  onCancel: () => void;
+}
+
+function formatTime(seconds: number): string {
+  var m = Math.floor(seconds / 60);
+  var s = seconds % 60;
+  return m + ":" + (s < 10 ? "0" : "") + s;
+}
+
+export function VoiceRecorder(props: VoiceRecorderProps) {
+  if (!props.isRecording) {
+    return (
+      <button
+        aria-label={props.isSupported ? "Start voice input" : "Voice input not supported"}
+        disabled={!props.isSupported}
+        onClick={props.onStart}
+        className={
+          "w-7 h-7 rounded-md flex items-center justify-center transition-colors flex-shrink-0 " +
+          (props.isSupported
+            ? "text-base-content/30 hover:text-base-content/50 border border-base-content/10 hover:border-base-content/20"
+            : "text-base-content/15 cursor-not-allowed")
+        }
+        title={props.isSupported ? "Voice input" : "Voice input not supported in this browser"}
+      >
+        <Mic size={13} />
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2 flex-1 min-w-0">
+      <button
+        aria-label="Stop recording"
+        onClick={props.onStop}
+        className="w-7 h-7 rounded-md flex items-center justify-center bg-error/15 text-error border border-error/30 animate-pulse flex-shrink-0"
+      >
+        <Mic size={13} />
+      </button>
+
+      <div className="flex items-center gap-[2px] h-5" aria-hidden="true">
+        {Array.from({ length: 8 }).map(function (_, i) {
+          return (
+            <div
+              key={i}
+              className={
+                "w-[2px] rounded-sm bg-error transition-all duration-300 " +
+                (props.isSpeaking ? "animate-waveform" : "")
+              }
+              style={{
+                height: props.isSpeaking ? undefined : "4px",
+                opacity: props.isSpeaking ? undefined : 0.3,
+                animationDelay: (i * 0.1) + "s",
+              }}
+            />
+          );
+        })}
+      </div>
+
+      <span className="text-[12px] text-error font-mono flex-shrink-0">{formatTime(props.elapsed)}</span>
+
+      {props.interimTranscript && (
+        <span className="text-[11px] text-base-content/30 truncate flex-1 min-w-0">
+          {props.interimTranscript.slice(-60)}
+        </span>
+      )}
+
+      <button
+        onClick={props.onCancel}
+        className="text-[11px] text-base-content/40 hover:text-base-content/60 border border-base-content/10 rounded-md px-2 py-0.5 flex-shrink-0"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}

package/client/src/components/project-settings/ProjectMemory.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
-import { Plus, Trash2, Pencil, X, Loader2, Brain } from "lucide-react";
+import { Plus, Trash2, Pencil, X, Loader2, Brain, ExternalLink } from "lucide-react";
 import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import type { ServerMessage } from "@lattice/shared";
 
@@ -167,7 +168,7 @@ function MemoryViewModal({
 
           <div className="px-5 py-4">
             <div className="prose prose-sm max-w-none prose-headings:text-base-content prose-headings:font-mono prose-p:text-base-content/70 prose-strong:text-base-content prose-code:text-base-content/60 prose-code:bg-base-100/50 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[11px] prose-pre:bg-base-100 prose-pre:text-base-content/70 prose-pre:text-[11px] prose-a:text-primary prose-li:text-base-content/70 prose-li:marker:text-base-content/30 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
-              <Markdown>{parsed.body}</Markdown>
+              <Markdown remarkPlugins={[remarkGfm]}>{parsed.body}</Markdown>
             </div>
           </div>
         </div>
@@ -404,6 +405,15 @@ export function ProjectMemory({ projectSlug }: ProjectMemoryProps) {
 
   return (
     <div className="py-2 space-y-6">
+      <a
+        href="https://docs.anthropic.com/en/docs/claude-code/memory"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-[11px] text-base-content/30 hover:text-primary/70 flex items-center gap-1 transition-colors"
+      >
+        <ExternalLink size={11} />
+        Claude Code docs
+      </a>
       <div className="flex items-center justify-end">
         <button
           onClick={function () { setEditState({ memory: null, content: "" }); }}

package/client/src/components/project-settings/ProjectNotifications.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+interface ProjectNotificationsProps {
+  projectSlug?: string;
+}
+
+function loadMuted(slug: string): boolean {
+  return localStorage.getItem("lattice-mute-" + slug) === "1";
+}
+
+function saveMuted(slug: string, muted: boolean): void {
+  localStorage.setItem("lattice-mute-" + slug, muted ? "1" : "0");
+}
+
+export function ProjectNotifications({ projectSlug }: ProjectNotificationsProps) {
+  var slug = projectSlug ?? "";
+  var [muted, setMuted] = useState(function () { return loadMuted(slug); });
+
+  function toggle() {
+    var next = !muted;
+    setMuted(next);
+    saveMuted(slug, next);
+  }
+
+  return (
+    <div className="py-2 space-y-6">
+      <div>
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Project Notifications
+        </h2>
+        <div className="flex items-center justify-between py-2 px-3 bg-base-300 border border-base-content/15 rounded-xl">
+          <div>
+            <div className="text-[13px] text-base-content">Mute all notifications</div>
+            <div className="text-[11px] text-base-content/30 mt-0.5">
+              Suppress all browser notifications from this project
+            </div>
+          </div>
+          <input
+            type="checkbox"
+            className="toggle toggle-sm toggle-primary"
+            checked={muted}
+            onChange={toggle}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/project-settings/ProjectRules.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { X, Plus, ChevronDown, ChevronRight } from "lucide-react";
+import { X, Plus, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
 import { SaveFooter } from "../ui/SaveFooter";
 import { useSaveState } from "../../hooks/useSaveState";
 import type { ProjectSettings } from "@lattice/shared";
@@ -116,6 +116,15 @@ export function ProjectRules({
 
   return (
     <div className="py-2">
+      <a
+        href="https://docs.anthropic.com/en/docs/claude-code/memory"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-[11px] text-base-content/30 hover:text-primary/70 flex items-center gap-1 mb-4 transition-colors"
+      >
+        <ExternalLink size={11} />
+        Claude Code docs
+      </a>
       <div className="mb-6">
         <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
           Global Rules

package/client/src/components/project-settings/ProjectSettingsView.tsx

@@ -11,9 +11,11 @@ import { ProjectSkills } from "./ProjectSkills";
 import { ProjectRules } from "./ProjectRules";
 import { ProjectMcp } from "./ProjectMcp";
 import { ProjectMemory } from "./ProjectMemory";
+import { ProjectNotifications } from "./ProjectNotifications";
 
 var SECTION_CONFIG: Record<string, { title: string }> = {
   general: { title: "General" },
+  notifications: { title: "Notifications" },
   claude: { title: "Claude" },
   environment: { title: "Environment" },
   mcp: { title: "MCP Servers" },
@@ -61,6 +63,10 @@ function renderSection(
     return <ProjectMemory projectSlug={projectSlug} />;
   }
 
+  if (section === "notifications") {
+    return <ProjectNotifications projectSlug={projectSlug} />;
+  }
+
   return (
     <div className="py-2 text-[13px] text-base-content/40">
       {section} section coming soon.

package/client/src/components/settings/Appearance.tsx

@@ -146,6 +146,7 @@ export function Appearance() {
         currentThemeId={currentThemeId}
         onSelect={handleThemeSelect}
       />
+
     </div>
   );
 }

package/client/src/components/settings/ClaudeSettings.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { ExternalLink } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useSaveState } from "../../hooks/useSaveState";
 import { SaveFooter } from "../ui/SaveFooter";
@@ -82,6 +83,15 @@ export function ClaudeSettings() {
 
   return (
     <div className="py-2">
+      <a
+        href="https://docs.anthropic.com/en/docs/claude-code/memory"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-[11px] text-base-content/30 hover:text-primary/70 flex items-center gap-1 mb-4 transition-colors"
+      >
+        <ExternalLink size={11} />
+        Claude Code docs
+      </a>
       <div className="mb-5">
         <label htmlFor="claude-default-model" className="block text-[12px] font-semibold text-base-content/40 mb-2">Default Model</label>
         <select