From 069de014e7b0159d0ea70e509e0911b8437baa3c Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Sun, 3 May 2026 18:54:12 +0200
Subject: [PATCH 01/46] chore(ui): install shadcn popover, progress, and
 textarea components

---
 apps/web/src/shared/components/ui/popover.tsx | 87 +++++++++++++++++++
 .../web/src/shared/components/ui/progress.tsx | 31 +++++++
 .../web/src/shared/components/ui/textarea.tsx | 18 ++++
 3 files changed, 136 insertions(+)
 create mode 100644 apps/web/src/shared/components/ui/popover.tsx
 create mode 100644 apps/web/src/shared/components/ui/progress.tsx
 create mode 100644 apps/web/src/shared/components/ui/textarea.tsx

diff --git a/apps/web/src/shared/components/ui/popover.tsx b/apps/web/src/shared/components/ui/popover.tsx
new file mode 100644
index 00000000..319ca6b5
--- /dev/null
+++ b/apps/web/src/shared/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "#/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}
diff --git a/apps/web/src/shared/components/ui/progress.tsx b/apps/web/src/shared/components/ui/progress.tsx
new file mode 100644
index 00000000..9f58a139
--- /dev/null
+++ b/apps/web/src/shared/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "#/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/apps/web/src/shared/components/ui/textarea.tsx b/apps/web/src/shared/components/ui/textarea.tsx
new file mode 100644
index 00000000..47591225
--- /dev/null
+++ b/apps/web/src/shared/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "#/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

From c6208f6b224d4a7dce4a44716e6ef3ee7e086648 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Sun, 3 May 2026 18:54:25 +0200
Subject: [PATCH 02/46] refactor(ui): migrate popovers and dropdown to shadcn

- Replace manual createPortal + click-outside in variations-button with shadcn Popover
- Replace manual createPortal + click-outside in critique-mode-button with shadcn Popover
- Replace manual dropdown with click-outside useEffect in toolbar with shadcn DropdownMenu
- Replace inline SVGs with lucide-react icons (Settings, Menu)
- Use shadcn Separator for toolbar dividers
---
 .../prompt-bar/ui/critique-mode-button.tsx    | 283 ++++++++----------
 .../prompt-bar/ui/variations-button.tsx       | 187 +++++-------
 apps/web/src/widgets/toolbar/ui/toolbar.tsx   | 164 ++++------
 3 files changed, 249 insertions(+), 385 deletions(-)

diff --git a/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx b/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
index b4a75f2a..7ed31a19 100644
--- a/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
@@ -1,9 +1,10 @@
 import { RefreshCw, Zap } from "lucide-react";
-import { useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 
-import { useViewportSize } from "@mantine/hooks";
-import { useWindowEvent } from "@mantine/hooks";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "#/shared/components/ui/popover";
 
 interface CritiqueModeButtonProps {
   quickMode: boolean;
@@ -20,171 +21,129 @@ export function CritiqueModeButton({
   onToggle,
   dataTour,
 }: CritiqueModeButtonProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [popoverPos, setPopoverPos] = useState<{ bottom: number; right: number } | null>(null);
-  const { width: viewportWidth, height: viewportHeight } = useViewportSize();
-
-  useLayoutEffect(() => {
-    if (!showCritiqueMode || !containerRef.current) {
-      return;
-    }
-
-    const buttonRect = containerRef.current.getBoundingClientRect();
-
-    setPopoverPos({
-      bottom: viewportHeight - buttonRect.top + 4,
-      right: viewportWidth - buttonRect.right,
-    });
-
-    return () => setPopoverPos(null);
-  }, [showCritiqueMode, viewportHeight, viewportWidth]);
-
-  const handleClickOutside = (e: MouseEvent | PointerEvent) => {
-    if (
-      popoverRef.current &&
-      !popoverRef.current.contains(e.target as Node) &&
-      containerRef.current &&
-      !containerRef.current.contains(e.target as Node)
-    ) {
-      onToggle();
-    }
-  };
-  const handleEscape = (e: KeyboardEvent) => {
-    if (e.key === "Escape") {
-      onToggle();
-    }
-  };
-  useWindowEvent("mousedown", handleClickOutside);
-  useWindowEvent("keydown", handleEscape);
-
   return (
-    <div className="relative shrink-0 z-[60]" ref={containerRef}>
-      <button
-        type="button"
-        onClick={onToggle}
-        data-tour={dataTour}
-        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all"
-        style={
-          quickMode
-            ? { background: "var(--mode-quick-bg)", color: "var(--mode-quick-fg)" }
-            : { background: "var(--mode-critique-bg)", color: "var(--mode-critique-fg)" }
-        }
-        title="Generation mode"
+    <Popover open={showCritiqueMode} onOpenChange={(open) => {
+      if (!open && showCritiqueMode) onToggle();
+      if (open && !showCritiqueMode) onToggle();
+    }}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          data-tour={dataTour}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all"
+          style={
+            quickMode
+              ? { background: "var(--mode-quick-bg)", color: "var(--mode-quick-fg)" }
+              : { background: "var(--mode-critique-bg)", color: "var(--mode-critique-fg)" }
+          }
+          title="Generation mode"
+        >
+          {quickMode ? <Zap className="w-3.5 h-3.5" /> : <RefreshCw className="w-3.5 h-3.5" />}
+          <span>{quickMode ? "Quick" : "Critique"}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        side="top"
+        sideOffset={8}
+        className="w-[260px] bg-background/80 backdrop-blur-3xl rounded-[20px] border border-border/50 shadow-lg p-3"
       >
-        {quickMode ? <Zap className="w-3.5 h-3.5" /> : <RefreshCw className="w-3.5 h-3.5" />}
-        <span>{quickMode ? "Quick" : "Critique"}</span>
-      </button>
-
-      {showCritiqueMode &&
-        popoverPos &&
-        createPortal(
-          <div
-            ref={popoverRef}
-            className="fixed z-[55] w-[260px] bg-background/80 backdrop-blur-3xl rounded-[20px] border border-border/50 shadow-lg p-3"
-            style={{
-              bottom: `${popoverPos.bottom}px`,
-              right: `${popoverPos.right}px`,
+        <div className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-2">
+          Generation mode
+        </div>
+        <div className="space-y-2">
+          <button
+            type="button"
+            onClick={() => {
+              onQuickModeChange(false);
+              onToggle();
+            }}
+            className={`w-full flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
+              !quickMode ? "border" : "bg-background/40"
+            }`}
+            style={
+              !quickMode
+                ? {
+                    background: "var(--mode-critique-bg)",
+                    borderColor: "var(--mode-critique-fg)",
+                  }
+                : { background: "var(--mode-critique-bg-subtle)" }
+            }
+          >
+            <div
+              className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center`}
+              style={
+                !quickMode
+                  ? {
+                      background: "var(--mode-critique-icon-bg)",
+                      color: "var(--mode-critique-fg)",
+                    }
+                  : {
+                      background: "var(--mode-critique-bg-subtle)",
+                      color: "var(--mode-critique-fg)",
+                    }
+              }
+            >
+              <RefreshCw className="w-4 h-4" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div
+                className="text-[12px] font-semibold"
+                style={{ color: "var(--mode-critique-fg)" }}
+              >
+                Critique Loop
+              </div>
+              <div
+                className="text-[10px] leading-relaxed mt-0.5"
+                style={{ color: "var(--mode-critique-fg)", opacity: 0.7 }}
+              >
+                Sequential generation with AI feedback between each frame. Each design learns
+                from the previous one.
+              </div>
+            </div>
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              onQuickModeChange(true);
+              onToggle();
             }}
+            className={`w-full flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
+              quickMode ? "border" : "bg-background/40"
+            }`}
+            style={
+              quickMode
+                ? { background: "var(--mode-quick-bg)", borderColor: "var(--mode-quick-fg)" }
+                : { background: "var(--mode-quick-bg-subtle)" }
+            }
           >
-            <div className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-2">
-              Generation mode
+            <div
+              className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center`}
+              style={
+                quickMode
+                  ? { background: "var(--mode-quick-icon-bg)", color: "var(--mode-quick-fg)" }
+                  : { background: "var(--mode-quick-bg-subtle)", color: "var(--mode-quick-fg)" }
+              }
+            >
+              <Zap className="w-4 h-4" />
             </div>
-            <div className="space-y-2">
-              <button
-                type="button"
-                onClick={() => {
-                  onQuickModeChange(false);
-                  onToggle();
-                }}
-                className={`w-full flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
-                  !quickMode ? "border" : "bg-background/40"
-                }`}
-                style={
-                  !quickMode
-                    ? {
-                        background: "var(--mode-critique-bg)",
-                        borderColor: "var(--mode-critique-fg)",
-                      }
-                    : { background: "var(--mode-critique-bg-subtle)" }
-                }
+            <div className="flex-1 min-w-0">
+              <div
+                className="text-[12px] font-semibold"
+                style={{ color: "var(--mode-quick-fg)" }}
               >
-                <div
-                  className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center`}
-                  style={
-                    !quickMode
-                      ? {
-                          background: "var(--mode-critique-icon-bg)",
-                          color: "var(--mode-critique-fg)",
-                        }
-                      : {
-                          background: "var(--mode-critique-bg-subtle)",
-                          color: "var(--mode-critique-fg)",
-                        }
-                  }
-                >
-                  <RefreshCw className="w-4 h-4" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div
-                    className="text-[12px] font-semibold"
-                    style={{ color: "var(--mode-critique-fg)" }}
-                  >
-                    Critique Loop
-                  </div>
-                  <div
-                    className="text-[10px] leading-relaxed mt-0.5"
-                    style={{ color: "var(--mode-critique-fg)", opacity: 0.7 }}
-                  >
-                    Sequential generation with AI feedback between each frame. Each design learns
-                    from the previous one.
-                  </div>
-                </div>
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  onQuickModeChange(true);
-                  onToggle();
-                }}
-                className={`w-full flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
-                  quickMode ? "border" : "bg-background/40"
-                }`}
-                style={
-                  quickMode
-                    ? { background: "var(--mode-quick-bg)", borderColor: "var(--mode-quick-fg)" }
-                    : { background: "var(--mode-quick-bg-subtle)" }
-                }
+                Quick Mode
+              </div>
+              <div
+                className="text-[10px] leading-relaxed mt-0.5"
+                style={{ color: "var(--mode-quick-fg)", opacity: 0.7 }}
               >
-                <div
-                  className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center`}
-                  style={
-                    quickMode
-                      ? { background: "var(--mode-quick-icon-bg)", color: "var(--mode-quick-fg)" }
-                      : { background: "var(--mode-quick-bg-subtle)", color: "var(--mode-quick-fg)" }
-                  }
-                >
-                  <Zap className="w-4 h-4" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div
-                    className="text-[12px] font-semibold"
-                    style={{ color: "var(--mode-quick-fg)" }}
-                  >
-                    Quick Mode
-                  </div>
-                  <div
-                    className="text-[10px] leading-relaxed mt-0.5"
-                    style={{ color: "var(--mode-quick-fg)", opacity: 0.7 }}
-                  >
-                    Generate all designs in parallel without critique. Faster but less refined.
-                  </div>
-                </div>
-              </button>
+                Generate all designs in parallel without critique. Faster but less refined.
+              </div>
             </div>
-          </div>,
-          document.body,
-        )}
-    </div>
+          </button>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx b/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx
index 26429503..a5be0e45 100644
--- a/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx
@@ -1,9 +1,10 @@
 import { Dices, Minus, Plus } from "lucide-react";
-import { useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 
-import { useViewportSize } from "@mantine/hooks";
-import { useWindowEvent } from "@mantine/hooks";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "#/shared/components/ui/popover";
 
 const VARIATION_COLORS: Record<number, { bg: string; color: string }> = {
   1: { bg: "transparent", color: "" },
@@ -30,119 +31,75 @@ export function VariationsButton({
   disabled = false,
   dataTour,
 }: VariationsButtonProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [popoverPos, setPopoverPos] = useState<{ bottom: number; left: number } | null>(null);
-  const { height: viewportHeight } = useViewportSize();
-
-  useLayoutEffect(() => {
-    if (!showVariations || !containerRef.current) {
-      return;
-    }
-
-    const buttonRect = containerRef.current.getBoundingClientRect();
-
-    setPopoverPos({
-      bottom: viewportHeight - buttonRect.top + 8,
-      left: buttonRect.left,
-    });
-
-    return () => setPopoverPos(null);
-  }, [showVariations, viewportHeight]);
-
-  const handleClickOutside = (e: MouseEvent | PointerEvent) => {
-    if (
-      popoverRef.current &&
-      !popoverRef.current.contains(e.target as Node) &&
-      containerRef.current &&
-      !containerRef.current.contains(e.target as Node)
-    ) {
-      onToggle();
-    }
-  };
-
-  const handleEscape = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && showVariations) {
-      onToggle();
-    }
-  };
-
-  useWindowEvent("mousedown", handleClickOutside);
-  useWindowEvent("keydown", handleEscape);
-
   return (
-    <div className="relative shrink-0" ref={containerRef}>
-      <button
-        type="button"
-        onClick={onToggle}
-        disabled={disabled}
-        data-tour={dataTour}
-        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all ${
-          disabled
-            ? "bg-gray-100/50 text-gray-400 cursor-not-allowed border border-gray-200/50"
-            : conceptCount !== 1
-              ? ""
-              : "bg-white/50 text-gray-600 hover:bg-white/80 border border-gray-200/50"
-        }`}
-        style={
-          !disabled && conceptCount !== 1
-            ? {
-                backgroundColor: VARIATION_COLORS[conceptCount]?.bg,
-                border:
-                  conceptCount === 2 || conceptCount === 3
-                    ? "1px solid var(--mode-variations-fg)"
-                    : undefined,
-                color: VARIATION_COLORS[conceptCount]?.color,
-              }
-            : undefined
-        }
-        title="Number of design variations to generate"
+    <Popover open={showVariations} onOpenChange={(open) => {
+      if (!open && showVariations) onToggle();
+      if (open && !showVariations) onToggle();
+    }}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          data-tour={dataTour}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all ${
+            disabled
+              ? "bg-gray-100/50 text-gray-400 cursor-not-allowed border border-gray-200/50"
+              : conceptCount !== 1
+                ? ""
+                : "bg-white/50 text-gray-600 hover:bg-white/80 border border-gray-200/50"
+          }`}
+          style={
+            !disabled && conceptCount !== 1
+              ? {
+                  backgroundColor: VARIATION_COLORS[conceptCount]?.bg,
+                  border:
+                    conceptCount === 2 || conceptCount === 3
+                      ? "1px solid var(--mode-variations-fg)"
+                      : undefined,
+                  color: VARIATION_COLORS[conceptCount]?.color,
+                }
+              : undefined
+          }
+          title="Number of design variations to generate"
+        >
+          <Dices className="w-3.5 h-3.5" />
+          <span>Variations</span>
+          {conceptCount !== 1 && (
+            <span className="bg-white/20 px-1.5 py-0.5 rounded text-[10px]">{conceptCount}</span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="top"
+        sideOffset={8}
+        className="w-[180px] bg-white/20 backdrop-blur-3xl rounded-[20px] border border-white/30 shadow-[0_8px_40px_rgba(0,0,0,0.06),0_2px_8px_rgba(0,0,0,0.04),inset_0_1px_0_rgba(255,255,255,0.8),inset_0_-1px_0_rgba(255,255,255,0.15)] p-4"
       >
-        <Dices className="w-3.5 h-3.5" />
-        <span>Variations</span>
-        {conceptCount !== 1 && (
-          <span className="bg-white/20 px-1.5 py-0.5 rounded text-[10px]">{conceptCount}</span>
-        )}
-      </button>
-
-      {showVariations &&
-        popoverPos &&
-        createPortal(
-          <div
-            ref={popoverRef}
-            className="fixed z-[55] w-[180px] bg-white/20 backdrop-blur-3xl rounded-[20px] border border-white/30 shadow-[0_8px_40px_rgba(0,0,0,0.06),0_2px_8px_rgba(0,0,0,0.04),inset_0_1px_0_rgba(255,255,255,0.8),inset_0_-1px_0_rgba(255,255,255,0.15)] p-4"
-            style={{
-              bottom: `${popoverPos.bottom}px`,
-              left: `${popoverPos.left}px`,
-            }}
+        <div className="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-3">
+          Variations per prompt
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => onConceptCountChange(Math.max(1, conceptCount - 1))}
+            disabled={conceptCount <= 1}
+            className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/50 hover:bg-white/70 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          >
+            <Minus className="w-4 h-4 text-gray-600" />
+          </button>
+          <span className="text-lg font-semibold text-gray-800 min-w-[40px] text-center">
+            {conceptCount}
+          </span>
+          <button
+            type="button"
+            onClick={() => onConceptCountChange(Math.min(5, conceptCount + 1))}
+            disabled={conceptCount >= 5}
+            className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/50 hover:bg-white/70 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           >
-            <div className="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-3">
-              Variations per prompt
-            </div>
-            <div className="flex items-center justify-between">
-              <button
-                type="button"
-                onClick={() => onConceptCountChange(Math.max(1, conceptCount - 1))}
-                disabled={conceptCount <= 1}
-                className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/50 hover:bg-white/70 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              >
-                <Minus className="w-4 h-4 text-gray-600" />
-              </button>
-              <span className="text-lg font-semibold text-gray-800 min-w-[40px] text-center">
-                {conceptCount}
-              </span>
-              <button
-                type="button"
-                onClick={() => onConceptCountChange(Math.min(5, conceptCount + 1))}
-                disabled={conceptCount >= 5}
-                className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/50 hover:bg-white/70 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              >
-                <Plus className="w-4 h-4 text-gray-600" />
-              </button>
-            </div>
-          </div>,
-          document.body,
-        )}
-    </div>
+            <Plus className="w-4 h-4 text-gray-600" />
+          </button>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/apps/web/src/widgets/toolbar/ui/toolbar.tsx b/apps/web/src/widgets/toolbar/ui/toolbar.tsx
index 8e439c9c..1597d458 100644
--- a/apps/web/src/widgets/toolbar/ui/toolbar.tsx
+++ b/apps/web/src/widgets/toolbar/ui/toolbar.tsx
@@ -1,10 +1,18 @@
-import { useEffect, useRef, useState } from "react";
+import { Menu, Settings } from "lucide-react";
+import { useState } from "react";
 
 import type { ProviderConfig } from "#/features/settings/types";
 import { MODELS } from "#/features/settings/types";
 import { SettingsDialog } from "#/features/settings/ui/settings-dialog";
-
-import ToolButton from "./tool-button";
+import { Button } from "#/shared/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "#/shared/components/ui/dropdown-menu";
+import { Separator } from "#/shared/components/ui/separator";
 
 interface ToolbarProps {
   isOwnKey: boolean;
@@ -30,23 +38,7 @@ export function Toolbar({
   const displayModel = provider?.models.find((m) => m.id === modelId)?.displayName || modelId;
   const modelLabel =
     MODELS.find((m) => m.id === modelId)?.label || displayModel || model || "Sonnet 4.5";
-  const [menuOpen, setMenuOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // oxlint-disable no-restricted-syntax -- Conditional click-outside listener for menu state. Cannot use useMountEffect.
-  useEffect(() => {
-    if (!menuOpen) {
-      return;
-    }
-    const handler = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setMenuOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [menuOpen]);
 
   return (
     <div
@@ -64,102 +56,58 @@ export function Toolbar({
             className={`w-1.5 h-1.5 rounded-full ${isOwnKey ? "bg-emerald-400" : "bg-amber-400"}`}
           />
           <span>{modelLabel}</span>
-          <svg
-            className="w-3.5 h-3.5 opacity-60"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <circle cx="12" cy="12" r="3" />
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-          </svg>
+          <Settings className="w-3.5 h-3.5 opacity-60" />
         </button>
 
-        <div className="w-px h-5 bg-foreground/15 mx-1" />
+        <Separator orientation="vertical" className="h-5 mx-1" />
       </div>
 
-      <div className="relative shrink-0" ref={menuRef}>
-        <ToolButton onClick={() => setMenuOpen(!menuOpen)} title="Menu" dataTour="export-menu">
-          <svg
-            className="w-4 h-4"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="w-8 h-8 rounded-xl text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
+            data-tour="export-menu"
+            title="Menu"
           >
-            <line x1="4" y1="6" x2="20" y2="6" />
-            <line x1="4" y1="12" x2="20" y2="12" />
-            <line x1="4" y1="18" x2="20" y2="18" />
-          </svg>
-        </ToolButton>
-
-        {menuOpen && (
-          <div className="absolute top-full right-0 mt-2 w-48 rounded-xl bg-foreground/90 backdrop-blur-2xl border border-border/40 shadow-[0_8px_32px_oklch(0_0_0_/_0.3)] py-1 overflow-hidden">
-            <MenuItem
-              icon="📥"
-              label="Import .design"
-              onClick={() => {
-                onImport();
-                setMenuOpen(false);
-              }}
-            />
-            {hasFrames && (
-              <>
-                <MenuItem
-                  icon="📤"
-                  label="Export .design"
-                  onClick={() => {
-                    onExport();
-                    setMenuOpen(false);
-                  }}
-                />
-                <div className="h-px bg-foreground/10 my-1" />
-                <MenuItem
-                  icon="🗑"
-                  label="Clear Canvas"
-                  onClick={() => {
-                    onNewSession();
-                    setMenuOpen(false);
-                  }}
-                  danger
-                />
-              </>
-            )}
-          </div>
-        )}
-      </div>
+            <Menu className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-48 rounded-xl bg-foreground/90 backdrop-blur-2xl border border-border/40 shadow-[0_8px_32px_oklch(0_0_0_/_0.3)]"
+        >
+          <DropdownMenuItem
+            onClick={onImport}
+            className="text-background/70 hover:bg-background/10 hover:text-background text-[12px] focus:bg-background/10 focus:text-background"
+          >
+            <span className="text-sm">📥</span>
+            Import .design
+          </DropdownMenuItem>
+          {hasFrames && (
+            <>
+              <DropdownMenuItem
+                onClick={onExport}
+                className="text-background/70 hover:bg-background/10 hover:text-background text-[12px] focus:bg-background/10 focus:text-background"
+              >
+                <span className="text-sm">📤</span>
+                Export .design
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="bg-foreground/10" />
+              <DropdownMenuItem
+                onClick={onNewSession}
+                className="text-destructive hover:bg-destructive/10 text-[12px] focus:bg-destructive/10 focus:text-destructive"
+              >
+                <span className="text-sm">🗑</span>
+                Clear Canvas
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
     </div>
   );
 }
-
-function MenuItem({
-  icon,
-  label,
-  onClick,
-  danger,
-}: {
-  icon: string;
-  label: string;
-  onClick: () => void;
-  danger?: boolean;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={`w-full flex items-center gap-2.5 px-3 py-2 text-[12px] font-medium transition-colors ${
-        danger
-          ? "text-destructive hover:bg-destructive/10"
-          : "text-background/70 hover:bg-background/10 hover:text-background"
-      }`}
-    >
-      <span className="text-sm">{icon}</span>
-      {label}
-    </button>
-  );
-}

From ea2c91e99a43d67308912719c9ad212618a2f668 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Sun, 3 May 2026 18:54:43 +0200
Subject: [PATCH 03/46] refactor(ui): migrate buttons and misc components to
 shadcn

- Delete ToolButton component, replace with shadcn Button ghost variant
- Migrate compass.tsx and zoom.tsx to shadcn Button
- Migrate prompt-bar.tsx raw buttons to shadcn Button
- Migrate image-pill.tsx remove button to shadcn Button
- Migrate add-media-button.tsx to shadcn Button
- Migrate context-toolbar.tsx separator to shadcn Separator
- Migrate pipeline-status.tsx progress bar to shadcn Progress
- Migrate ai-prompt-input.tsx textarea to shadcn Textarea
- Replace inline SVGs with lucide-react icons (Loader2, X, AlertTriangle)
---
 .../src/features/canvas-hud/ui/compass.tsx    | 12 +++-
 apps/web/src/features/canvas-hud/ui/zoom.tsx  | 22 ++++--
 .../features/canvas/ui/pipeline-status.tsx    | 21 +++---
 .../context-toolbar/ui/context-toolbar.tsx    |  3 +-
 .../prompt-bar/ui/add-media-button.tsx        |  9 ++-
 .../widgets/prompt-bar/ui/ai-prompt-input.tsx |  6 +-
 .../src/widgets/prompt-bar/ui/image-pill.tsx  | 10 ++-
 .../src/widgets/prompt-bar/ui/prompt-bar.tsx  | 71 +++++--------------
 .../src/widgets/toolbar/ui/tool-button.tsx    | 20 ------
 9 files changed, 76 insertions(+), 98 deletions(-)
 delete mode 100644 apps/web/src/widgets/toolbar/ui/tool-button.tsx

diff --git a/apps/web/src/features/canvas-hud/ui/compass.tsx b/apps/web/src/features/canvas-hud/ui/compass.tsx
index d917a06d..07ca84f6 100644
--- a/apps/web/src/features/canvas-hud/ui/compass.tsx
+++ b/apps/web/src/features/canvas-hud/ui/compass.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Locate, LocateFixed, Navigation } from "lucide-react";
 import { useViewportSize } from "@mantine/hooks";
 
-import ToolButton from "#/widgets/toolbar/ui/tool-button";
+import { Button } from "#/shared/components/ui/button";
 
 export interface CompassProps {
   offset: { x: number; y: number };
@@ -27,7 +27,13 @@ const Compass = ({ offset, onResetView }: CompassProps) => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <ToolButton onClick={onResetView} title="Reset view">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onResetView}
+        title="Reset view"
+        className="w-8 h-8 rounded-xl text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
+      >
         <span className="relative w-4 h-4 flex items-center justify-center">
           <Navigation
             className={`absolute w-4 h-4 transition-all duration-200 ${
@@ -46,7 +52,7 @@ const Compass = ({ offset, onResetView }: CompassProps) => {
             }`}
           />
         </span>
-      </ToolButton>
+      </Button>
     </div>
   );
 };
diff --git a/apps/web/src/features/canvas-hud/ui/zoom.tsx b/apps/web/src/features/canvas-hud/ui/zoom.tsx
index 6dcc1c58..c3cd04ed 100644
--- a/apps/web/src/features/canvas-hud/ui/zoom.tsx
+++ b/apps/web/src/features/canvas-hud/ui/zoom.tsx
@@ -1,6 +1,6 @@
 import { Minus, Plus } from "lucide-react";
 
-import ToolButton from "#/widgets/toolbar/ui/tool-button";
+import { Button } from "#/shared/components/ui/button";
 
 export interface ZoomControlsProps {
   scale: number;
@@ -10,17 +10,29 @@ export interface ZoomControlsProps {
 
 const ZoomControls = ({ onZoomIn, onZoomOut, scale }: ZoomControlsProps) => (
   <>
-    <ToolButton onClick={onZoomOut} title="Zoom out">
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={onZoomOut}
+      title="Zoom out"
+      className="w-8 h-8 rounded-xl text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
+    >
       <Minus className="w-4 h-4" />
-    </ToolButton>
+    </Button>
 
     <span className="text-[11px] font-medium text-toolbar-text px-1.5 py-1 rounded-lg min-w-[42px] text-center transition-colors">
       {Math.round(scale * 100)}%
     </span>
 
-    <ToolButton onClick={onZoomIn} title="Zoom in">
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={onZoomIn}
+      title="Zoom in"
+      className="w-8 h-8 rounded-xl text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
+    >
       <Plus className="w-4 h-4" />
-    </ToolButton>
+    </Button>
   </>
 );
 
diff --git a/apps/web/src/features/canvas/ui/pipeline-status.tsx b/apps/web/src/features/canvas/ui/pipeline-status.tsx
index 2a2b12b0..c8473d98 100644
--- a/apps/web/src/features/canvas/ui/pipeline-status.tsx
+++ b/apps/web/src/features/canvas/ui/pipeline-status.tsx
@@ -1,3 +1,4 @@
+import { Progress } from "#/shared/components/ui/progress";
 import { type PipelineStatus, STAGE_CONFIG } from "#/shared/types";
 
 interface PipelineStatusBarProps {
@@ -28,16 +29,16 @@ export function PipelineStatusOverlay({
 
   return (
     <div className="absolute pointer-events-none" style={{ left: x, top: topOffset, width }}>
-      <div className="h-1 rounded-full bg-muted overflow-hidden">
-        {!isQueued && (
-          <div
-            className={`h-full rounded-full transition-all duration-700 ease-out ${
-              isError ? "bg-destructive" : "bg-gradient-to-r from-primary to-secondary"
-            } ${status.stage === "layout" || status.stage === "images" ? "animate-pulse" : ""}`}
-            style={{ width: `${Math.max(status.progress * 100, 5)}%` }}
-          />
-        )}
-      </div>
+      {!isQueued && (
+        <Progress
+          value={Math.max(status.progress * 100, 5)}
+          className={`h-1 ${
+            isError
+              ? "[&_[data-slot=progress-indicator]]:bg-destructive"
+              : "[&_[data-slot=progress-indicator]]:bg-gradient-to-r [&_[data-slot=progress-indicator]]:from-primary [&_[data-slot=progress-indicator]]:to-secondary"
+          } ${status.stage === "layout" || status.stage === "images" ? "[&_[data-slot=progress-indicator]]:animate-pulse" : ""}`}
+        />
+      )}
       <div className="flex items-center justify-between mt-1.5">
         <span className="text-[10px] font-medium text-muted-foreground whitespace-nowrap">
           {config.icon} {config.label}
diff --git a/apps/web/src/features/context-toolbar/ui/context-toolbar.tsx b/apps/web/src/features/context-toolbar/ui/context-toolbar.tsx
index eb5980aa..bf568e8a 100644
--- a/apps/web/src/features/context-toolbar/ui/context-toolbar.tsx
+++ b/apps/web/src/features/context-toolbar/ui/context-toolbar.tsx
@@ -3,6 +3,7 @@ import { useAtomValue } from "jotai";
 import { selectedIdsAtom } from "#/features/design/state/generation-atoms";
 import { groupsAtom } from "#/features/design/state/groups-atoms";
 import { ExportMenu } from "#/features/export";
+import { Separator } from "#/shared/components/ui/separator";
 import type { DesignIteration } from "#/shared/types";
 
 import { RemixButton } from "./remix-button";
@@ -61,7 +62,7 @@ export function ContextToolbar({
         onClick={(e) => e.stopPropagation()}
       >
         <RemixButton iteration={iteration} onRemix={onRemix} />
-        <div className="w-px h-4 bg-gray-200/50" />
+        <Separator orientation="vertical" className="h-4" />
         <ExportMenu
           html={iteration.html ?? ""}
           label={iteration.label ?? "Design"}
diff --git a/apps/web/src/widgets/prompt-bar/ui/add-media-button.tsx b/apps/web/src/widgets/prompt-bar/ui/add-media-button.tsx
index cb174520..74830452 100644
--- a/apps/web/src/widgets/prompt-bar/ui/add-media-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/add-media-button.tsx
@@ -1,6 +1,8 @@
 import { ImageIcon } from "lucide-react";
 import { useRef } from "react";
 
+import { Button } from "#/shared/components/ui/button";
+
 interface AddMediaButtonProps {
   onFileSelect: (file: File) => void;
   disabled?: boolean;
@@ -23,8 +25,11 @@ export function AddMediaButton({ onFileSelect, disabled = false }: AddMediaButto
   };
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
       onClick={handleClick}
+      disabled={disabled}
       aria-label="Add media"
       className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all ${
         disabled
@@ -41,6 +46,6 @@ export function AddMediaButton({ onFileSelect, disabled = false }: AddMediaButto
         disabled={disabled}
         className="hidden"
       />
-    </button>
+    </Button>
   );
 }
diff --git a/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx b/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
index 2a293613..954e1b9b 100644
--- a/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
@@ -1,5 +1,7 @@
 import { forwardRef, useEffect, useRef } from "react";
 
+import { Textarea } from "#/shared/components/ui/textarea";
+
 interface PromptInputContainerProps {
   children: React.ReactNode;
   isGenerating?: boolean;
@@ -80,7 +82,7 @@ export const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTe
     }, [value]);
 
     return (
-      <textarea
+      <Textarea
         ref={ref || textareaRef}
         value={value}
         onChange={onChange}
@@ -89,7 +91,7 @@ export const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTe
         disabled={disabled}
         rows={1}
         aria-label="Prompt"
-        className={`flex-1 px-0 py-2 text-[15px] text-gray-800 placeholder-gray-400/70 bg-transparent outline-none resize-none leading-[22px] ${className}`}
+        className={`flex-1 px-0 py-2 text-[15px] text-gray-800 placeholder-gray-400/70 bg-transparent outline-none resize-none leading-[22px] border-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${className}`}
         style={{ maxHeight: 22 * 6 }}
       />
     );
diff --git a/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx b/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx
index 80d2849d..0860e5c8 100644
--- a/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx
@@ -1,5 +1,7 @@
 import { X } from "lucide-react";
 
+import { Button } from "#/shared/components/ui/button";
+
 import type { SelectedImage } from "#/features/settings/types";
 
 interface ImagePillProps {
@@ -14,14 +16,16 @@ export function ImagePill({ image, onRemove }: ImagePillProps) {
     <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 shadow-sm">
       <img src={image.src} alt={filename} className="w-8 h-8 rounded-full object-cover" />
       <span className="text-xs font-medium text-gray-700 truncate max-w-[100px]">{filename}</span>
-      <button
+      <Button
+        variant="ghost"
+        size="icon"
         onClick={() => onRemove(image.id)}
-        className="ml-1 p-1 rounded hover:bg-white/20 transition-colors"
+        className="ml-1 p-1 h-auto w-auto rounded hover:bg-white/20 transition-colors"
         title="Remove image"
         aria-label="Remove image"
       >
         <X className="w-3.5 h-3.5 text-gray-500" />
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/src/widgets/prompt-bar/ui/prompt-bar.tsx b/apps/web/src/widgets/prompt-bar/ui/prompt-bar.tsx
index b20cb59d..8bd70294 100644
--- a/apps/web/src/widgets/prompt-bar/ui/prompt-bar.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/prompt-bar.tsx
@@ -1,8 +1,9 @@
 import { useAtom } from "jotai";
-import { ArrowRight } from "lucide-react";
+import { AlertTriangle, ArrowRight, Loader2, X } from "lucide-react";
 import { ComponentProps, useCallback, useRef, useState } from "react";
 
 import { settingsAtom } from "#/features/settings/state/settings-atoms";
+import { Button } from "#/shared/components/ui/button";
 
 import { usePromptHistory } from "../hooks/use-prompt-history";
 import { AddMediaButton } from "./add-media-button";
@@ -23,14 +24,16 @@ interface SubmitButtonProps extends ComponentProps<"button"> {
 
 const SubmitButton = ({ onSubmit, className, ...props }: SubmitButtonProps) => {
   return (
-    <button
+    <Button
       {...props}
+      variant="ghost"
+      size="icon"
       onClick={onSubmit}
-      className={`flex items-center justify-center w-8 h-8 rounded-full bg-gray-900/80 backdrop-blur-sm text-white hover:bg-gray-800 disabled:opacity-25 disabled:hover:bg-gray-900/80 transition-all shrink-0 ${className}`}
+      className={`w-8 h-8 rounded-full bg-gray-900/80 backdrop-blur-sm text-white hover:bg-gray-800 disabled:opacity-25 disabled:hover:bg-gray-900/80 transition-all shrink-0 ${className}`}
       title="Send (Enter)"
     >
       <ArrowRight />
-    </button>
+    </Button>
   );
 };
 
@@ -47,7 +50,9 @@ const ActionButton = ({ isGenerating, dataTour }: ActionButtonProps & { dataTour
   );
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
       onClick={() => setIsIdeating(!isIdeating)}
       disabled={isGenerating}
       data-tour={dataTour}
@@ -68,7 +73,7 @@ const ActionButton = ({ isGenerating, dataTour }: ActionButtonProps & { dataTour
       title={isIdeating ? "Ideate mode" : "Build mode"}
     >
       {isIdeating ? "◈ Ideate" : "✦ Build"}
-    </button>
+    </Button>
   );
 };
 
@@ -219,47 +224,20 @@ export function PromptBar({ onSubmit, isGenerating, genStatus, onCancel }: Promp
             /* Compact status bar */
             <div className="flex items-center justify-between gap-3 w-full">
               <div className="flex items-center gap-2 min-w-0">
-                <svg
-                  className="w-4 h-4 animate-spin shrink-0 text-gray-400"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="2.5"
-                    opacity="0.2"
-                  />
-                  <path
-                    d="M12 2a10 10 0 0 1 10 10"
-                    stroke="currentColor"
-                    strokeWidth="2.5"
-                    strokeLinecap="round"
-                  />
-                </svg>
+                <Loader2 className="w-4 h-4 animate-spin shrink-0 text-gray-400" />
                 <span className="text-[13px] text-gray-500 font-medium truncate">
                   {genStatus || "Generating..."}
                 </span>
               </div>
-              <button
+              <Button
+                variant="destructive"
+                size="icon"
                 onClick={onCancel}
-                className="flex items-center justify-center w-8 h-8 rounded-lg bg-red-500/80 backdrop-blur-sm text-white hover:bg-red-600 transition-all shrink-0"
+                className="w-8 h-8 rounded-lg bg-red-500/80 backdrop-blur-sm text-white hover:bg-red-600 transition-all shrink-0"
                 title="Cancel (Esc)"
               >
-                <svg
-                  className="w-3.5 h-3.5"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2.5"
-                  strokeLinecap="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
+                <X className="w-3.5 h-3.5" />
+              </Button>
             </div>
           ) : (
             /* Full input bar */
@@ -276,18 +254,7 @@ export function PromptBar({ onSubmit, isGenerating, genStatus, onCancel }: Promp
                 {error && <div className="text-xs text-red-400 mt-1 mb-1">{error}</div>}
                 {showVisionWarning && (
                   <div className="text-xs text-amber-400/90 mt-1 mb-1 flex items-center gap-1.5">
-                    <svg
-                      className="w-3.5 h-3.5 shrink-0"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                    >
-                      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-                      <line x1="12" y1="9" x2="12" y2="13" />
-                      <line x1="12" y1="17" x2="12.01" y2="17" />
-                    </svg>
+                    <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
                     This model may not support image input
                   </div>
                 )}
diff --git a/apps/web/src/widgets/toolbar/ui/tool-button.tsx b/apps/web/src/widgets/toolbar/ui/tool-button.tsx
deleted file mode 100644
index 5c6bd6d2..00000000
--- a/apps/web/src/widgets/toolbar/ui/tool-button.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-interface Props extends PropsWithChildren {
-  title: string;
-  dataTour?: string;
-  onClick: () => void;
-}
-
-const ToolButton = ({ onClick, title, children, dataTour }: Props) => (
-  <button
-    onClick={onClick}
-    title={title}
-    data-tour={dataTour}
-    className="w-8 h-8 flex items-center justify-center rounded-xl transition-all text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
-  >
-    {children}
-  </button>
-);
-
-export default ToolButton;

From 5fc7469f1f956587d2b107245e3290c79eb1bcc4 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Sun, 3 May 2026 18:56:26 +0200
Subject: [PATCH 04/46] chore: update lockfile after shadcn component installs

---
 bun.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/bun.lock b/bun.lock
index 106e22a7..8250f7fe 100644
--- a/bun.lock
+++ b/bun.lock
@@ -46,7 +46,7 @@
     },
     "apps/server": {
       "name": "@app/server",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "dependencies": {
         "@app/core": "workspace:*",
         "@app/logger": "workspace:*",
@@ -66,7 +66,7 @@
     },
     "apps/web": {
       "name": "@app/web",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "dependencies": {
         "@ai-sdk/anthropic": "^3.0.68",
         "@ai-sdk/google": "^3.0.61",
@@ -133,7 +133,7 @@
     },
     "packages/core": {
       "name": "@app/core",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "dependencies": {
         "@ai-sdk/anthropic": "^3.0.68",
         "@ai-sdk/google": "^3.0.61",
@@ -181,7 +181,7 @@
     },
     "platforms/desktop": {
       "name": "@app/electrobun",
-      "version": "0.4.0",
+      "version": "0.4.1",
       "dependencies": {
         "@app/server": "workspace:*",
         "@logtape/file": "^2.0.5",

From b44203a950cf99214f71ec4f3466573631a8eed2 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Sun, 3 May 2026 19:37:31 +0200
Subject: [PATCH 05/46] refactor(ui): migrate remaining raw buttons to shadcn
 Button, fix textarea border

---
 .../widgets/prompt-bar/ui/ai-prompt-input.tsx |  2 +-
 .../prompt-bar/ui/critique-mode-button.tsx    | 23 ++++++++++---------
 .../prompt-bar/ui/variations-button.tsx       | 21 +++++++++--------
 apps/web/src/widgets/toolbar/ui/toolbar.tsx   |  5 ++--
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx b/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
index 954e1b9b..f855b721 100644
--- a/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
@@ -91,7 +91,7 @@ export const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTe
         disabled={disabled}
         rows={1}
         aria-label="Prompt"
-        className={`flex-1 px-0 py-2 text-[15px] text-gray-800 placeholder-gray-400/70 bg-transparent outline-none resize-none leading-[22px] border-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${className}`}
+        className={`flex-1 px-0 py-2 text-[15px] text-gray-800 placeholder-gray-400/70 bg-transparent outline-none resize-none leading-[22px] border-0 focus-visible:ring-0 focus-visible:ring-offset-0 min-h-0 shadow-none focus-visible:border-0 ${className}`}
         style={{ maxHeight: 22 * 6 }}
       />
     );
diff --git a/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx b/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
index 7ed31a19..d2537595 100644
--- a/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
@@ -1,5 +1,6 @@
 import { RefreshCw, Zap } from "lucide-react";
 
+import { Button } from "#/shared/components/ui/button";
 import {
   Popover,
   PopoverContent,
@@ -27,8 +28,8 @@ export function CritiqueModeButton({
       if (open && !showCritiqueMode) onToggle();
     }}>
       <PopoverTrigger asChild>
-        <button
-          type="button"
+        <Button
+          variant="ghost"
           data-tour={dataTour}
           className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all"
           style={
@@ -40,7 +41,7 @@ export function CritiqueModeButton({
         >
           {quickMode ? <Zap className="w-3.5 h-3.5" /> : <RefreshCw className="w-3.5 h-3.5" />}
           <span>{quickMode ? "Quick" : "Critique"}</span>
-        </button>
+        </Button>
       </PopoverTrigger>
       <PopoverContent
         align="end"
@@ -52,13 +53,13 @@ export function CritiqueModeButton({
           Generation mode
         </div>
         <div className="space-y-2">
-          <button
-            type="button"
+          <Button
+            variant="ghost"
             onClick={() => {
               onQuickModeChange(false);
               onToggle();
             }}
-            className={`w-full flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
+            className={`w-full h-auto flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
               !quickMode ? "border" : "bg-background/40"
             }`}
             style={
@@ -101,14 +102,14 @@ export function CritiqueModeButton({
                 from the previous one.
               </div>
             </div>
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="ghost"
             onClick={() => {
               onQuickModeChange(true);
               onToggle();
             }}
-            className={`w-full flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
+            className={`w-full h-auto flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
               quickMode ? "border" : "bg-background/40"
             }`}
             style={
@@ -141,7 +142,7 @@ export function CritiqueModeButton({
                 Generate all designs in parallel without critique. Faster but less refined.
               </div>
             </div>
-          </button>
+          </Button>
         </div>
       </PopoverContent>
     </Popover>
diff --git a/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx b/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx
index a5be0e45..b56be91b 100644
--- a/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/variations-button.tsx
@@ -1,5 +1,6 @@
 import { Dices, Minus, Plus } from "lucide-react";
 
+import { Button } from "#/shared/components/ui/button";
 import {
   Popover,
   PopoverContent,
@@ -37,8 +38,8 @@ export function VariationsButton({
       if (open && !showVariations) onToggle();
     }}>
       <PopoverTrigger asChild>
-        <button
-          type="button"
+        <Button
+          variant="ghost"
           disabled={disabled}
           data-tour={dataTour}
           className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all ${
@@ -67,7 +68,7 @@ export function VariationsButton({
           {conceptCount !== 1 && (
             <span className="bg-white/20 px-1.5 py-0.5 rounded text-[10px]">{conceptCount}</span>
           )}
-        </button>
+        </Button>
       </PopoverTrigger>
       <PopoverContent
         align="start"
@@ -79,25 +80,27 @@ export function VariationsButton({
           Variations per prompt
         </div>
         <div className="flex items-center justify-between">
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={() => onConceptCountChange(Math.max(1, conceptCount - 1))}
             disabled={conceptCount <= 1}
             className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/50 hover:bg-white/70 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           >
             <Minus className="w-4 h-4 text-gray-600" />
-          </button>
+          </Button>
           <span className="text-lg font-semibold text-gray-800 min-w-[40px] text-center">
             {conceptCount}
           </span>
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={() => onConceptCountChange(Math.min(5, conceptCount + 1))}
             disabled={conceptCount >= 5}
             className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/50 hover:bg-white/70 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           >
             <Plus className="w-4 h-4 text-gray-600" />
-          </button>
+          </Button>
         </div>
       </PopoverContent>
     </Popover>
diff --git a/apps/web/src/widgets/toolbar/ui/toolbar.tsx b/apps/web/src/widgets/toolbar/ui/toolbar.tsx
index 1597d458..5e392d1d 100644
--- a/apps/web/src/widgets/toolbar/ui/toolbar.tsx
+++ b/apps/web/src/widgets/toolbar/ui/toolbar.tsx
@@ -46,7 +46,8 @@ export function Toolbar({
       className="fixed top-4 right-4 z-50 flex items-center rounded-2xl p-1 bg-toolbar-bg-transparent border border-border/40 shadow-[0_8px_32px_oklch(0_0_0_/_0.2),inset_0_1px_0_oklch(0_0_0_/_0.08)] max-w-[calc(100vw-2rem)]"
     >
       <div className="flex items-center gap-1.5 overflow-x-auto">
-        <button
+        <Button
+          variant="ghost"
           onClick={() => setSettingsOpen(true)}
           data-tour="toolbar-settings"
           className="flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] font-medium text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10 transition-all"
@@ -57,7 +58,7 @@ export function Toolbar({
           />
           <span>{modelLabel}</span>
           <Settings className="w-3.5 h-3.5 opacity-60" />
-        </button>
+        </Button>
 
         <Separator orientation="vertical" className="h-5 mx-1" />
       </div>

From 40538284781109270f388e4ff479d6625bf9583e Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Sun, 3 May 2026 22:45:03 +0200
Subject: [PATCH 06/46] refactor(ui): migrate remaining raw HTML primitives to
 shadcn components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete wave 2 migration across apps/web/src/:

- **Settings**: general, provider-list, provider-config-form, provider-selector,
  settings-modal, settings-personalization
- **Export**: export-menu
- **Comments**: comment-input, comment-thread
- **Feedback**: feedback-modal, bug-icon
- **Mode Sidebar**: mode-buttons, preset-button, system-prompt-button
- **Design**: summary-list, summary-dialog
- **Routes**: index.tsx
- **Widgets**: error-boundary, prompt-library, update-notification
- **Context Toolbar**: remix-button

Replaced:
- ~42 raw <button> elements → shadcn <Button>
- 8 inline SVGs → lucide-react icons
- 5 raw <input> elements → shadcn <Input>
- 3 raw <textarea> elements → shadcn <Textarea>
- 2 raw separator <div> patterns → shadcn <Separator>

Exclusions respected:
- settings-sidebar nav buttons (semantic nav)
- design-card comment pin (dynamic STATUS_COLORS)
- @mantine/hooks useClickOutside

Build: 11/11 successful ✅
Verification: All grep sweeps clean ✅
---
 .../features/comments/ui/comment-input.tsx    | 16 +++--
 .../features/comments/ui/comment-thread.tsx   | 23 ++++--
 .../context-toolbar/ui/remix-button.tsx       | 24 ++++---
 .../src/features/design/ui/summary-dialog.tsx |  8 +--
 .../src/features/design/ui/summary-list.tsx   |  6 +-
 .../src/features/export/ui/export-menu.tsx    | 36 ++++++----
 .../web/src/features/feedback/ui/bug-icon.tsx |  7 +-
 .../features/feedback/ui/feedback-modal.tsx   |  8 +--
 .../features/mode-sidebar/ui/mode-buttons.tsx | 12 ++--
 .../mode-sidebar/ui/preset-button.tsx         | 12 ++--
 .../mode-sidebar/ui/system-prompt-button.tsx  | 10 ++-
 .../settings/ui/provider-config-form.tsx      | 48 ++++++-------
 .../features/settings/ui/provider-list.tsx    | 12 ++--
 .../settings/ui/provider-selector.tsx         | 22 +++---
 .../features/settings/ui/settings-general.tsx | 24 ++++---
 .../features/settings/ui/settings-modal.tsx   | 70 +++++++++----------
 .../settings/ui/settings-personalization.tsx  | 12 ++--
 apps/web/src/routes/index.tsx                 | 20 +++---
 apps/web/src/widgets/error-boundary.tsx       | 25 ++-----
 .../widgets/prompt-bar/ui/prompt-library.tsx  | 35 ++++------
 .../UpdateNotification.tsx                    | 49 ++++---------
 21 files changed, 242 insertions(+), 237 deletions(-)

diff --git a/apps/web/src/features/comments/ui/comment-input.tsx b/apps/web/src/features/comments/ui/comment-input.tsx
index 41d63bc5..3f175e1d 100644
--- a/apps/web/src/features/comments/ui/comment-input.tsx
+++ b/apps/web/src/features/comments/ui/comment-input.tsx
@@ -1,5 +1,7 @@
 import { useRef, useState } from "react";
 
+import { Button } from "#/shared/components/ui/button";
+import { Textarea } from "#/shared/components/ui/textarea";
 import { useMountEffect } from "#/shared/utils/use-mount-effect";
 
 interface CommentInputProps {
@@ -42,7 +44,7 @@ export function CommentInput({ position, onSubmit, onCancel }: CommentInputProps
         <div className="text-[11px] font-medium text-gray-400 uppercase tracking-wider mb-2 px-1">
           Revision comment
         </div>
-        <textarea
+        <Textarea
           ref={inputRef}
           value={text}
           onChange={(e) => setText(e.target.value)}
@@ -60,19 +62,23 @@ export function CommentInput({ position, onSubmit, onCancel }: CommentInputProps
           rows={3}
         />
         <div className="flex items-center justify-between mt-2.5 px-0.5">
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={onCancel}
             className="text-[12px] text-gray-400 hover:text-gray-600 px-2.5 py-1.5 rounded-lg hover:bg-black/5 transition-all"
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
             onClick={handleSubmit}
             disabled={!text.trim()}
             className="text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 disabled:opacity-30 px-4 py-1.5 rounded-xl transition-all shadow-sm backdrop-blur-sm"
           >
             Revise ↵
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/web/src/features/comments/ui/comment-thread.tsx b/apps/web/src/features/comments/ui/comment-thread.tsx
index eaa89506..dc877e15 100644
--- a/apps/web/src/features/comments/ui/comment-thread.tsx
+++ b/apps/web/src/features/comments/ui/comment-thread.tsx
@@ -1,5 +1,9 @@
 import { useEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
 
+import { Button } from "#/shared/components/ui/button";
+import { Separator } from "#/shared/components/ui/separator";
+import { Textarea } from "#/shared/components/ui/textarea";
 import type { Comment, CommentMessage } from "#/shared/types";
 
 interface CommentThreadProps {
@@ -59,12 +63,14 @@ export function CommentThread({ comment, onClose, onReply }: CommentThreadProps)
         <span className="text-[11px] font-medium text-gray-400 uppercase tracking-wider">
           Comment #{comment.number}
         </span>
-        <button
+        <Button
+          variant="ghost"
+          size="icon"
           onClick={onClose}
           className="ml-auto text-gray-400 hover:text-gray-600 text-sm leading-none p-1 rounded-lg hover:bg-black/5 transition-colors"
         >
-          ✕
-        </button>
+          <X className="w-4 h-4" />
+        </Button>
       </div>
 
       {/* Thread messages */}
@@ -115,9 +121,10 @@ export function CommentThread({ comment, onClose, onReply }: CommentThreadProps)
       </div>
 
       {/* Reply input */}
-      <div className="p-3 pt-1.5 border-t border-gray-200/30">
+      <Separator />
+      <div className="p-3 pt-1.5">
         <div className="flex items-end gap-2">
-          <textarea
+          <Textarea
             ref={inputRef}
             value={replyText}
             onChange={(e) => setReplyText(e.target.value)}
@@ -132,13 +139,15 @@ export function CommentThread({ comment, onClose, onReply }: CommentThreadProps)
             className="flex-1 text-[13px] text-gray-800 placeholder-gray-400/60 bg-white/60 backdrop-blur-sm rounded-xl px-3 py-2 outline-none resize-none border border-white/40 focus:border-blue-300/60 focus:bg-white/80 transition-all disabled:opacity-50"
             rows={1}
           />
-          <button
+          <Button
+            variant="default"
+            size="sm"
             onClick={handleSubmit}
             disabled={!replyText.trim() || isWorking}
             className="text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 disabled:opacity-30 px-3 py-2 rounded-xl transition-all shadow-sm shrink-0"
           >
             ↵
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/web/src/features/context-toolbar/ui/remix-button.tsx b/apps/web/src/features/context-toolbar/ui/remix-button.tsx
index ca3d9bdd..c5606aa8 100644
--- a/apps/web/src/features/context-toolbar/ui/remix-button.tsx
+++ b/apps/web/src/features/context-toolbar/ui/remix-button.tsx
@@ -12,6 +12,9 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "#/shared/components/ui/tooltip";
+import { Button } from "#/shared/components/ui/button";
+import { Input } from "#/shared/components/ui/input";
+import { Separator } from "#/shared/components/ui/separator";
 import type { DesignIteration } from "#/shared/types";
 
 const REMIX_PRESETS = [
@@ -74,13 +77,15 @@ export function RemixButton({ iteration, onRemix }: RemixButtonProps) {
             onMouseLeave={handleMouseLeave}
             onClick={(e) => e.preventDefault()}
           >
-            <button
-              className="w-8 h-8 flex items-center justify-center rounded-xl text-gray-500 hover:text-gray-700 hover:bg-foreground/10 transition-all"
+            <Button
+              variant="ghost"
+              size="icon"
+              className="w-8 h-8 rounded-xl"
               data-tour="remix-button"
             >
               <Shuffle className="w-4 h-4" />
               <ChevronDown className="w-3 h-3 ml-[-2px]" />
-            </button>
+            </Button>
           </DropdownMenuTrigger>
         </TooltipTrigger>
         <TooltipContent side="top">Remix</TooltipContent>
@@ -106,12 +111,12 @@ export function RemixButton({ iteration, onRemix }: RemixButtonProps) {
             {preset.label}
           </DropdownMenuItem>
         ))}
-        <div className="my-1.5 border-t border-gray-200/30" />
+        <Separator className="my-1.5" />
         <div className="px-2 py-1.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider">
           Custom
         </div>
         <div className="flex gap-1.5 px-1.5 pb-1">
-          <input
+          <Input
             type="text"
             value={customPrompt}
             onChange={(e) => setCustomPrompt(e.target.value)}
@@ -121,15 +126,16 @@ export function RemixButton({ iteration, onRemix }: RemixButtonProps) {
               }
             }}
             placeholder="Try it with..."
-            className="flex-1 px-3 py-2 rounded-lg text-[13px] bg-black/5 outline-none placeholder-gray-400"
+            className="flex-1 text-[13px] bg-black/5 outline-none placeholder-gray-400"
           />
-          <button
+          <Button
             onClick={() => customPrompt.trim() && handleRemix(customPrompt.trim())}
             disabled={!customPrompt.trim()}
-            className="px-3 py-2 rounded-lg text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 disabled:opacity-40 transition-all"
+            size="sm"
+            className="text-[12px] font-medium"
           >
             Go
-          </button>
+          </Button>
         </div>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/apps/web/src/features/design/ui/summary-dialog.tsx b/apps/web/src/features/design/ui/summary-dialog.tsx
index 81dba017..d83750ba 100644
--- a/apps/web/src/features/design/ui/summary-dialog.tsx
+++ b/apps/web/src/features/design/ui/summary-dialog.tsx
@@ -1,5 +1,6 @@
 import { useAtom } from "jotai";
 
+import { Button } from "#/shared/components/ui/button";
 import { useMountEffect } from "#/shared/utils/use-mount-effect";
 
 import { groupsAtom } from "../state/groups-atoms";
@@ -44,12 +45,9 @@ export function SummaryDialog({ groupId, onClose }: SummaryDialogProps) {
 
         <p className="text-[13px] text-gray-500 leading-relaxed">{rationale}</p>
 
-        <button
-          onClick={onClose}
-          className="mt-4 px-4 py-2 bg-black/5 hover:bg-black/10 rounded-xl text-[13px] font-medium text-gray-600 transition-all"
-        >
+        <Button variant="outline" onClick={onClose} className="mt-4">
           Close
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/web/src/features/design/ui/summary-list.tsx b/apps/web/src/features/design/ui/summary-list.tsx
index ef07a545..58afa74b 100644
--- a/apps/web/src/features/design/ui/summary-list.tsx
+++ b/apps/web/src/features/design/ui/summary-list.tsx
@@ -1,6 +1,7 @@
 import { useAtom } from "jotai";
 import { useState } from "react";
 
+import { Button } from "#/shared/components/ui/button";
 import { groupsAtom } from "../state/groups-atoms";
 import { SummaryDialog } from "./summary-dialog";
 
@@ -29,7 +30,8 @@ export function SummaryList() {
           const title = group.summary?.title ?? "Generating summary...";
 
           return (
-            <button
+            <Button
+              variant="ghost"
               key={group.id}
               onClick={() => setSelectedGroupId(group.id)}
               className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-left hover:bg-black/5 rounded-xl transition-colors"
@@ -46,7 +48,7 @@ export function SummaryList() {
               >
                 {title}
               </span>
-            </button>
+            </Button>
           );
         })}
       </div>
diff --git a/apps/web/src/features/export/ui/export-menu.tsx b/apps/web/src/features/export/ui/export-menu.tsx
index 8ce56534..19ce3046 100644
--- a/apps/web/src/features/export/ui/export-menu.tsx
+++ b/apps/web/src/features/export/ui/export-menu.tsx
@@ -9,6 +9,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "#/shared/components/ui/dropdown-menu";
+import { Separator } from "#/shared/components/ui/separator";
+import { Button } from "#/shared/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "#/shared/components/ui/tooltip";
 
 type ExportFormat = "svg" | "tailwind" | "react" | "png" | "jpg" | "copy-image";
@@ -253,10 +255,14 @@ export function ExportMenu({
               onMouseLeave={handleMouseLeave}
               onClick={(e) => e.preventDefault()}
             >
-              <button className="w-8 h-8 flex items-center justify-center rounded-xl text-gray-500 hover:text-gray-700 hover:bg-foreground/10 transition-all">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="w-8 h-8 flex items-center justify-center rounded-xl text-gray-500 hover:text-gray-700 transition-all"
+              >
                 <Download className="w-4 h-4" />
                 <ChevronDown className="w-3 h-3 ml-[-2px]" />
-              </button>
+              </Button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
           <TooltipContent side="top">Export</TooltipContent>
@@ -287,7 +293,7 @@ export function ExportMenu({
               )}
             </DropdownMenuItem>
           ))}
-          <div className="my-1 border-t border-gray-200/30" />
+          <Separator className="my-1" />
           <div className="px-2.5 py-1.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider">
             Code
           </div>
@@ -324,24 +330,30 @@ export function ExportMenu({
               {ALL_FORMATS.find((f) => f.id === preview.format)?.label} Export
             </span>
             <div className="flex items-center gap-1">
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={handleCopy}
-                className="text-[11px] font-medium text-gray-500 hover:text-gray-700 px-2.5 py-1 rounded-lg hover:bg-black/5 transition-all"
+                className="text-[11px] font-medium text-gray-500 hover:text-gray-700"
               >
                 Copy
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="default"
+                size="sm"
                 onClick={handleDownload}
-                className="text-[11px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-2.5 py-1 rounded-lg transition-all"
+                className="text-[11px] font-medium bg-blue-500/90 hover:bg-blue-500"
               >
                 Download
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setPreview(null)}
-                className="text-gray-400 hover:text-gray-600 px-1.5 py-1 rounded-lg hover:bg-black/5 ml-1 transition-all"
+                className="text-gray-400 hover:text-gray-600 ml-1"
               >
                 ✕
-              </button>
+              </Button>
             </div>
           </div>
           <pre className="p-4 text-[12px] leading-relaxed text-gray-700 font-mono overflow-auto max-h-[320px] whitespace-pre-wrap break-all">
diff --git a/apps/web/src/features/feedback/ui/bug-icon.tsx b/apps/web/src/features/feedback/ui/bug-icon.tsx
index 41cbe2b1..ce3801a0 100644
--- a/apps/web/src/features/feedback/ui/bug-icon.tsx
+++ b/apps/web/src/features/feedback/ui/bug-icon.tsx
@@ -1,19 +1,22 @@
 import { useSetAtom } from "jotai";
 import { Bug } from "lucide-react";
 
+import { Button } from "#/shared/components/ui/button";
 import { feedbackModalOpenAtom } from "../store";
 
 export function BugIcon() {
   const setOpen = useSetAtom(feedbackModalOpenAtom);
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="icon"
       onClick={() => setOpen(true)}
       title="Report a bug or share feedback"
       aria-label="Report a bug or share feedback"
       className="w-8 h-8 flex items-center justify-center rounded-xl transition-all text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
     >
       <Bug className="w-4 h-4" />
-    </button>
+    </Button>
   );
 }
diff --git a/apps/web/src/features/feedback/ui/feedback-modal.tsx b/apps/web/src/features/feedback/ui/feedback-modal.tsx
index b212a04f..0c634283 100644
--- a/apps/web/src/features/feedback/ui/feedback-modal.tsx
+++ b/apps/web/src/features/feedback/ui/feedback-modal.tsx
@@ -230,8 +230,9 @@ export function FeedbackModal() {
                 {/* Type selector tabs */}
                 <div className="flex rounded-lg border border-border bg-muted/30 p-0.5 gap-0.5">
                   {TAB_CONFIG.map((tab) => (
-                    <button
+                    <Button
                       key={tab.id}
+                      variant="ghost"
                       onClick={() => setType(tab.id)}
                       className={`flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-md text-xs font-medium transition-all ${
                         formData.type === tab.id
@@ -241,7 +242,7 @@ export function FeedbackModal() {
                     >
                       {tab.icon}
                       {tab.label}
-                    </button>
+                    </Button>
                   ))}
                 </div>
 
@@ -277,7 +278,7 @@ export function FeedbackModal() {
                     Description
                     <span className="text-destructive ml-0.5">*</span>
                   </Label>
-                  <textarea
+                  <Textarea
                     id="feedback-description"
                     value={formData.description}
                     onChange={(e) => updateField("description", e.target.value)}
@@ -285,7 +286,6 @@ export function FeedbackModal() {
                     maxLength={5000}
                     rows={5}
                     aria-invalid={!!validationErrors.description}
-                    className="w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 resize-none"
                   />
                   <div className="flex justify-between">
                     {validationErrors.description ? (
diff --git a/apps/web/src/features/mode-sidebar/ui/mode-buttons.tsx b/apps/web/src/features/mode-sidebar/ui/mode-buttons.tsx
index c00191ef..c706623e 100644
--- a/apps/web/src/features/mode-sidebar/ui/mode-buttons.tsx
+++ b/apps/web/src/features/mode-sidebar/ui/mode-buttons.tsx
@@ -1,5 +1,7 @@
 import { PropsWithChildren } from "react";
 
+import { Button } from "#/shared/components/ui/button";
+
 export type ModeType = "select" | "frame" | "component";
 
 export interface ModeButtonProps extends PropsWithChildren {
@@ -29,16 +31,16 @@ const ModeButton = ({ active, title, children, color, onClick }: ModeButtonProps
   };
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="icon"
       onClick={onClick}
       title={title}
-      className={`w-8 h-8 flex items-center justify-center rounded-xl transition-all ${
-        active ? "" : "text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"
-      }`}
+      className={`w-8 h-8 ${active ? "" : "text-toolbar-text hover:text-toolbar-text hover:bg-foreground/10"}`}
       style={active ? activeStyles[color] : undefined}
     >
       {children}
-    </button>
+    </Button>
   );
 };
 
diff --git a/apps/web/src/features/mode-sidebar/ui/preset-button.tsx b/apps/web/src/features/mode-sidebar/ui/preset-button.tsx
index 66e9837a..9f56acfd 100644
--- a/apps/web/src/features/mode-sidebar/ui/preset-button.tsx
+++ b/apps/web/src/features/mode-sidebar/ui/preset-button.tsx
@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import { useCallback, useMemo, useRef } from "react";
 
+import { Button } from "#/shared/components/ui/button";
 import { SYSTEM_PROMPT_PRESETS } from "#/features/settings/lib/presets";
 import { settingsAtom, updateSettingsAtom } from "#/features/settings/state/settings-atoms";
 import { useClickOutside } from "@mantine/hooks";
@@ -67,8 +68,10 @@ export function PresetButton() {
 
   return (
     <div className="relative">
-      <button
+      <Button
         ref={buttonRef}
+        variant="ghost"
+        size="icon"
         onClick={handleToggle}
         aria-label="Designer Preset"
         className={`flex items-center justify-center w-8 h-8 rounded-xl transition-all ${
@@ -78,7 +81,7 @@ export function PresetButton() {
         }`}
       >
         <CurrentIcon className="w-5 h-5" />
-      </button>
+      </Button>
 
       {isOpen && (
         <div
@@ -94,8 +97,9 @@ export function PresetButton() {
             {SYSTEM_PROMPT_PRESETS.map((preset) => {
               const PresetIcon = getPresetIcon(preset.icon);
               return (
-                <button
+                <Button
                   key={preset.id}
+                  variant="ghost"
                   onClick={() => handlePresetClick(preset.id)}
                   className={`flex items-center gap-2 text-left text-[12px] font-medium px-3 py-2 rounded-lg transition-all ${
                     settings.systemPromptPreset === preset.id
@@ -105,7 +109,7 @@ export function PresetButton() {
                 >
                   <PresetIcon className="w-4 h-4 shrink-0" />
                   {preset.label}
-                </button>
+                </Button>
               );
             })}
           </div>
diff --git a/apps/web/src/features/mode-sidebar/ui/system-prompt-button.tsx b/apps/web/src/features/mode-sidebar/ui/system-prompt-button.tsx
index 4bc82d17..d588a318 100644
--- a/apps/web/src/features/mode-sidebar/ui/system-prompt-button.tsx
+++ b/apps/web/src/features/mode-sidebar/ui/system-prompt-button.tsx
@@ -2,6 +2,8 @@ import { useAtom } from "jotai";
 import { MessageSquare } from "lucide-react";
 import { useCallback, useRef } from "react";
 
+import { Button } from "#/shared/components/ui/button";
+import { Textarea } from "#/shared/components/ui/textarea";
 import { settingsAtom, updateSettingsAtom } from "#/features/settings/state/settings-atoms";
 import { useClickOutside } from "@mantine/hooks";
 
@@ -36,8 +38,10 @@ export function SystemPromptButton() {
 
   return (
     <div className="relative">
-      <button
+      <Button
         ref={buttonRef}
+        variant="ghost"
+        size="icon"
         onClick={handleToggle}
         aria-label="System Prompt"
         className={`flex items-center justify-center w-8 h-8 rounded-xl transition-all ${
@@ -47,7 +51,7 @@ export function SystemPromptButton() {
         }`}
       >
         <MessageSquare className="w-5 h-5" />
-      </button>
+      </Button>
 
       {isOpen && (
         <div
@@ -59,7 +63,7 @@ export function SystemPromptButton() {
             <span className="text-sm font-semibold text-gray-800">System Prompt</span>
           </div>
 
-          <textarea
+          <Textarea
             value={settings.systemPrompt}
             onChange={handleChange}
             placeholder='Add custom instructions for the AI designer...\n\ne.g. "You are a Facebook ad designer. Use 1200x628, minimal text, strong visual hierarchy..."'
diff --git a/apps/web/src/features/settings/ui/provider-config-form.tsx b/apps/web/src/features/settings/ui/provider-config-form.tsx
index 6419e82e..098ba2c8 100644
--- a/apps/web/src/features/settings/ui/provider-config-form.tsx
+++ b/apps/web/src/features/settings/ui/provider-config-form.tsx
@@ -1,5 +1,9 @@
 import { useCallback, useState } from "react";
 
+import { Button } from "#/shared/components/ui/button";
+import { Input } from "#/shared/components/ui/input";
+import { Check } from "lucide-react";
+
 import type { ModelInfo, ProviderConfig, ProviderType } from "../types";
 
 export interface TestProvider {
@@ -115,7 +119,7 @@ export default function ProviderConfigForm({
         <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
           Provider ID
         </label>
-        <input
+        <Input
           type="text"
           value={id}
           onChange={(e) => setId(e.target.value)}
@@ -135,8 +139,9 @@ export default function ProviderConfigForm({
         </label>
         <div className="space-y-2">
           {API_TYPES.map((provider) => (
-            <button
+            <Button
               key={provider.id}
+              variant="ghost"
               onClick={() => setApiType(provider.id)}
               className={`w-full flex items-center justify-between px-5 py-3.5 rounded-xl text-left transition-all ${
                 apiType === provider.id
@@ -153,19 +158,9 @@ export default function ProviderConfigForm({
                 </div>
               </div>
               {apiType === provider.id && (
-                <svg
-                  className="w-4 h-4 text-blue-500 shrink-0"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
+                <Check className="w-4 h-4 text-blue-500 shrink-0" />
               )}
-            </button>
+            </Button>
           ))}
         </div>
       </div>
@@ -176,7 +171,7 @@ export default function ProviderConfigForm({
           <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
             Base URL
           </label>
-          <input
+          <Input
             type="text"
             value={baseUrl}
             onChange={(e) => setBaseUrl(e.target.value)}
@@ -192,25 +187,28 @@ export default function ProviderConfigForm({
           API Key
         </label>
         <div className="flex gap-2">
-          <input
+          <Input
             type={showKey ? "text" : "password"}
             value={apiKey}
             onChange={(e) => setApiKey(e.target.value)}
             placeholder="sk-ant-..."
             className="flex-1 text-[13px] text-gray-800 placeholder-gray-400/50 bg-white/70 backdrop-blur-sm rounded-xl px-5 py-3.5 outline-none border border-white/50 focus:border-blue-300/60 focus:bg-white/90 transition-all font-mono"
           />
-          <button
+          <Button
+            variant="outline"
+            size="sm"
             onClick={() => setShowKey(!showKey)}
             className="text-[12px] font-medium text-gray-600 bg-white/60 hover:bg-white/80 px-4 py-2.5 rounded-xl transition-all border border-white/50"
           >
             {showKey ? "Hide" : "Show"}
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Test Button */}
       <div className="flex gap-2">
-        <button
+        <Button
+          variant="default"
           onClick={handleTest}
           disabled={!isValidId(id) || isTesting}
           className={`text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-4 py-2.5 rounded-xl transition-all ${
@@ -218,7 +216,7 @@ export default function ProviderConfigForm({
           }`}
         >
           {isTesting ? "Testing..." : "Test Provider"}
-        </button>
+        </Button>
         {testResult && (
           <span className="text-[12px] font-medium text-green-600 bg-green-50/80 px-3 py-2.5 rounded-xl">
             Found {testResult.models.length} models
@@ -233,7 +231,8 @@ export default function ProviderConfigForm({
 
       {/* Action Buttons */}
       <div className="flex gap-2 pt-4">
-        <button
+        <Button
+          variant="default"
           onClick={handleSave}
           disabled={!testResult || testError !== null}
           className={`text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-4 py-2.5 rounded-xl transition-all ${
@@ -241,13 +240,14 @@ export default function ProviderConfigForm({
           }`}
         >
           Save Provider
-        </button>
-        <button
+        </Button>
+        <Button
+          variant="outline"
           onClick={handleCancel}
           className="text-[12px] font-medium text-gray-600 bg-white/60 hover:bg-white/80 px-4 py-2.5 rounded-xl transition-all border border-white/50"
         >
           Cancel
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/web/src/features/settings/ui/provider-list.tsx b/apps/web/src/features/settings/ui/provider-list.tsx
index 0761b122..a477ec86 100644
--- a/apps/web/src/features/settings/ui/provider-list.tsx
+++ b/apps/web/src/features/settings/ui/provider-list.tsx
@@ -1,3 +1,5 @@
+import { Button } from "#/shared/components/ui/button";
+import { Key } from "lucide-react";
 import type { ProviderConfig } from "#/features/settings/types";
 
 interface ProviderListProps {
@@ -42,9 +44,7 @@ export default function ProviderList({ providers, onRemove }: ProviderListProps)
                         : "Never tested"}
                     </span>
                     <span className="text-[11px] text-teal-600 flex items-center gap-1">
-                      <svg className="w-3 h-3" viewBox="0 0 16 16" fill="currentColor">
-                        <path d="M8 1a4.5 4.5 0 0 0-4.5 4.5V7H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.5V5.5A4.5 4.5 0 0 0 8 1zm3 6H5V5.5a3 3 0 1 1 6 0V7z" />
-                      </svg>
+                      <Key className="w-3 h-3" />
                       From environment
                     </span>
                   </div>
@@ -95,12 +95,14 @@ export default function ProviderList({ providers, onRemove }: ProviderListProps)
               </div>
             </div>
 
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={() => onRemove(provider.id)}
               className="text-[11px] text-red-500 hover:text-red-600 ml-3 px-2 py-1 rounded transition-colors"
             >
               Remove
-            </button>
+            </Button>
           </div>
         </div>
       ))}
diff --git a/apps/web/src/features/settings/ui/provider-selector.tsx b/apps/web/src/features/settings/ui/provider-selector.tsx
index 02616a0b..8edd8de1 100644
--- a/apps/web/src/features/settings/ui/provider-selector.tsx
+++ b/apps/web/src/features/settings/ui/provider-selector.tsx
@@ -1,3 +1,6 @@
+import { Check } from "lucide-react";
+
+import { Button } from "#/shared/components/ui/button";
 import type { ProviderType } from "@app/core/ai/providers";
 
 interface ProviderSelectorProps {
@@ -29,10 +32,11 @@ export default function ProviderSelector({
   return (
     <div className="space-y-2">
       {providers.map((provider) => (
-        <button
+        <Button
           key={provider.id}
-          onClick={() => !disabled && onProviderChange(provider.id)}
+          variant="ghost"
           disabled={disabled}
+          onClick={() => onProviderChange(provider.id)}
           className={`w-full flex items-center justify-between px-5 py-3.5 rounded-xl text-left transition-all ${
             disabled
               ? "opacity-35 cursor-not-allowed bg-gray-100/30 border border-transparent"
@@ -50,19 +54,9 @@ export default function ProviderSelector({
             </div>
           </div>
           {providerType === provider.id && !disabled && (
-            <svg
-              className="w-4 h-4 text-blue-500 shrink-0"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <polyline points="20 6 9 17 4 12" />
-            </svg>
+            <Check className="w-4 h-4 text-blue-500 shrink-0" />
           )}
-        </button>
+        </Button>
       ))}
     </div>
   );
diff --git a/apps/web/src/features/settings/ui/settings-general.tsx b/apps/web/src/features/settings/ui/settings-general.tsx
index 6694bfa7..a557b8eb 100644
--- a/apps/web/src/features/settings/ui/settings-general.tsx
+++ b/apps/web/src/features/settings/ui/settings-general.tsx
@@ -57,14 +57,16 @@ function ApiKeyInput({
           placeholder={placeholder}
           className="pr-10"
         />
-        <button
+        <Button
+          variant="ghost"
+          size="icon"
           type="button"
           onClick={() => setShow(!show)}
           className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
           aria-label={show ? "Hide API key" : "Show API key"}
         >
           {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-        </button>
+        </Button>
       </div>
       {error && <p className="text-[11px] text-red-500">{error}</p>}
     </div>
@@ -142,14 +144,16 @@ function AddProviderForm({
         <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
           New Provider
         </Label>
-        <button
+        <Button
+          variant="ghost"
+          size="icon"
           type="button"
           onClick={onCancel}
           className="text-muted-foreground hover:text-foreground transition-colors"
           aria-label="Cancel"
         >
           <X className="size-4" />
-        </button>
+        </Button>
       </div>
 
       <div className="space-y-2">
@@ -238,13 +242,15 @@ function AddProviderForm({
         <Button size="sm" type="button" onClick={handleSave} disabled={!canSave}>
           Save
         </Button>
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
           onClick={onCancel}
           className="text-xs text-muted-foreground hover:text-foreground transition-colors"
         >
           Cancel
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -464,14 +470,16 @@ export function SettingsGeneral({ settings, onUpdate, onOpenChange }: SettingsGe
                     </Badge>
                   </div>
                   {!provider.isEnv && (
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="icon"
                       type="button"
                       onClick={() => handleRemoveProvider(provider.id)}
                       className="text-muted-foreground hover:text-red-500 transition-colors"
                       aria-label={`Remove ${provider.id}`}
                     >
                       <X className="size-4" />
-                    </button>
+                    </Button>
                   )}
                 </div>
                 <div className="flex items-center gap-1 text-xs text-muted-foreground mt-0.5">
diff --git a/apps/web/src/features/settings/ui/settings-modal.tsx b/apps/web/src/features/settings/ui/settings-modal.tsx
index 10a12ede..0b55826c 100644
--- a/apps/web/src/features/settings/ui/settings-modal.tsx
+++ b/apps/web/src/features/settings/ui/settings-modal.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
 
+import { Button } from "#/shared/components/ui/button";
+import { Input } from "#/shared/components/ui/input";
+import { Separator } from "#/shared/components/ui/separator";
+import { X } from "lucide-react";
+
 import type { Settings } from "#/features/settings/types";
 import { useMountEffect } from "#/shared/utils/use-mount-effect";
 
@@ -99,22 +104,14 @@ export function SettingsModal({
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-gray-200/30">
           <h2 className="text-[17px] font-semibold text-gray-800">Settings</h2>
-          <button
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 p-1.5 rounded-lg hover:bg-black/5 transition-all"
+            aria-label="Close settings"
           >
-            <svg
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
+            <X className="h-4 w-4" />
+          </Button>
         </div>
 
         <div className="p-6 space-y-8">
@@ -153,21 +150,14 @@ export function SettingsModal({
             <div className="space-y-4">
               <ProviderList providers={settings.providers} onRemove={handleRemoveProvider} />
 
-              {settings.providers.length === 0 ? (
-                <button
-                  onClick={() => setShowAddProvider(true)}
-                  className="text-[12px] font-medium text-blue-500 hover:text-blue-600 px-4 py-2.5 rounded-xl transition-all border border-blue-300/40 bg-blue-50/30"
-                >
-                  Add Provider
-                </button>
-              ) : (
-                <button
-                  onClick={() => setShowAddProvider(true)}
-                  className="text-[12px] font-medium text-blue-500 hover:text-blue-600 px-4 py-2.5 rounded-xl transition-all border border-blue-300/40 bg-blue-50/30"
-                >
-                  Add Provider
-                </button>
-              )}
+              <Button
+                variant="ghost"
+                size="default"
+                onClick={() => setShowAddProvider(true)}
+                className="text-[12px] font-medium text-blue-500 hover:text-blue-600 px-4 py-2.5 rounded-xl transition-all border border-blue-300/40 bg-blue-50/30"
+              >
+                Add Provider
+              </Button>
 
               {showAddProvider && (
                 <div className="bg-white/40 rounded-xl p-4 border border-white/50">
@@ -265,7 +255,7 @@ export function SettingsModal({
         </div>
 
         {/* Footer */}
-        <div className="p-6 border-t border-gray-200/30 flex items-center justify-between">
+        <div className="flex items-center justify-between p-6">
           <span className="text-[11px] text-gray-500">
             {settings.model.split("/")[1] || settings.model}
             {settings.ideateModel &&
@@ -273,7 +263,8 @@ export function SettingsModal({
             {(settings.unsplashKey || settings.openaiKey || settings.geminiKey) &&
               ` · 🖼️ ${[settings.unsplashKey && "Unsplash", settings.openaiKey && "DALL·E", settings.geminiKey && "Gemini"].filter(Boolean).join(", ")}`}
           </span>
-          <button
+          <Button
+            variant="ghost"
             onClick={() => {
               // Auto-save keys if changed
               const updates: Partial<Settings> = {};
@@ -287,8 +278,9 @@ export function SettingsModal({
             className="text-[13px] font-medium text-gray-600 hover:text-gray-800 px-4 py-2 rounded-xl hover:bg-black/5 transition-all"
           >
             Done
-          </button>
+          </Button>
         </div>
+        <Separator />
       </div>
     </div>
   );
@@ -341,7 +333,7 @@ function ImageKeyField({
       </div>
       <p className="text-[10px] text-gray-400 mb-2">{desc}</p>
       <div className="flex gap-1.5">
-        <input
+        <Input
           type="password"
           value={value}
           onChange={(e) => onChange(e.target.value)}
@@ -349,21 +341,25 @@ function ImageKeyField({
           className="flex-1 text-[12px] text-gray-800 placeholder-gray-300 bg-white/60 rounded-lg px-3 py-2 outline-none border border-gray-200/40 focus:border-blue-300/50 transition-all font-mono"
         />
         {isChanged && value.trim() && (
-          <button
+          <Button
+            variant="default"
+            size="sm"
             onClick={onSave}
             className="text-[11px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-3 py-1.5 rounded-lg transition-all shrink-0"
           >
             Save
-          </button>
+          </Button>
         )}
       </div>
       {isSaved && (
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           onClick={onRemove}
           className="mt-1.5 text-[10px] text-gray-400 hover:text-red-500 transition-colors"
         >
           Remove key
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/apps/web/src/features/settings/ui/settings-personalization.tsx b/apps/web/src/features/settings/ui/settings-personalization.tsx
index d9caee92..90dd9c14 100644
--- a/apps/web/src/features/settings/ui/settings-personalization.tsx
+++ b/apps/web/src/features/settings/ui/settings-personalization.tsx
@@ -1,5 +1,6 @@
 import { Globe, Monitor, Moon, Palette, Sun, Type } from "lucide-react";
 
+import { Button } from "#/shared/components/ui/button";
 import { Label } from "#/shared/components/ui/label";
 import {
   Select,
@@ -33,18 +34,19 @@ export function SettingsPersonalization({ settings, onUpdate }: SettingsPersonal
         </h3>
         <div className="flex gap-2 p-1 bg-muted rounded-xl">
           {THEME_OPTIONS.map((option) => (
-            <button
+            <Button
               key={option.value}
+              variant={settings.theme === option.value ? "secondary" : "ghost"}
               onClick={() => onUpdate({ theme: option.value })}
-              className={`flex-1 flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg text-[13px] font-medium transition-all ${
+              className={`flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-[13px] font-medium ${
                 settings.theme === option.value
-                  ? "bg-background text-foreground shadow-sm border border-border"
-                  : "text-muted-foreground hover:text-foreground hover:bg-muted/80"
+                  ? "shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
               }`}
             >
               {option.icon}
               {option.label}
-            </button>
+            </Button>
           ))}
         </div>
       </div>
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 9c9689ee..84baeed0 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -42,6 +42,7 @@ const SettingsModal = lazy(() =>
 );
 import { useProbeModels } from "#/features/settings/hooks/use-probe-models";
 import { isOwnKeyAtom, loadedAtom, settingsAtom } from "#/features/settings/state/settings-atoms";
+import { Button } from "#/shared/components/ui/button";
 import { exportCanvas, openImportDialog } from "#/lib/export";
 import { m } from "#/lib/i18n";
 import { useMountEffect } from "#/shared/utils/use-mount-effect";
@@ -245,22 +246,22 @@ export default function Home() {
             </h3>
             <p className="text-[13px] text-gray-500 mb-6">{m.dialog.resetDescription()}</p>
             <div className="flex items-center justify-center gap-3">
-              <button
+              <Button
+                variant="ghost"
                 onClick={() => setShowResetConfirm(false)}
-                className="text-[13px] font-medium text-gray-600 hover:text-gray-800 px-5 py-2.5 rounded-xl hover:bg-black/5 transition-all"
               >
                 Cancel
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="destructive"
                 onClick={() => {
                   resetSession();
                   canvas.resetView();
                   setShowResetConfirm(false);
                 }}
-                className="text-[13px] font-medium text-white bg-red-500/90 hover:bg-red-500 px-5 py-2.5 rounded-xl transition-all"
               >
                 Clear Canvas
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -303,13 +304,14 @@ export default function Home() {
 
       {(!isOwnKey || !settings.model) && !showWelcome && (
         <div className="fixed top-4 left-1/2 -translate-x-1/2 z-40">
-          <button
+          <Button
+            variant="secondary"
+            className="flex items-center gap-2 bg-amber-500/10 backdrop-blur-xl border border-amber-300/30 text-amber-700 hover:bg-amber-500/20 shadow-sm"
             onClick={() => setShowSettings(true)}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-amber-500/10 backdrop-blur-xl border border-amber-300/30 text-[12px] font-medium text-amber-700 hover:bg-amber-500/20 transition-all shadow-sm"
           >
             <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
             {m.banner.addApiKey()}
-          </button>
+          </Button>
         </div>
       )}
     </div>
diff --git a/apps/web/src/widgets/error-boundary.tsx b/apps/web/src/widgets/error-boundary.tsx
index f0dddc7d..9f300a21 100644
--- a/apps/web/src/widgets/error-boundary.tsx
+++ b/apps/web/src/widgets/error-boundary.tsx
@@ -3,6 +3,9 @@
 import { getLogger } from "@app/logger";
 import React from "react";
 
+import { AlertTriangle } from "lucide-react";
+import { Button } from "#/shared/components/ui/button";
+
 interface ErrorBoundaryProps {
   children: React.ReactNode;
   fallback?: React.ReactNode;
@@ -46,33 +49,17 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       return (
         <div className="flex flex-col items-center justify-center gap-3 p-6 text-center">
           <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-red-500"
-            >
-              <circle cx="12" cy="12" r="10" />
-              <line x1="12" x2="12" y1="8" y2="12" />
-              <line x1="12" x2="12.01" y1="16" y2="16" />
-            </svg>
+            <AlertTriangle className="w-8 h-8 text-red-500" />
           </div>
           <h2 className="text-lg font-semibold text-foreground">Something went wrong</h2>
           <p className="max-w-sm text-sm text-muted-foreground">
             {this.state.error?.message ?? "An unexpected error occurred."}
           </p>
-          <button
+          <Button
             onClick={() => this.setState({ error: null, hasError: false })}
-            className="mt-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             Try again
-          </button>
+          </Button>
         </div>
       );
     }
diff --git a/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx b/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx
index dba1ca12..4a4efaff 100644
--- a/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { Button } from "#/shared/components/ui/button";
+import { X } from "lucide-react";
 
 interface PromptLibraryProps {
   open: boolean;
@@ -119,22 +121,9 @@ export function PromptLibrary({ open, onClose, onUsePrompt }: PromptLibraryProps
             <span className="text-base">💡</span>
             <h2 className="text-[15px] font-semibold text-gray-800">Prompt Library</h2>
           </div>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 p-1.5 rounded-lg hover:bg-black/5 transition-all"
-          >
-            <svg
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-4 h-4" />
+          </Button>
         </div>
 
         {/* Content */}
@@ -162,18 +151,20 @@ export function PromptLibrary({ open, onClose, onUsePrompt }: PromptLibraryProps
                       </div>
                     </div>
                     <div className="flex items-center gap-1.5 mt-2.5 opacity-0 group-hover/item:opacity-100 transition-opacity">
-                      <button
+                      <Button
+                        variant="default"
+                        size="sm"
                         onClick={() => handleUse(p.text)}
-                        className="text-[11px] font-medium text-white bg-primary/90 hover:bg-primary px-3 py-1.5 rounded-lg transition-all"
                       >
                         Use prompt →
-                      </button>
-                      <button
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
                         onClick={() => handleCopy(p.text)}
-                        className="text-[11px] font-medium text-gray-500 hover:text-gray-700 px-3 py-1.5 rounded-lg hover:bg-black/5 transition-all"
                       >
                         {copied === p.text ? "Copied ✓" : "Copy"}
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 ))}
diff --git a/apps/web/src/widgets/update-notification/UpdateNotification.tsx b/apps/web/src/widgets/update-notification/UpdateNotification.tsx
index 4956f58b..3a49ea4c 100644
--- a/apps/web/src/widgets/update-notification/UpdateNotification.tsx
+++ b/apps/web/src/widgets/update-notification/UpdateNotification.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { Button } from "#/shared/components/ui/button";
+import { Moon, X } from "lucide-react";
 
 type UpdaterState =
   | { state: "idle" }
@@ -162,17 +164,7 @@ function UpdateBar({ state, onDismiss, onDownload, onApply }: UpdateBarProps): R
       {isDownloading ? (
         <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
       ) : (
-        <svg
-          className="w-4 h-4 opacity-80"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-        </svg>
+        <Moon className="w-4 h-4 opacity-80" />
       )}
 
       <span className="tabular-nums">
@@ -192,42 +184,27 @@ function UpdateBar({ state, onDismiss, onDownload, onApply }: UpdateBarProps): R
 
       <div className="flex items-center gap-2 ml-2">
         {isAvailable && (
-          <button
-            onClick={onDownload}
-            className="px-3 py-1 rounded-md text-xs font-semibold transition-colors bg-primary text-primary-foreground hover:bg-primary/90"
-          >
+          <Button variant="default" size="sm" onClick={onDownload}>
             Download
-          </button>
+          </Button>
         )}
 
         {isReady && (
-          <button
-            onClick={onApply}
-            className="px-3 py-1 rounded-md text-xs font-semibold transition-colors bg-accent text-accent-foreground hover:bg-accent/90"
-          >
+          <Button variant="secondary" size="sm" onClick={onApply}>
             Restart &amp; Install
-          </button>
+          </Button>
         )}
 
         {isAvailable && (
-          <button
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={onDismiss}
             aria-label="Dismiss update notification"
-            className="p-1 rounded-md opacity-60 hover:opacity-100 hover:bg-foreground/10 transition-colors"
+            className="opacity-60 hover:opacity-100"
           >
-            <svg
-              className="w-3.5 h-3.5"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
+            <X className="w-4 h-4" />
+          </Button>
         )}
       </div>
     </div>

From 3bc98d314785f4bf4c4fbe69faa2d674af8ba97a Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Mon, 4 May 2026 11:04:28 +0200
Subject: [PATCH 07/46] refactor(comments): use default exports for lazy
 loading

Convert named exports to default exports to support direct file imports
in lazy-loaded components.
---
 apps/web/src/features/comments/ui/comment-input.tsx  | 6 ++++--
 apps/web/src/features/comments/ui/comment-thread.tsx | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/features/comments/ui/comment-input.tsx b/apps/web/src/features/comments/ui/comment-input.tsx
index 3f175e1d..4444cb07 100644
--- a/apps/web/src/features/comments/ui/comment-input.tsx
+++ b/apps/web/src/features/comments/ui/comment-input.tsx
@@ -10,7 +10,7 @@ interface CommentInputProps {
   onCancel: () => void;
 }
 
-export function CommentInput({ position, onSubmit, onCancel }: CommentInputProps) {
+const CommentInput = ({ position, onSubmit, onCancel }: CommentInputProps) => {
   const [text, setText] = useState("");
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -83,4 +83,6 @@ export function CommentInput({ position, onSubmit, onCancel }: CommentInputProps
       </div>
     </div>
   );
-}
+};
+
+export default CommentInput;
diff --git a/apps/web/src/features/comments/ui/comment-thread.tsx b/apps/web/src/features/comments/ui/comment-thread.tsx
index dc877e15..92c2864d 100644
--- a/apps/web/src/features/comments/ui/comment-thread.tsx
+++ b/apps/web/src/features/comments/ui/comment-thread.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
 import { Button } from "#/shared/components/ui/button";
 import { Separator } from "#/shared/components/ui/separator";
@@ -12,7 +12,7 @@ interface CommentThreadProps {
   onReply: (text: string) => void;
 }
 
-export function CommentThread({ comment, onClose, onReply }: CommentThreadProps) {
+const CommentThread = ({ comment, onClose, onReply }: CommentThreadProps) => {
   const [replyText, setReplyText] = useState("");
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const threadRef = useRef<HTMLDivElement>(null);
@@ -152,4 +152,6 @@ export function CommentThread({ comment, onClose, onReply }: CommentThreadProps)
       </div>
     </div>
   );
-}
+};
+
+export default CommentThread;

From 529d6610435d6eea98cde805511da5e719450938 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Mon, 4 May 2026 11:04:43 +0200
Subject: [PATCH 08/46] refactor(routes): use direct file imports for lazy
 components

Replace barrel exports with direct file imports for comment components.
Reorganize imports for clarity.
---
 apps/web/src/routes/index.tsx | 54 +++++++++++++----------------------
 1 file changed, 20 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 84baeed0..2da71740 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -6,13 +6,6 @@ import { lazy, Suspense, useCallback, useState } from "react";
 import { useCanvas } from "#/features/canvas";
 import { CanvasHUD } from "#/features/canvas-hud";
 import { useCommentHandlers } from "#/features/comments/hooks/use-comment-handlers";
-
-const CommentInput = lazy(() =>
-  import("#/features/comments").then((m) => ({ default: m.CommentInput }))
-);
-const CommentThread = lazy(() =>
-  import("#/features/comments").then((m) => ({ default: m.CommentThread }))
-);
 import { useGenerationPipeline } from "#/features/design/hooks/use-generation-pipeline";
 import {
   showGitHashAtom,
@@ -23,35 +16,34 @@ import {
 import { groupsAtom, hydrateGroups, resetSessionAtom } from "#/features/design/state/groups-atoms";
 import { canvasImagesAtom, hydrateImages } from "#/features/design/state/images-atoms";
 import { SummaryList } from "#/features/design/ui/summary-list";
-const FeedbackModal = lazy(() =>
-  import("#/features/feedback").then((m) => ({ default: m.FeedbackModal }))
-);
-import {
-  showTutorialAtom,
-  showWelcomeAtom,
-} from "#/features/onboarding";
-
-const TutorialTour = lazy(() =>
-  import("#/features/onboarding").then((m) => ({ default: m.TutorialTour }))
-);
-const WelcomeModal = lazy(() =>
-  import("#/features/onboarding").then((m) => ({ default: m.WelcomeModal }))
-);
-const SettingsModal = lazy(() =>
-  import("#/features/settings").then((m) => ({ default: m.SettingsModal }))
-);
+import { ModeSidebar } from "#/features/mode-sidebar";
+import { showTutorialAtom, showWelcomeAtom } from "#/features/onboarding";
 import { useProbeModels } from "#/features/settings/hooks/use-probe-models";
 import { isOwnKeyAtom, loadedAtom, settingsAtom } from "#/features/settings/state/settings-atoms";
-import { Button } from "#/shared/components/ui/button";
 import { exportCanvas, openImportDialog } from "#/lib/export";
 import { m } from "#/lib/i18n";
+import { Button } from "#/shared/components/ui/button";
 import { useMountEffect } from "#/shared/utils/use-mount-effect";
 import { CanvasArea } from "#/widgets/canvas-area";
 import { ErrorBoundary } from "#/widgets/error-boundary";
 import { useKeyboardShortcuts } from "#/widgets/keyboard-shortcuts";
 import { PromptBar, PromptLibrary } from "#/widgets/prompt-bar";
 import { Toolbar } from "#/widgets/toolbar";
-import { ModeSidebar } from "#/features/mode-sidebar";
+
+const CommentInput = lazy(() => import("#/features/comments/ui/comment-input"));
+const CommentThread = lazy(() => import("#/features/comments/ui/comment-thread"));
+const FeedbackModal = lazy(() =>
+  import("#/features/feedback").then((m) => ({ default: m.FeedbackModal })),
+);
+const TutorialTour = lazy(() =>
+  import("#/features/onboarding").then((m) => ({ default: m.TutorialTour })),
+);
+const WelcomeModal = lazy(() =>
+  import("#/features/onboarding").then((m) => ({ default: m.WelcomeModal })),
+);
+const SettingsModal = lazy(() =>
+  import("#/features/settings").then((m) => ({ default: m.SettingsModal })),
+);
 
 export default function Home() {
   const canvas = useCanvas();
@@ -144,10 +136,7 @@ export default function Home() {
         hasFrames={groups.length > 0}
       />
 
-      <ModeSidebar
-        mode={toolMode}
-        onModeChange={setToolMode}
-      />
+      <ModeSidebar mode={toolMode} onModeChange={setToolMode} />
 
       <CanvasHUD
         scale={canvas.scale}
@@ -246,10 +235,7 @@ export default function Home() {
             </h3>
             <p className="text-[13px] text-gray-500 mb-6">{m.dialog.resetDescription()}</p>
             <div className="flex items-center justify-center gap-3">
-              <Button
-                variant="ghost"
-                onClick={() => setShowResetConfirm(false)}
-              >
+              <Button variant="ghost" onClick={() => setShowResetConfirm(false)}>
                 Cancel
               </Button>
               <Button

From 12f7a2308a8251aa10898a7a061056efd8b92d2a Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Mon, 4 May 2026 11:05:10 +0200
Subject: [PATCH 09/46] refactor(ui): improve React type safety in
 error-boundary

Use specific React types (Component, ComponentType, ErrorInfo, ReactNode,
PropsWithChildren) instead of namespace-prefixed types.
---
 apps/web/src/widgets/error-boundary.tsx | 27 ++++++++++---------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/widgets/error-boundary.tsx b/apps/web/src/widgets/error-boundary.tsx
index 9f300a21..fa60f8bd 100644
--- a/apps/web/src/widgets/error-boundary.tsx
+++ b/apps/web/src/widgets/error-boundary.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { getLogger } from "@app/logger";
-import React from "react";
-
 import { AlertTriangle } from "lucide-react";
+import { Component, ComponentType, ErrorInfo, PropsWithChildren, ReactNode } from "react";
+
 import { Button } from "#/shared/components/ui/button";
 
-interface ErrorBoundaryProps {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
+interface ErrorBoundaryProps extends PropsWithChildren {
+  fallback?: ReactNode;
   category?: string[];
 }
 
@@ -17,7 +16,7 @@ interface ErrorBoundaryState {
   error: Error | null;
 }
 
-class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   private logger: ReturnType<typeof getLogger>;
 
   constructor(props: ErrorBoundaryProps) {
@@ -34,14 +33,14 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     return { error, hasError: true };
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     this.logger.error("React error caught", {
       componentStack: errorInfo.componentStack,
       error: error.message,
     });
   }
 
-  render(): React.ReactNode {
+  render(): ReactNode {
     if (this.state.hasError) {
       if (this.props.fallback) {
         return this.props.fallback;
@@ -55,11 +54,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
           <p className="max-w-sm text-sm text-muted-foreground">
             {this.state.error?.message ?? "An unexpected error occurred."}
           </p>
-          <Button
-            onClick={() => this.setState({ error: null, hasError: false })}
-          >
-            Try again
-          </Button>
+          <Button onClick={() => this.setState({ error: null, hasError: false })}>Try again</Button>
         </div>
       );
     }
@@ -71,9 +66,9 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
 export { ErrorBoundary };
 
 export function withErrorBoundary<P extends object>(
-  WrappedComponent: React.ComponentType<P>,
-  fallback?: React.ReactNode,
-): React.ComponentType<P> {
+  WrappedComponent: ComponentType<P>,
+  fallback?: ReactNode,
+): ComponentType<P> {
   return function WithErrorBoundary(props: P) {
     return (
       <ErrorBoundary fallback={fallback}>

From 397e31eb45d63529056799a4cba42dd81a858408 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Mon, 4 May 2026 11:05:18 +0200
Subject: [PATCH 10/46] refactor(ui): use PropsWithChildren pattern in prompt
 input

Extend PropsWithChildren for container components. Add field-sizing:fixed
for consistent textarea height and margin to footer.
---
 .../widgets/prompt-bar/ui/ai-prompt-input.tsx  | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx b/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
index f855b721..eef023b2 100644
--- a/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/ai-prompt-input.tsx
@@ -1,9 +1,8 @@
-import { forwardRef, useEffect, useRef } from "react";
+import { type PropsWithChildren, forwardRef, useEffect, useRef } from "react";
 
 import { Textarea } from "#/shared/components/ui/textarea";
 
-interface PromptInputContainerProps {
-  children: React.ReactNode;
+interface PromptInputContainerProps extends PropsWithChildren {
   isGenerating?: boolean;
   className?: string;
 }
@@ -24,8 +23,7 @@ export const PromptInputContainer = ({
   </div>
 );
 
-interface PromptInputHeaderProps {
-  children: React.ReactNode;
+interface PromptInputHeaderProps extends PropsWithChildren {
   className?: string;
 }
 
@@ -33,8 +31,7 @@ export const PromptInputHeader = ({ children, className = "" }: PromptInputHeade
   <div className={`flex items-center gap-2 mb-2 ${className}`}>{children}</div>
 );
 
-interface PromptInputBodyProps {
-  children: React.ReactNode;
+interface PromptInputBodyProps extends PropsWithChildren {
   className?: string;
 }
 
@@ -42,13 +39,12 @@ export const PromptInputBody = ({ children, className = "" }: PromptInputBodyPro
   <div className={`flex items-center gap-2 ${className}`}>{children}</div>
 );
 
-interface PromptInputFooterProps {
-  children: React.ReactNode;
+interface PromptInputFooterProps extends PropsWithChildren {
   className?: string;
 }
 
 export const PromptInputFooter = ({ children, className = "" }: PromptInputFooterProps) => (
-  <div className={`flex items-center justify-between gap-2 ${className}`}>{children}</div>
+  <div className={`flex items-center justify-between gap-2 mt-2 ${className}`}>{children}</div>
 );
 
 interface PromptInputTextareaProps {
@@ -91,7 +87,7 @@ export const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTe
         disabled={disabled}
         rows={1}
         aria-label="Prompt"
-        className={`flex-1 px-0 py-2 text-[15px] text-gray-800 placeholder-gray-400/70 bg-transparent outline-none resize-none leading-[22px] border-0 focus-visible:ring-0 focus-visible:ring-offset-0 min-h-0 shadow-none focus-visible:border-0 ${className}`}
+        className={`flex-1 px-0 py-2 text-[15px] text-gray-800 placeholder-gray-400/70 bg-transparent outline-none resize-none leading-[22px] border-0 [field-sizing:fixed] focus-visible:ring-0 focus-visible:ring-offset-0 min-h-0 shadow-none focus-visible:border-0 ${className}`}
         style={{ maxHeight: 22 * 6 }}
       />
     );

From 69ed099069cd7f8db56ca6040ea186c4aa8c7463 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Mon, 4 May 2026 11:05:37 +0200
Subject: [PATCH 11/46] fix(ui): prevent text overflow in critique mode button

Add whitespace-normal to allow text wrapping in popover options.
Add size=sm to button for consistent sizing.
---
 .../src/widgets/prompt-bar/ui/critique-mode-button.tsx   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx b/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
index d2537595..749e8f19 100644
--- a/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/critique-mode-button.tsx
@@ -30,6 +30,7 @@ export function CritiqueModeButton({
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
+          size="sm"
           data-tour={dataTour}
           className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all"
           style={
@@ -59,7 +60,7 @@ export function CritiqueModeButton({
               onQuickModeChange(false);
               onToggle();
             }}
-            className={`w-full h-auto flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
+            className={`w-full h-auto flex items-start gap-3 p-2.5 rounded-xl text-left whitespace-normal transition-all hover:bg-background/60 ${
               !quickMode ? "border" : "bg-background/40"
             }`}
             style={
@@ -87,7 +88,7 @@ export function CritiqueModeButton({
             >
               <RefreshCw className="w-4 h-4" />
             </div>
-            <div className="flex-1 min-w-0">
+            <div className="flex-1 min-w-0 whitespace-normal">
               <div
                 className="text-[12px] font-semibold"
                 style={{ color: "var(--mode-critique-fg)" }}
@@ -109,7 +110,7 @@ export function CritiqueModeButton({
               onQuickModeChange(true);
               onToggle();
             }}
-            className={`w-full h-auto flex items-start gap-3 p-2.5 rounded-xl text-left transition-all hover:bg-background/60 ${
+            className={`w-full h-auto flex items-start gap-3 p-2.5 rounded-xl text-left whitespace-normal transition-all hover:bg-background/60 ${
               quickMode ? "border" : "bg-background/40"
             }`}
             style={
@@ -128,7 +129,7 @@ export function CritiqueModeButton({
             >
               <Zap className="w-4 h-4" />
             </div>
-            <div className="flex-1 min-w-0">
+            <div className="flex-1 min-w-0 whitespace-normal">
               <div
                 className="text-[12px] font-semibold"
                 style={{ color: "var(--mode-quick-fg)" }}

From faa095c0f8b8cb64a48125e6c1bb3f12fa8351df Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Mon, 4 May 2026 11:05:48 +0200
Subject: [PATCH 12/46] refactor(ui): clean up imports in feedback-modal

Remove unused jotai imports and add Textarea component import.
---
 apps/web/src/features/feedback/ui/feedback-modal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/features/feedback/ui/feedback-modal.tsx b/apps/web/src/features/feedback/ui/feedback-modal.tsx
index 0c634283..3bc6eab8 100644
--- a/apps/web/src/features/feedback/ui/feedback-modal.tsx
+++ b/apps/web/src/features/feedback/ui/feedback-modal.tsx
@@ -1,5 +1,5 @@
 import { captureEvent, FEEDBACK_RATE_LIMITED, FEEDBACK_SUBMITTED } from "@app/analytics";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtom } from "jotai";
 import {
   Bug,
   CheckCircle2,
@@ -22,6 +22,7 @@ import {
 import { Input } from "#/shared/components/ui/input";
 import { Label } from "#/shared/components/ui/label";
 import { Switch } from "#/shared/components/ui/switch";
+import { Textarea } from "#/shared/components/ui/textarea";
 
 import { submitFeedback } from "../api";
 import { canSubmitFeedback, recordSubmission } from "../lib/rate-limiter";

From 041eadf683afd4ca600ecc670533ff3a7d1a6b43 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 09:44:57 +0200
Subject: [PATCH 13/46] chore: adjust exports and input types after previous
 merge 'ba7ae05'

---
 apps/web/src/features/feedback/index.ts              |  2 +-
 apps/web/src/features/feedback/ui/feedback-modal.tsx |  4 +++-
 apps/web/src/widgets/prompt-bar/ui/action-button.tsx | 10 +++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/features/feedback/index.ts b/apps/web/src/features/feedback/index.ts
index b880e4fe..e8f0dd61 100644
--- a/apps/web/src/features/feedback/index.ts
+++ b/apps/web/src/features/feedback/index.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2026 Joaquin Terrasa. All rights reserved.
 // Licensed under the AGPL-3.0. See packages/shared/LICENSE for details.
 
-export { FeedbackModal } from "./ui/feedback-modal";
+export * as FeedbackModal from "./ui/feedback-modal";
 export { BugIcon } from "./ui/bug-icon";
 export { showFeedbackAtom } from "./state/feedback-atoms";
 export {
diff --git a/apps/web/src/features/feedback/ui/feedback-modal.tsx b/apps/web/src/features/feedback/ui/feedback-modal.tsx
index 1b2299bd..cade732b 100644
--- a/apps/web/src/features/feedback/ui/feedback-modal.tsx
+++ b/apps/web/src/features/feedback/ui/feedback-modal.tsx
@@ -52,7 +52,7 @@ function getSystemInfoPreview(): string {
   ].join("\n");
 }
 
-export function FeedbackModal() {
+function FeedbackModal() {
   const [open, setOpen] = useAtom(feedbackModalOpenAtom);
   const [formData, setFormData] = useAtom(feedbackFormDataAtom);
   const [status, setStatus] = useAtom(feedbackSubmitStatusAtom);
@@ -383,3 +383,5 @@ export function FeedbackModal() {
     </Dialog>
   );
 }
+
+export default FeedbackModal;
diff --git a/apps/web/src/widgets/prompt-bar/ui/action-button.tsx b/apps/web/src/widgets/prompt-bar/ui/action-button.tsx
index 755f75d7..3bc6842b 100644
--- a/apps/web/src/widgets/prompt-bar/ui/action-button.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/action-button.tsx
@@ -2,12 +2,14 @@ import { useAtom } from "jotai";
 import { useCallback } from "react";
 
 import { settingsAtom } from "#/features/settings/state/settings-atoms";
+import { Button } from "#/shared/components/ui/button";
 
 export interface ActionButtonProps {
   isGenerating: boolean;
+  dataTour?: string;
 }
 
-const ActionButton = ({ isGenerating, dataTour }: ActionButtonProps & { dataTour?: string }) => {
+const ActionButton = ({ isGenerating, dataTour }: ActionButtonProps) => {
   const [{ isIdeating }, setSettings] = useAtom(settingsAtom);
 
   const setIsIdeating = useCallback(
@@ -16,7 +18,9 @@ const ActionButton = ({ isGenerating, dataTour }: ActionButtonProps & { dataTour
   );
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
       onClick={() => setIsIdeating(!isIdeating)}
       disabled={isGenerating}
       data-tour={dataTour}
@@ -37,7 +41,7 @@ const ActionButton = ({ isGenerating, dataTour }: ActionButtonProps & { dataTour
       title={isIdeating ? "Ideate mode" : "Build mode"}
     >
       {isIdeating ? "◈ Ideate" : "✦ Build"}
-    </button>
+    </Button>
   );
 };
 

From 5888d4331a30a53629cacbae864f62f0e8b6c9af Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:05:25 +0200
Subject: [PATCH 14/46] fix(analytics): switch PostHog endpoint from EU to US
 cloud

---
 packages/analytics/src/posthog-client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/analytics/src/posthog-client.ts b/packages/analytics/src/posthog-client.ts
index 4f3eb8ca..f29b55b9 100644
--- a/packages/analytics/src/posthog-client.ts
+++ b/packages/analytics/src/posthog-client.ts
@@ -26,7 +26,7 @@ function initAnalytics(key?: string): void {
   }
 
   posthog.init(apiKey, {
-    api_host: "https://eu.posthog.com",
+    api_host: "https://us.i.posthog.com",
     disable_external_dependency_loading: true,
     persistence: "localStorage",
     bootstrap: {

From fb8f138dea351cea0fab6bcfb1001817039f85c2 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:05:35 +0200
Subject: [PATCH 15/46] feat(analytics): enable PostHog initialization on app
 startup

---
 apps/web/src/main.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 05c34540..e8ef5cff 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,5 +1,5 @@
 import { createLogger } from "@app/logger";
-// import { initAnalytics } from "@app/analytics";
+import { initAnalytics } from "@app/analytics";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { createStore, Provider } from "jotai";
 import { StrictMode } from "react";
@@ -15,7 +15,7 @@ import { feedbackModalOpenAtom } from "#/features/feedback/store";
 import { routeTree } from "./routeTree.gen";
 
 await createLogger(import.meta.env.LOG_LEVEL);
-// initAnalytics();
+initAnalytics();
 
 if (!window.__electrobun) {
   document.addEventListener("contextmenu", (e) => e.preventDefault());

From 44aff9377690508e9bf17aab2ee5fdaaaae6e205 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:05:41 +0200
Subject: [PATCH 16/46] ci(desktop): pass VITE_POSTHOG_KEY to desktop build

---
 .github/workflows/desktop.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/desktop.yml b/.github/workflows/desktop.yml
index 4066c56f..109672c7 100644
--- a/.github/workflows/desktop.yml
+++ b/.github/workflows/desktop.yml
@@ -82,6 +82,7 @@ jobs:
           ELECTROBUN_APPLEAPIISSUER: ${{ secrets.APPLE_API_ISSUER }}
           ELECTROBUN_APPLEAPIKEY: ${{ secrets.APPLE_API_KEY_ID }}
           ELECTROBUN_APPLEAPIKEYPATH: /tmp/api_key.p8
+          VITE_POSTHOG_KEY: ${{ secrets.VITE_POSTHOG_KEY }}
       - name: Cleanup API key
         if: matrix.platform == 'darwin'
         run: rm -f /tmp/api_key.p8

From 15eb2623b41f0f7dfe148cf814fecbda15016a88 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:07:42 +0200
Subject: [PATCH 17/46] feat(settings): remove deprecated settings-modal and
 related components

---
 apps/web/src/features/settings/index.ts       |   1 -
 apps/web/src/features/settings/ui/index.ts    |   4 -
 .../settings/ui/model-combo-select.tsx        |  69 ----
 .../settings/ui/provider-config-form.tsx      | 254 ------------
 .../features/settings/ui/provider-list.tsx    | 111 ------
 .../features/settings/ui/settings-modal.tsx   | 366 ------------------
 6 files changed, 805 deletions(-)
 delete mode 100644 apps/web/src/features/settings/ui/model-combo-select.tsx
 delete mode 100644 apps/web/src/features/settings/ui/provider-config-form.tsx
 delete mode 100644 apps/web/src/features/settings/ui/provider-list.tsx
 delete mode 100644 apps/web/src/features/settings/ui/settings-modal.tsx

diff --git a/apps/web/src/features/settings/index.ts b/apps/web/src/features/settings/index.ts
index bf4c8e81..ddd4f09e 100644
--- a/apps/web/src/features/settings/index.ts
+++ b/apps/web/src/features/settings/index.ts
@@ -1,2 +1 @@
-export { SettingsModal } from "./ui";
 export type { ProviderConfig, ModelInfo, ProviderType, Settings } from "./types";
diff --git a/apps/web/src/features/settings/ui/index.ts b/apps/web/src/features/settings/ui/index.ts
index ecc1c36a..e841bf47 100644
--- a/apps/web/src/features/settings/ui/index.ts
+++ b/apps/web/src/features/settings/ui/index.ts
@@ -1,7 +1,3 @@
-export { SettingsModal } from "./settings-modal";
-export { default as ModelComboSelect } from "./model-combo-select";
-export { default as ProviderList } from "./provider-list";
-export { default as ProviderConfigForm } from "./provider-config-form";
 export { SettingsDialog } from "./settings-dialog";
 export { SettingsSidebar, type SettingsSection } from "./settings-sidebar";
 export { SettingsGeneral } from "./settings-general";
diff --git a/apps/web/src/features/settings/ui/model-combo-select.tsx b/apps/web/src/features/settings/ui/model-combo-select.tsx
deleted file mode 100644
index 9608d71d..00000000
--- a/apps/web/src/features/settings/ui/model-combo-select.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { ProviderConfig } from "../../settings/types";
-
-interface ModelComboSelectProps {
-  label: string;
-  value: string;
-  providers: ProviderConfig[];
-  onChange: (value: string) => void;
-}
-
-export default function ModelComboSelect({
-  label,
-  value,
-  providers,
-  onChange,
-}: ModelComboSelectProps) {
-  const hasModels = providers.some((p) => p.models.length > 0);
-
-  const normalizedValue = value.includes("/")
-    ? value
-    : (providers.find((p) => p.models.some((m) => m.id === value))?.id ?? "") +
-      (value ? `/${value}` : "");
-
-  const selectedProviderAndModel = normalizedValue.split("/");
-  const selectedProviderId = selectedProviderAndModel[0];
-  const selectedModelId = selectedProviderAndModel[1];
-
-  const isValidSelection = providers.some((p) =>
-    p.models.some((m) => `${p.id}/${m.id}` === normalizedValue || m.id === value),
-  );
-
-  return (
-    <div className="space-y-2">
-      <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
-        {label}
-      </label>
-
-      <select
-        value={normalizedValue}
-        onChange={(e) => onChange(e.target.value)}
-        className="text-[13px] text-gray-800 bg-white/70 backdrop-blur-sm rounded-xl px-4 py-3 outline-none border border-white/50 focus:border-blue-300/60 focus:bg-white/90 transition-all w-full"
-        disabled={!hasModels}
-      >
-        {!hasModels ? (
-          <option value="" disabled>
-            No models yet — add a provider and test it to load models.
-          </option>
-        ) : (
-          providers
-            .filter((p) => p.models.length > 0)
-            .map((provider) => (
-              <optgroup key={provider.id} label={provider.id}>
-                {provider.models.map((model) => (
-                  <option key={`${provider.id}/${model.id}`} value={`${provider.id}/${model.id}`}>
-                    {`${provider.id}/${model.displayName || model.id}`}
-                  </option>
-                ))}
-              </optgroup>
-            ))
-        )}
-      </select>
-
-      {!isValidSelection && normalizedValue && (
-        <p className="text-[11px] text-amber-500 mt-1.5">
-          Current selection ({normalizedValue}) not found in any provider.
-        </p>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/features/settings/ui/provider-config-form.tsx b/apps/web/src/features/settings/ui/provider-config-form.tsx
deleted file mode 100644
index 098ba2c8..00000000
--- a/apps/web/src/features/settings/ui/provider-config-form.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import { useCallback, useState } from "react";
-
-import { Button } from "#/shared/components/ui/button";
-import { Input } from "#/shared/components/ui/input";
-import { Check } from "lucide-react";
-
-import type { ModelInfo, ProviderConfig, ProviderType } from "../types";
-
-export interface TestProvider {
-  id: string;
-  apiType: ProviderType;
-  baseUrl: string;
-  apiKey: string;
-}
-
-const API_TYPES = [
-  {
-    description: "Claude Opus 4.6, Sonnet 4.5, Opus 4, or Sonnet 4",
-    icon: "🤖",
-    id: "anthropic" as const,
-    label: "Anthropic",
-  },
-  {
-    description: "GPT-4, GPT-4o, GPT-3.5 Turbo, or custom endpoints",
-    icon: "🚀",
-    id: "openai-compatible" as const,
-    label: "OpenAI-Compatible",
-  },
-];
-
-interface ProviderConfigFormProps {
-  onSave: (provider: ProviderConfig) => void;
-  onCancel: () => void;
-  existingIds: string[];
-  testProvider: (_: TestProvider) => Promise<{ models: ModelInfo[] }>;
-}
-
-export default function ProviderConfigForm({
-  onSave,
-  onCancel,
-  existingIds,
-  testProvider,
-}: ProviderConfigFormProps) {
-  const [id, setId] = useState("");
-  const [apiType, setApiType] = useState<ProviderType>("anthropic");
-  const [baseUrl, setBaseUrl] = useState("");
-  const [apiKey, setApiKey] = useState("");
-  const [showKey, setShowKey] = useState(false);
-  const [isTesting, setIsTesting] = useState(false);
-  const [testResult, setTestResult] = useState<{ models: ModelInfo[] } | null>(null);
-  const [testError, setTestError] = useState<string | null>(null);
-
-  // Validation
-  const isValidId = useCallback(
-    (value: string) => {
-      if (!value) {
-        return false;
-      }
-      if (!/^[a-z0-9-]+$/.test(value)) {
-        return false;
-      }
-      if (existingIds.includes(value)) {
-        return false;
-      }
-      return true;
-    },
-    [existingIds],
-  );
-
-  const isDuplicate = id && existingIds.includes(id);
-  const hasInvalidFormat = id && !/^[a-z0-9-]+$/.test(id);
-
-  const duplicateError = isDuplicate ? "Provider ID already in use" : null;
-  const formatError = hasInvalidFormat ? "Only lowercase letters, numbers, and hyphens" : null;
-
-  const handleTest = async () => {
-    if (!isValidId(id)) {
-      return;
-    }
-
-    setIsTesting(true);
-    setTestError(null);
-
-    try {
-      const result = await testProvider({ id, apiType, baseUrl, apiKey });
-      setTestResult(result);
-      setTestError(null);
-    } catch (error) {
-      setTestError(error instanceof Error ? error.message : "Test failed");
-      setTestResult(null);
-    } finally {
-      setIsTesting(false);
-    }
-  };
-
-  const handleSave = () => {
-    if (!testResult || testError) {
-      return;
-    }
-
-    onSave({
-      apiKey,
-      apiType,
-      baseUrl,
-      id,
-      lastTested: Date.now(),
-      models: testResult.models,
-    });
-  };
-
-  const handleCancel = () => {
-    onCancel();
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Provider ID */}
-      <div>
-        <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
-          Provider ID
-        </label>
-        <Input
-          type="text"
-          value={id}
-          onChange={(e) => setId(e.target.value)}
-          placeholder="e.g., my-provider"
-          className="text-[13px] text-gray-800 placeholder-gray-400/50 bg-white/70 backdrop-blur-sm rounded-xl px-5 py-3.5 outline-none border border-white/50 focus:border-blue-300/60 focus:bg-white/90 transition-all w-full"
-        />
-        {duplicateError && <p className="mt-1.5 text-[11px] text-red-500">{duplicateError}</p>}
-        {formatError && !duplicateError && (
-          <p className="mt-1.5 text-[11px] text-red-500">{formatError}</p>
-        )}
-      </div>
-
-      {/* API Type Selector */}
-      <div>
-        <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
-          API Type
-        </label>
-        <div className="space-y-2">
-          {API_TYPES.map((provider) => (
-            <Button
-              key={provider.id}
-              variant="ghost"
-              onClick={() => setApiType(provider.id)}
-              className={`w-full flex items-center justify-between px-5 py-3.5 rounded-xl text-left transition-all ${
-                apiType === provider.id
-                  ? "bg-blue-500/10 border border-blue-300/40 text-gray-800"
-                  : "bg-white/40 border border-transparent hover:bg-white/60 text-gray-600"
-              }`}
-            >
-              <div className="flex items-center gap-2">
-                <div>
-                  <span className="text-[13px] font-medium">
-                    {provider.icon} {provider.label}
-                  </span>
-                  <span className="text-[11px] text-gray-500 ml-2">{provider.description}</span>
-                </div>
-              </div>
-              {apiType === provider.id && (
-                <Check className="w-4 h-4 text-blue-500 shrink-0" />
-              )}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      {/* Base URL */}
-      {apiType === "openai-compatible" && (
-        <div>
-          <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
-            Base URL
-          </label>
-          <Input
-            type="text"
-            value={baseUrl}
-            onChange={(e) => setBaseUrl(e.target.value)}
-            placeholder="https://api.your-provider.com/v1"
-            className="text-[13px] text-gray-800 placeholder-gray-400/50 bg-white/70 backdrop-blur-sm rounded-xl px-5 py-3.5 outline-none border border-white/50 focus:border-blue-300/60 focus:bg-white/90 transition-all w-full"
-          />
-        </div>
-      )}
-
-      {/* API Key */}
-      <div>
-        <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider mb-2 block">
-          API Key
-        </label>
-        <div className="flex gap-2">
-          <Input
-            type={showKey ? "text" : "password"}
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-            placeholder="sk-ant-..."
-            className="flex-1 text-[13px] text-gray-800 placeholder-gray-400/50 bg-white/70 backdrop-blur-sm rounded-xl px-5 py-3.5 outline-none border border-white/50 focus:border-blue-300/60 focus:bg-white/90 transition-all font-mono"
-          />
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowKey(!showKey)}
-            className="text-[12px] font-medium text-gray-600 bg-white/60 hover:bg-white/80 px-4 py-2.5 rounded-xl transition-all border border-white/50"
-          >
-            {showKey ? "Hide" : "Show"}
-          </Button>
-        </div>
-      </div>
-
-      {/* Test Button */}
-      <div className="flex gap-2">
-        <Button
-          variant="default"
-          onClick={handleTest}
-          disabled={!isValidId(id) || isTesting}
-          className={`text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-4 py-2.5 rounded-xl transition-all ${
-            !isValidId(id) || isTesting ? "opacity-50 cursor-not-allowed" : ""
-          }`}
-        >
-          {isTesting ? "Testing..." : "Test Provider"}
-        </Button>
-        {testResult && (
-          <span className="text-[12px] font-medium text-green-600 bg-green-50/80 px-3 py-2.5 rounded-xl">
-            Found {testResult.models.length} models
-          </span>
-        )}
-        {testError && (
-          <span className="text-[12px] font-medium text-red-600 bg-red-50/80 px-3 py-2.5 rounded-xl">
-            {testError}
-          </span>
-        )}
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex gap-2 pt-4">
-        <Button
-          variant="default"
-          onClick={handleSave}
-          disabled={!testResult || testError !== null}
-          className={`text-[12px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-4 py-2.5 rounded-xl transition-all ${
-            !testResult || testError !== null ? "opacity-50 cursor-not-allowed" : ""
-          }`}
-        >
-          Save Provider
-        </Button>
-        <Button
-          variant="outline"
-          onClick={handleCancel}
-          className="text-[12px] font-medium text-gray-600 bg-white/60 hover:bg-white/80 px-4 py-2.5 rounded-xl transition-all border border-white/50"
-        >
-          Cancel
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/features/settings/ui/provider-list.tsx b/apps/web/src/features/settings/ui/provider-list.tsx
deleted file mode 100644
index a477ec86..00000000
--- a/apps/web/src/features/settings/ui/provider-list.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Button } from "#/shared/components/ui/button";
-import { Key } from "lucide-react";
-import type { ProviderConfig } from "#/features/settings/types";
-
-interface ProviderListProps {
-  providers: ProviderConfig[];
-  onRemove: (id: string) => void;
-}
-
-export default function ProviderList({ providers, onRemove }: ProviderListProps) {
-  const envProvider = providers.find((p) => p.isEnv);
-  const customProviders = providers.filter((p) => !p.isEnv);
-
-  if (providers.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-2">
-      {envProvider && (
-        <div className="bg-white/40 border border-teal-200/60 rounded-xl px-5 py-3.5">
-          <div className="flex items-center justify-between">
-            <div className="flex-1">
-              <div className="flex items-center gap-3">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="font-semibold text-gray-800">{envProvider.id}</span>
-                    <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-teal-100 text-teal-700">
-                      Env
-                    </span>
-                  </div>
-
-                  <div className="flex items-center gap-2 text-sm text-gray-600">
-                    <span className="truncate max-w-[200px]">{envProvider.baseUrl}</span>
-                  </div>
-
-                  <div className="flex items-center gap-4 mt-1">
-                    <span className="text-[11px] text-gray-500">
-                      {envProvider.models.length} models
-                    </span>
-                    <span className="text-[11px] text-gray-500">
-                      {envProvider.lastTested
-                        ? `Tested ${new Date(envProvider.lastTested).toLocaleDateString()}`
-                        : "Never tested"}
-                    </span>
-                    <span className="text-[11px] text-teal-600 flex items-center gap-1">
-                      <Key className="w-3 h-3" />
-                      From environment
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {customProviders.map((provider) => (
-        <div
-          key={provider.id}
-          className="bg-white/40 border border-white/50 rounded-xl px-5 py-3.5"
-        >
-          <div className="flex items-center justify-between">
-            <div className="flex-1">
-              <div className="flex items-center gap-3">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="font-semibold text-gray-800">{provider.id}</span>
-                    <span
-                      className={`text-[11px] font-medium px-2 py-0.5 rounded-full ${
-                        provider.apiType === "anthropic"
-                          ? "bg-blue-100 text-blue-700"
-                          : "bg-emerald-100 text-emerald-700"
-                      }`}
-                    >
-                      {provider.apiType}
-                    </span>
-                  </div>
-
-                  <div className="flex items-center gap-2 text-sm text-gray-600">
-                    <span className="truncate max-w-[200px]">{provider.baseUrl}</span>
-                  </div>
-
-                  <div className="flex items-center gap-4 mt-1">
-                    <span className="text-[11px] text-gray-500">
-                      {provider.models.length} models
-                    </span>
-                    <span className="text-[11px] text-gray-500">
-                      {provider.lastTested
-                        ? `Tested ${new Date(provider.lastTested).toLocaleDateString()}`
-                        : "Never tested"}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => onRemove(provider.id)}
-              className="text-[11px] text-red-500 hover:text-red-600 ml-3 px-2 py-1 rounded transition-colors"
-            >
-              Remove
-            </Button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/web/src/features/settings/ui/settings-modal.tsx b/apps/web/src/features/settings/ui/settings-modal.tsx
deleted file mode 100644
index 0b55826c..00000000
--- a/apps/web/src/features/settings/ui/settings-modal.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-import { useState } from "react";
-
-import { Button } from "#/shared/components/ui/button";
-import { Input } from "#/shared/components/ui/input";
-import { Separator } from "#/shared/components/ui/separator";
-import { X } from "lucide-react";
-
-import type { Settings } from "#/features/settings/types";
-import { useMountEffect } from "#/shared/utils/use-mount-effect";
-
-import { ModelInfo, ProviderConfig } from "../types";
-import ProviderConfigForm, { TestProvider } from "./provider-config-form";
-import ProviderList from "./provider-list";
-interface SettingsModalProps {
-  settings: Settings;
-  onUpdate: (update: Partial<Settings>) => void;
-  onClose: () => void;
-  isOwnKey: boolean;
-  providers: ProviderConfig[];
-  testProvider: (
-    config: Omit<ProviderConfig, "models" | "lastTested">,
-  ) => Promise<{ models: ModelInfo[]; error?: string }>;
-}
-
-export function SettingsModal({
-  settings,
-  onUpdate,
-  onClose,
-  isOwnKey,
-  providers,
-  testProvider,
-}: SettingsModalProps) {
-  const [geminiKey, setGeminiKey] = useState(settings.geminiKey);
-  const [unsplashKey, setUnsplashKey] = useState(settings.unsplashKey);
-  const [openaiKey, setOpenaiKey] = useState(settings.openaiKey);
-  const [showAddProvider, setShowAddProvider] = useState(false);
-
-  useMountEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  });
-
-  const handleAddProvider = (provider: ProviderConfig) => {
-    const newProviders = [...settings.providers, provider];
-    onUpdate({ providers: newProviders });
-
-    // If this is the first provider and it has models, auto-select its first model for both build and ideate
-    if (settings.providers.length === 0 && provider.models.length > 0) {
-      const firstModel = provider.models[0];
-      onUpdate({
-        model: `${provider.id}/${firstModel.id}`,
-        ideateModel: `${provider.id}/${firstModel.id}`,
-      });
-    }
-  };
-
-  const handleRemoveProvider = (id: string) => {
-    const newProviders = settings.providers.filter((p) => p.id !== id);
-    onUpdate({ providers: newProviders });
-
-    // If the removed provider was the source of the currently selected model, clear it or fallback to first remaining provider's first model
-    const selectedModelProviderId = settings.model.split("/")[0];
-    const selectedIdeateModelProviderId = settings.ideateModel?.split("/")[0];
-
-    if (selectedModelProviderId === id) {
-      if (newProviders.length > 0 && newProviders[0].models.length > 0) {
-        const firstModel = newProviders[0].models[0];
-        onUpdate({ model: `${newProviders[0].id}/${firstModel.id}` });
-      } else {
-        onUpdate({ model: "" });
-      }
-    }
-
-    if (selectedIdeateModelProviderId === id) {
-      if (newProviders.length > 0 && newProviders[0].models.length > 0) {
-        const firstModel = newProviders[0].models[0];
-        onUpdate({ ideateModel: `${newProviders[0].id}/${firstModel.id}` });
-      } else {
-        onUpdate({ ideateModel: undefined });
-      }
-    }
-  };
-
-  // Adapter for ProviderConfigForm's testProvider signature
-  const testProviderAdapter = ({ id, apiType, baseUrl, apiKey }: TestProvider) => {
-    return testProvider({ id, apiType, baseUrl, apiKey }).then(
-      (result: { models: ModelInfo[]; error?: string }) => {
-        if (result.error) {
-          throw new Error(result.error);
-        }
-        return { models: result.models };
-      },
-    );
-  };
-
-  return (
-    <div className="fixed inset-0 z-[70] flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/20 backdrop-blur-sm" onClick={onClose} />
-
-      <div className="relative bg-white/60 backdrop-blur-2xl rounded-3xl border border-white/60 shadow-[0_24px_80px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.7)] w-[540px] max-w-[92vw] max-h-[90vh] overflow-y-auto overflow-x-hidden">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200/30">
-          <h2 className="text-[17px] font-semibold text-gray-800">Settings</h2>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onClose}
-            aria-label="Close settings"
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-
-        <div className="p-6 space-y-8">
-          {/* Models being used */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider">
-                Models being used
-              </label>
-            </div>
-            <div className="space-y-2">
-              <div className="bg-white/40 rounded-xl px-5 py-3.5 border border-white/50">
-                <div className="text-[11px] text-gray-500 mb-1">Model</div>
-                <div className="text-[13px] font-medium text-gray-800 truncate">
-                  {settings.model || <span className="text-gray-400 italic">Not configured</span>}
-                </div>
-              </div>
-              <div className="bg-white/40 rounded-xl px-5 py-3.5 border border-white/50">
-                <div className="text-[11px] text-gray-500 mb-1">Fallback</div>
-                <div className="text-[13px] font-medium text-gray-800 truncate">
-                  {settings.fallbackModel || (
-                    <span className="text-gray-400 italic">Not configured</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Configure Providers */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider">
-                Configure Providers
-              </label>
-            </div>
-            <div className="space-y-4">
-              <ProviderList providers={settings.providers} onRemove={handleRemoveProvider} />
-
-              <Button
-                variant="ghost"
-                size="default"
-                onClick={() => setShowAddProvider(true)}
-                className="text-[12px] font-medium text-blue-500 hover:text-blue-600 px-4 py-2.5 rounded-xl transition-all border border-blue-300/40 bg-blue-50/30"
-              >
-                Add Provider
-              </Button>
-
-              {showAddProvider && (
-                <div className="bg-white/40 rounded-xl p-4 border border-white/50">
-                  <ProviderConfigForm
-                    onSave={handleAddProvider}
-                    onCancel={() => setShowAddProvider(false)}
-                    existingIds={settings.providers.map((p) => p.id)}
-                    testProvider={testProviderAdapter}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Image Sources */}
-          <div>
-            <div className="flex items-center gap-2 mb-3">
-              <label className="text-[12px] font-medium text-gray-500 uppercase tracking-wider">
-                🖼️ Image Sources
-              </label>
-              {(settings.unsplashKey || settings.openaiKey || settings.geminiKey) && (
-                <span className="text-[10px] font-medium text-emerald-600 bg-emerald-50/80 px-2 py-0.5 rounded-full">
-                  {[
-                    settings.unsplashKey && "Unsplash",
-                    settings.openaiKey && "DALL·E",
-                    settings.geminiKey && "Gemini",
-                  ]
-                    .filter(Boolean)
-                    .join(" · ")}
-                </span>
-              )}
-            </div>
-            <p className="text-[11px] text-gray-500 mb-4 leading-relaxed">
-              Add API keys to enable real images in your designs. Claude automatically picks the
-              best source for each image — photos from Unsplash, illustrations from DALL·E, design
-              assets from Gemini.
-            </p>
-
-            <div className="space-y-3">
-              {/* Gemini */}
-              <ImageKeyField
-                label="Gemini"
-                icon="✨"
-                desc="Design assets, UI elements, icons, patterns"
-                placeholder="AIza..."
-                value={geminiKey}
-                savedValue={settings.geminiKey}
-                onChange={setGeminiKey}
-                onSave={() => onUpdate({ geminiKey: geminiKey.trim() })}
-                onRemove={() => {
-                  setGeminiKey("");
-                  onUpdate({ geminiKey: "" });
-                }}
-                linkUrl="https://aistudio.google.com/apikey"
-                linkLabel="aistudio.google.com"
-              />
-
-              {/* OpenAI / DALL-E */}
-              <ImageKeyField
-                label="DALL·E"
-                icon="🎨"
-                desc="Custom illustrations, abstract art, specific scenes"
-                placeholder="sk-..."
-                value={openaiKey}
-                savedValue={settings.openaiKey}
-                onChange={setOpenaiKey}
-                onSave={() => onUpdate({ openaiKey: openaiKey.trim() })}
-                onRemove={() => {
-                  setOpenaiKey("");
-                  onUpdate({ openaiKey: "" });
-                }}
-                linkUrl="https://platform.openai.com/api-keys"
-                linkLabel="platform.openai.com"
-              />
-
-              {/* Unsplash */}
-              <ImageKeyField
-                label="Unsplash"
-                icon="📷"
-                desc="Real photos — landscapes, people, food, architecture"
-                placeholder="Access key..."
-                value={unsplashKey}
-                savedValue={settings.unsplashKey}
-                onChange={setUnsplashKey}
-                onSave={() => onUpdate({ unsplashKey: unsplashKey.trim() })}
-                onRemove={() => {
-                  setUnsplashKey("");
-                  onUpdate({ unsplashKey: "" });
-                }}
-                linkUrl="https://unsplash.com/developers"
-                linkLabel="unsplash.com/developers"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-6">
-          <span className="text-[11px] text-gray-500">
-            {settings.model.split("/")[1] || settings.model}
-            {settings.ideateModel &&
-              ` · 🎨 Ideate: ${settings.ideateModel.split("/")[1] || settings.ideateModel}`}
-            {(settings.unsplashKey || settings.openaiKey || settings.geminiKey) &&
-              ` · 🖼️ ${[settings.unsplashKey && "Unsplash", settings.openaiKey && "DALL·E", settings.geminiKey && "Gemini"].filter(Boolean).join(", ")}`}
-          </span>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              // Auto-save keys if changed
-              const updates: Partial<Settings> = {};
-              if (geminiKey.trim() !== settings.geminiKey) updates.geminiKey = geminiKey.trim();
-              if (unsplashKey.trim() !== settings.unsplashKey)
-                updates.unsplashKey = unsplashKey.trim();
-              if (openaiKey.trim() !== settings.openaiKey) updates.openaiKey = openaiKey.trim();
-              if (Object.keys(updates).length) onUpdate(updates);
-              onClose();
-            }}
-            className="text-[13px] font-medium text-gray-600 hover:text-gray-800 px-4 py-2 rounded-xl hover:bg-black/5 transition-all"
-          >
-            Done
-          </Button>
-        </div>
-        <Separator />
-      </div>
-    </div>
-  );
-}
-
-function ImageKeyField({
-  label,
-  icon,
-  desc,
-  placeholder,
-  value,
-  savedValue,
-  onChange,
-  onSave,
-  onRemove,
-  linkUrl,
-  linkLabel,
-}: {
-  label: string;
-  icon: string;
-  desc: string;
-  placeholder: string;
-  value: string;
-  savedValue: string;
-  onChange: (v: string) => void;
-  onSave: () => void;
-  onRemove: () => void;
-  linkUrl: string;
-  linkLabel: string;
-}) {
-  const isSaved = !!savedValue;
-  const isChanged = value.trim() !== savedValue;
-
-  return (
-    <div className="bg-white/40 rounded-xl p-3 border border-gray-200/30">
-      <div className="flex items-center justify-between mb-1.5">
-        <div className="flex items-center gap-1.5">
-          <span className="text-sm">{icon}</span>
-          <span className="text-[12px] font-semibold text-gray-700">{label}</span>
-          {isSaved && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />}
-        </div>
-        <a
-          href={linkUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-[10px] text-blue-500 hover:underline"
-        >
-          {linkLabel} →
-        </a>
-      </div>
-      <p className="text-[10px] text-gray-400 mb-2">{desc}</p>
-      <div className="flex gap-1.5">
-        <Input
-          type="password"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          className="flex-1 text-[12px] text-gray-800 placeholder-gray-300 bg-white/60 rounded-lg px-3 py-2 outline-none border border-gray-200/40 focus:border-blue-300/50 transition-all font-mono"
-        />
-        {isChanged && value.trim() && (
-          <Button
-            variant="default"
-            size="sm"
-            onClick={onSave}
-            className="text-[11px] font-medium text-white bg-blue-500/90 hover:bg-blue-500 px-3 py-1.5 rounded-lg transition-all shrink-0"
-          >
-            Save
-          </Button>
-        )}
-      </div>
-      {isSaved && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onRemove}
-          className="mt-1.5 text-[10px] text-gray-400 hover:text-red-500 transition-colors"
-        >
-          Remove key
-        </Button>
-      )}
-    </div>
-  );
-}

From 637f90dc708ba1e0bf683db3689636f4b13a984e Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:07:48 +0200
Subject: [PATCH 18/46] feat(onboarding): remove deprecated welcome-modal

---
 apps/web/src/features/onboarding/index.ts     |   3 +-
 .../features/onboarding/ui/welcome-modal.tsx  | 109 ------------------
 2 files changed, 1 insertion(+), 111 deletions(-)
 delete mode 100644 apps/web/src/features/onboarding/ui/welcome-modal.tsx

diff --git a/apps/web/src/features/onboarding/index.ts b/apps/web/src/features/onboarding/index.ts
index 7041fdc1..e228c5ef 100644
--- a/apps/web/src/features/onboarding/index.ts
+++ b/apps/web/src/features/onboarding/index.ts
@@ -1,6 +1,5 @@
 // Copyright (c) 2026 Joaquin Terrasa. All rights reserved.
 // Licensed under the AGPL-3.0. See packages/shared/LICENSE for details.
 
-export { WelcomeModal } from "./ui/welcome-modal";
 export { TutorialTour } from "./ui/tutorial-tour";
-export { showWelcomeAtom, showTutorialAtom, tutorialStepAtom } from "./state/onboarding-atoms";
+export { showTutorialAtom, tutorialStepAtom } from "./state/onboarding-atoms";
diff --git a/apps/web/src/features/onboarding/ui/welcome-modal.tsx b/apps/web/src/features/onboarding/ui/welcome-modal.tsx
deleted file mode 100644
index 0e83c3fd..00000000
--- a/apps/web/src/features/onboarding/ui/welcome-modal.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-// Copyright (c) 2026 Joaquin Terrasa. All rights reserved.
-// Licensed under the AGPL-3.0. See packages/shared/LICENSE for details.
-
-import { Download, LayoutGrid, Sparkles } from "lucide-react";
-
-import { Button } from "#/shared/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "#/shared/components/ui/dialog";
-
-interface WelcomeModalProps {
-  open?: boolean;
-  onTakeTour?: () => void;
-  onSkip?: () => void;
-  onComplete?: (keys: {
-    anthropicKey: string;
-    geminiKey: string;
-    unsplashKey: string;
-    openaiKey: string;
-  }) => void;
-  onDismiss?: () => void;
-}
-
-const features = [
-  {
-    icon: Sparkles,
-    text: "Design with AI — Generate beautiful HTML/CSS concepts from natural language",
-  },
-  {
-    icon: LayoutGrid,
-    text: "Compare variations — See up to 4 different designs side by side",
-  },
-  {
-    icon: Download,
-    text: "Export anywhere — Copy code or save as images",
-  },
-];
-
-export function WelcomeModal({
-  open = true,
-  onTakeTour,
-  onSkip,
-  onComplete,
-  onDismiss,
-}: WelcomeModalProps) {
-  const handleTakeTour = () => {
-    if (onTakeTour) {
-      onTakeTour();
-    } else if (onComplete) {
-      onComplete({
-        anthropicKey: "",
-        geminiKey: "",
-        openaiKey: "",
-        unsplashKey: "",
-      });
-    }
-  };
-
-  const handleSkip = () => {
-    if (onSkip) {
-      onSkip();
-    } else if (onDismiss) {
-      onDismiss();
-    }
-  };
-
-  return (
-    <Dialog open={open}>
-      <DialogContent
-        className="max-w-md"
-        showCloseButton={false}
-        onPointerDownOutside={(e) => e.preventDefault()}
-        onEscapeKeyDown={(e) => e.preventDefault()}
-      >
-        <DialogHeader className="gap-3">
-          <DialogTitle className="text-2xl font-semibold tracking-tight">
-            Welcome to Calca!
-          </DialogTitle>
-          <DialogDescription className="text-base leading-relaxed">
-            Your AI-powered design companion. Describe what you want, and watch as beautiful
-            concepts come to life on your canvas.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="mt-2 space-y-3">
-          {features.map((feature, index) => (
-            <div key={index} className="flex items-start gap-3">
-              <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10">
-                <feature.icon className="size-4 text-primary" />
-              </div>
-              <p className="text-sm leading-relaxed text-foreground">{feature.text}</p>
-            </div>
-          ))}
-        </div>
-
-        <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <Button variant="outline" onClick={handleSkip}>
-            Skip for now
-          </Button>
-          <Button onClick={handleTakeTour}>Take tour</Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

From a211ad07be362172313c73168e099037adc20876 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:07:53 +0200
Subject: [PATCH 19/46] feat(onboarding): remove showWelcomeAtom and clean up
 tests

---
 .../onboarding/state/onboarding-atoms.test.ts       | 13 +------------
 .../features/onboarding/state/onboarding-atoms.ts   |  1 -
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts b/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts
index a0d0277d..5629d455 100644
--- a/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts
+++ b/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts
@@ -1,15 +1,11 @@
 import { getDefaultStore } from "jotai";
 import { describe, expect, it } from "vitest";
 
-import { showTutorialAtom, showWelcomeAtom, tutorialStepAtom } from "./onboarding-atoms";
+import { showTutorialAtom, tutorialStepAtom } from "./onboarding-atoms";
 
 describe("onboarding atoms", () => {
   const store = getDefaultStore();
 
-  it("showWelcomeAtom defaults to false", () => {
-    expect(store.get(showWelcomeAtom)).toBe(false);
-  });
-
   it("showTutorialAtom defaults to false", () => {
     expect(store.get(showTutorialAtom)).toBe(false);
   });
@@ -18,13 +14,6 @@ describe("onboarding atoms", () => {
     expect(store.get(tutorialStepAtom)).toBe(0);
   });
 
-  it("showWelcomeAtom can be toggled", () => {
-    store.set(showWelcomeAtom, true);
-    expect(store.get(showWelcomeAtom)).toBe(true);
-    store.set(showWelcomeAtom, false);
-    expect(store.get(showWelcomeAtom)).toBe(false);
-  });
-
   it("showTutorialAtom can be toggled", () => {
     store.set(showTutorialAtom, true);
     expect(store.get(showTutorialAtom)).toBe(true);
diff --git a/apps/web/src/features/onboarding/state/onboarding-atoms.ts b/apps/web/src/features/onboarding/state/onboarding-atoms.ts
index 61ab9b9e..3510dd9b 100644
--- a/apps/web/src/features/onboarding/state/onboarding-atoms.ts
+++ b/apps/web/src/features/onboarding/state/onboarding-atoms.ts
@@ -1,5 +1,4 @@
 import { atom } from "jotai";
 
-export const showWelcomeAtom = atom(false);
 export const showTutorialAtom = atom(false);
 export const tutorialStepAtom = atom(0);

From 610845a139b396b0c6ad274a3181129b7c6ab2ba Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:08:00 +0200
Subject: [PATCH 20/46] feat(canvas-hud): migrate onboarding-banner to shadcn
 design system

---
 .../canvas-hud/ui/onboarding-banner.tsx       | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx

diff --git a/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx b/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx
new file mode 100644
index 00000000..abb239a2
--- /dev/null
+++ b/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx
@@ -0,0 +1,31 @@
+import { m } from "#/lib/i18n";
+import { Button } from "#/shared/components/ui/button";
+import { cn } from "#/lib/utils";
+
+interface OnboardingBannerProps {
+  onClick?: () => void;
+}
+
+const OnboardingBanner = ({ onClick }: OnboardingBannerProps) => {
+  return (
+    <div className="fixed top-4 left-1/2 -translate-x-1/2 z-40">
+      <Button
+        variant="secondary"
+        className={cn(
+          "flex items-center gap-2",
+          "bg-chart-1/10 backdrop-blur-xl",
+          "border border-chart-1/20",
+          "text-chart-1",
+          "hover:bg-chart-1/20",
+          "shadow-sm"
+        )}
+        onClick={onClick}
+      >
+        <span className="w-1.5 h-1.5 rounded-full bg-chart-1 animate-pulse" />
+        {m.banner.addApiKey()}
+      </Button>
+    </div>
+  );
+};
+
+export default OnboardingBanner;

From 79bbf2cdbfe12af8edabc7ec6a1075fd667ff919 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:08:05 +0200
Subject: [PATCH 21/46] feat(routes): replace SettingsModal/WelcomeModal with
 SettingsDialog in onboarding flow

---
 apps/web/src/routes/index.tsx | 61 ++++-------------------------------
 1 file changed, 7 insertions(+), 54 deletions(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 6d7f94cf..0577e258 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -5,6 +5,7 @@ import { lazy, Suspense, useCallback, useState } from "react";
 
 import { useCanvas } from "#/features/canvas";
 import { CanvasHUD } from "#/features/canvas-hud";
+import OnboardingBanner from "#/features/canvas-hud/ui/onboarding-banner";
 import { useCommentHandlers } from "#/features/comments/hooks/use-comment-handlers";
 import { useGenerationPipeline } from "#/features/design/hooks/use-generation-pipeline";
 import {
@@ -17,9 +18,9 @@ import { groupsAtom, hydrateGroups, resetSessionAtom } from "#/features/design/s
 import { canvasImagesAtom, hydrateImages } from "#/features/design/state/images-atoms";
 import { SummaryList } from "#/features/design/ui/summary-list";
 import { ModeSidebar } from "#/features/mode-sidebar";
-import { showTutorialAtom, showWelcomeAtom } from "#/features/onboarding";
-import { useProbeModels } from "#/features/settings/hooks/use-probe-models";
+import { showTutorialAtom } from "#/features/onboarding";
 import { isOwnKeyAtom, loadedAtom, settingsAtom } from "#/features/settings/state/settings-atoms";
+import { SettingsDialog } from "#/features/settings/ui/settings-dialog";
 import { exportCanvas, openImportDialog } from "#/lib/export";
 import { m } from "#/lib/i18n";
 import { Button } from "#/shared/components/ui/button";
@@ -36,19 +37,12 @@ const FeedbackModal = lazy(() => import("#/features/feedback/ui/feedback-modal")
 const TutorialTour = lazy(() =>
   import("#/features/onboarding").then((m) => ({ default: m.TutorialTour })),
 );
-const WelcomeModal = lazy(() =>
-  import("#/features/onboarding").then((m) => ({ default: m.WelcomeModal })),
-);
-const SettingsModal = lazy(() =>
-  import("#/features/settings").then((m) => ({ default: m.SettingsModal })),
-);
 
 export default function Home() {
   const canvas = useCanvas();
   const [settings, setSettings] = useAtom(settingsAtom);
   const isOwnKey = useAtomValue(isOwnKeyAtom);
   const loaded = useAtomValue(loadedAtom);
-  const probeModels = useProbeModels();
 
   useKeyboardShortcuts();
 
@@ -65,7 +59,6 @@ export default function Home() {
 
   const [showResetConfirm, setShowResetConfirm] = useAtom(showResetConfirmAtom);
   const [showSettings, setShowSettings] = useState(false);
-  const [showWelcome, setShowWelcome] = useAtom(showWelcomeAtom);
   const [showTutorial, setShowTutorial] = useAtom(showTutorialAtom);
   const [showGitHash, setShowGitHash] = useAtom(showGitHashAtom);
   const [showLibrary, setShowLibrary] = useAtom(showLibraryAtom);
@@ -99,7 +92,7 @@ export default function Home() {
         if (parsed.onboardingCompleted === true) return;
       } catch {}
     }
-    setShowWelcome(true);
+    setShowSettings(true);
   });
 
   const pipeline = useGenerationPipeline(canvas);
@@ -200,20 +193,7 @@ export default function Home() {
       {showSettings && (
         <ErrorBoundary category={["calca", "web", "features", "settings"]}>
           <Suspense fallback={null}>
-            <SettingsModal
-              settings={settings}
-              onUpdate={(update) => setSettings((prev) => ({ ...prev, ...update }))}
-              onClose={() => setShowSettings(false)}
-              isOwnKey={isOwnKey}
-              providers={settings.providers}
-              testProvider={(config) =>
-                probeModels.mutateAsync({
-                  apiKey: config.apiKey,
-                  providerType: config.apiType,
-                  baseURL: config.baseUrl,
-                })
-              }
-            />
+            <SettingsDialog open={showSettings} onOpenChange={setShowSettings} />
           </Suspense>
         </ErrorBoundary>
       )}
@@ -254,24 +234,6 @@ export default function Home() {
 
       <ErrorBoundary category={["calca", "web", "features", "onboarding"]}>
         <Suspense fallback={null}>
-          {showWelcome && (
-            <WelcomeModal
-              open={showWelcome}
-              onTakeTour={() => {
-                setShowWelcome(false);
-                setShowTutorial(true);
-              }}
-              onSkip={() => {
-                if (!settings.model) {
-                  setShowSettings(true);
-                  return;
-                }
-                setSettings((prev) => ({ ...prev, onboardingCompleted: true }));
-                setShowWelcome(false);
-              }}
-            />
-          )}
-
           {showTutorial && (
             <TutorialTour
               onComplete={() => {
@@ -287,17 +249,8 @@ export default function Home() {
         </Suspense>
       </ErrorBoundary>
 
-      {(!isOwnKey || !settings.model) && !showWelcome && (
-        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-40">
-          <Button
-            variant="secondary"
-            className="flex items-center gap-2 bg-amber-500/10 backdrop-blur-xl border border-amber-300/30 text-amber-700 hover:bg-amber-500/20 shadow-sm"
-            onClick={() => setShowSettings(true)}
-          >
-            <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
-            {m.banner.addApiKey()}
-          </Button>
-        </div>
+      {(!isOwnKey || !settings.model) && (
+        <OnboardingBanner onClick={() => setShowSettings(true)} />
       )}
     </div>
   );

From 4b9c18dd375aec88f82ab48aacf7a7a211d59849 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:09:09 +0200
Subject: [PATCH 22/46] chore: update gitignore

---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index 957e814b..44947548 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,7 @@ next-env.d.ts
 .env
 .env.local
 .env*.local
+.dev.vars
 coverage/
 .nyc_output/
 .turbo/
@@ -47,6 +48,9 @@ tmp/
 # ? > git config --global core.excludesfile ~/.gitignore-global
 # ? > git config --global core.excludesfile
 
+# cloudflare
+.wrangler/
+
 # project specific
 *.db*
 .osgrep

From 61dad2f0185a0a0e69cd23f9a8571d3a93e2c619 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 14:11:26 +0200
Subject: [PATCH 23/46] feat(feedback-proxy): add README

---
 apps/feedback-proxy/README.md | 50 +++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 apps/feedback-proxy/README.md

diff --git a/apps/feedback-proxy/README.md b/apps/feedback-proxy/README.md
new file mode 100644
index 00000000..30cbc241
--- /dev/null
+++ b/apps/feedback-proxy/README.md
@@ -0,0 +1,50 @@
+# Feedback Proxy
+
+A Cloudflare Worker that accepts feedback submissions and posts comments to a GitHub Discussion.
+
+## Endpoints
+
+| Method | Path | Description |
+|--------|------|-------------|
+| `GET` | `/health` | Health check |
+| `POST` | `/feedback` | Submit feedback → posts comment to Discussion #5 |
+
+## Features
+
+- **Rate limiting** — IP-based throttling via Cloudflare KV
+- **Input validation** — Sanitizes and validates feedback payloads
+- **CORS** — Restricts requests to `ALLOWED_ORIGIN`
+
+## Local Development
+
+```bash
+# 1. Copy example secrets and fill in values
+cp .dev.vars.example .dev.vars
+
+# 2. Start local dev server
+bun run dev:cf
+```
+
+## Deployment
+
+```bash
+# Create KV namespaces (first time only)
+bunx wrangler kv namespace create RATE_LIMIT_KV --update-config
+bunx wrangler kv namespace create RATE_LIMIT_KV --preview --update-config
+
+# Set secrets
+bunx wrangler secret put GITHUB_TOKEN
+bunx wrangler secret put GITHUB_REPO
+bunx wrangler secret put ALLOWED_ORIGIN
+
+# Deploy
+bun run deploy
+```
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `GITHUB_TOKEN` | Personal access token with Discussions read/write permission (fine-grained PAT) |
+| `GITHUB_REPO` | Target repository in `owner/repo` format |
+| `ALLOWED_ORIGIN` | CORS origin (e.g., `https://calca.localhost`) |

From 0f55f56c90bbe6504f0fb2f9d3f319c38157cbbc Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:10:11 +0200
Subject: [PATCH 24/46] feat(feedback-proxy): switch from GitHub Issues to
 Discussion comments

---
 apps/feedback-proxy/src/app.ts    |  7 ++---
 apps/feedback-proxy/src/github.ts | 51 +++++++++++++++++++------------
 apps/feedback-proxy/src/index.ts  |  7 ++---
 apps/feedback-proxy/src/types.ts  |  3 +-
 4 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/apps/feedback-proxy/src/app.ts b/apps/feedback-proxy/src/app.ts
index 68ea1c17..1339a626 100644
--- a/apps/feedback-proxy/src/app.ts
+++ b/apps/feedback-proxy/src/app.ts
@@ -1,6 +1,6 @@
 import { Hono, Env as BaseHonoEnv } from "hono";
 
-import { createIssue } from "./github.js";
+import { postDiscussionComment } from "./github.js";
 import { createRateLimiter } from "./rate-limiter.js";
 import type { Env, FeedbackResponse } from "./types.js";
 import { validateFeedback } from "./validate.js";
@@ -54,7 +54,7 @@ const app = new Hono<HonoEnv>()
     const { data } = validation;
 
     // Create GitHub issue
-    const result = await createIssue({
+    const result = await postDiscussionComment({
       token: c.env.GITHUB_TOKEN,
       repo: c.env.GITHUB_REPO,
       data,
@@ -65,8 +65,7 @@ const app = new Hono<HonoEnv>()
     }
 
     const feedbackResponse: FeedbackResponse = {
-      issueUrl: result.issueUrl,
-      issueNumber: result.issueNumber,
+      commentUrl: result.commentUrl,
     };
     return c.json(feedbackResponse, 201);
   });
diff --git a/apps/feedback-proxy/src/github.ts b/apps/feedback-proxy/src/github.ts
index 2154eb1e..b003b9d2 100644
--- a/apps/feedback-proxy/src/github.ts
+++ b/apps/feedback-proxy/src/github.ts
@@ -2,20 +2,40 @@ import { Octokit } from "octokit";
 
 import { FeedbackRequest } from "./types.js";
 
+const DISCUSSION_NODE_ID = "D_kwDORsE6rc4AmJhK";
+
+const ADD_DISCUSSION_COMMENT_MUTATION = `
+  mutation AddComment($discussionId: ID!, $body: String!) {
+    addDiscussionComment(input: { discussionId: $discussionId, body: $body }) {
+      comment {
+        url
+      }
+    }
+  }
+`;
+
+interface AddDiscussionCommentResponse {
+  addDiscussionComment: {
+    comment: {
+      url: string;
+    };
+  };
+}
+
 /**
- * Creates a GitHub issue from feedback data using the provided token and repo.
+ * Posts a comment to GitHub Discussion #5 from feedback data using the provided token.
  *
- * @param params - The parameters for creating the issue
+ * @param params - The parameters for posting the comment
  * @param params.token - GitHub personal access token
- * @param params.repo - GitHub repository in "owner/repo" format
+ * @param params.repo - GitHub repository in "owner/repo" format (unused but kept for error handling)
  * @param params.data - The validated feedback request data
- * @returns Either a successful result with issue URL and number, or an error
+ * @returns Either a successful result with comment URL, or an error
  */
-export async function createIssue(params: {
+export async function postDiscussionComment(params: {
   token: string;
   repo: string;
   data: FeedbackRequest;
-}): Promise<{ ok: true; issueUrl: string; issueNumber: number } | { ok: false; error: string }> {
+}): Promise<{ ok: true; commentUrl: string } | { ok: false; error: string }> {
   const { token, repo, data } = params;
 
   const [owner, repoName] = repo.split("/");
@@ -44,22 +64,15 @@ export async function createIssue(params: {
   ].join("\n");
 
   try {
-    const response = await octokit.rest.issues.create({
-      owner,
-      repo: repoName,
-      title: `[${data.type.toUpperCase()}] ${data.title}`,
+    const result = await octokit.graphql<AddDiscussionCommentResponse>(ADD_DISCUSSION_COMMENT_MUTATION, {
+      discussionId: DISCUSSION_NODE_ID,
       body: bodyMarkdown,
-      labels: ["user-feedback", data.type],
     });
 
-    const responseData = response.data;
-    return {
-      ok: true,
-      issueUrl: responseData.html_url,
-      issueNumber: responseData.number,
-    };
+    const commentUrl = result.addDiscussionComment.comment.url;
+    return { ok: true, commentUrl };
   } catch (err) {
     console.error("[feedback-proxy] GitHub API error:", err);
-    return { ok: false, error: "Failed to create GitHub issue. Please try again." };
+    return { ok: false, error: "Failed to post discussion comment. Please try again." };
   }
-}
+}
\ No newline at end of file
diff --git a/apps/feedback-proxy/src/index.ts b/apps/feedback-proxy/src/index.ts
index 0f191a6d..2a1a258f 100644
--- a/apps/feedback-proxy/src/index.ts
+++ b/apps/feedback-proxy/src/index.ts
@@ -2,7 +2,7 @@ import { Hono } from "hono";
 
 import { createRateLimiter } from "./rate-limiter.js";
 import { validateFeedback } from "./validate.js";
-import { createIssue } from "./github.js";
+import { postDiscussionComment } from "./github.js";
 import type { Env, FeedbackResponse } from "./types.js";
 
 type Bindings = Env;
@@ -57,7 +57,7 @@ app.post("/feedback", async (c) => {
   const { data } = validation;
 
   // Create GitHub issue
-  const result = await createIssue({
+    const result = await postDiscussionComment({
     token: c.env.GITHUB_TOKEN,
     repo: c.env.GITHUB_REPO,
     data,
@@ -68,8 +68,7 @@ app.post("/feedback", async (c) => {
   }
 
   const feedbackResponse: FeedbackResponse = {
-    issueUrl: result.issueUrl,
-    issueNumber: result.issueNumber,
+    commentUrl: result.commentUrl,
   };
   return c.json(feedbackResponse, 201);
 });
diff --git a/apps/feedback-proxy/src/types.ts b/apps/feedback-proxy/src/types.ts
index f60c07e0..11a8644a 100644
--- a/apps/feedback-proxy/src/types.ts
+++ b/apps/feedback-proxy/src/types.ts
@@ -9,8 +9,7 @@ export interface FeedbackRequest {
 }
 
 export interface FeedbackResponse {
-  issueUrl: string;
-  issueNumber: number;
+  commentUrl: string;
 }
 
 export interface Env {

From 7b94685611569b546ec8afced638c72c3d3927a2 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:10:24 +0200
Subject: [PATCH 25/46] feat(feedback): update UI to show discussion comment
 URL

---
 apps/feedback-proxy/package.json              |   3 +-
 .../src/__tests__/feedback.test.ts            | 312 +++++++++++-------
 apps/feedback-proxy/vitest.config.ts          |   8 +
 apps/web/src/features/feedback/store.ts       |   4 +-
 apps/web/src/features/feedback/types.ts       |   3 +-
 .../features/feedback/ui/feedback-modal.tsx   |   8 +-
 6 files changed, 206 insertions(+), 132 deletions(-)
 create mode 100644 apps/feedback-proxy/vitest.config.ts

diff --git a/apps/feedback-proxy/package.json b/apps/feedback-proxy/package.json
index 3f2766c2..f8cb72ce 100644
--- a/apps/feedback-proxy/package.json
+++ b/apps/feedback-proxy/package.json
@@ -11,7 +11,8 @@
     "build": "bun build src/index.ts",
     "deploy": "wrangler deploy",
     "deploy:dry": "wrangler deploy --dry-run",
-    "typecheck": "bunx tsc --noEmit --project tsconfig.json"
+    "typecheck": "bunx tsc --noEmit --project tsconfig.json",
+    "test": "vitest run"
   },
   "dependencies": {
     "hono": "^4.0.0",
diff --git a/apps/feedback-proxy/src/__tests__/feedback.test.ts b/apps/feedback-proxy/src/__tests__/feedback.test.ts
index 0393e803..6d776500 100644
--- a/apps/feedback-proxy/src/__tests__/feedback.test.ts
+++ b/apps/feedback-proxy/src/__tests__/feedback.test.ts
@@ -2,67 +2,102 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import app from "../app.js";
 
-const mockOctokitInstance = {
-  rest: {
-    issues: {
-      create: vi.fn(),
-    },
-  },
-};
+const { mockPostDiscussionComment, mockCreateRateLimiter } = vi.hoisted(() => {
+  const requestCounts = new Map<string, number>();
+
+  const mockCreateRateLimiter = vi.fn(() => {
+    return {
+      check: vi.fn(async (ip: string) => {
+        const key = `rate:${ip}`;
+        const count = requestCounts.get(key) ?? 0;
+        requestCounts.set(key, count + 1);
+
+        if (count >= 5) {
+          return { allowed: false, retryAfterSeconds: 3600 };
+        }
+        return { allowed: true };
+      }),
+    };
+  });
+
+  const mockPostDiscussionComment = vi.fn();
+  return { mockPostDiscussionComment, mockCreateRateLimiter };
+});
 
-vi.mock("octokit", () => ({
-  Octokit: vi.fn(function () {
-    return mockOctokitInstance;
-  }),
+vi.mock("../github.js", () => ({
+  postDiscussionComment: mockPostDiscussionComment,
 }));
 
+vi.mock("../rate-limiter.js", () => ({
+  createRateLimiter: mockCreateRateLimiter,
+}));
+
+const testEnv = {
+  GITHUB_TOKEN: "test-token",
+  GITHUB_REPO: "owner/repo",
+  ALLOWED_ORIGIN: "*",
+  RATE_LIMIT_KV: {} as unknown as KVNamespace,
+};
+
 describe("POST /feedback", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockPostDiscussionComment.mockReset();
+    mockPostDiscussionComment.mockResolvedValue(undefined);
     process.env.GITHUB_TOKEN = "test-token";
     process.env.GITHUB_REPO = "owner/repo";
   });
 
-  it("creates a GitHub Issue on valid request", async () => {
-    mockOctokitInstance.rest.issues.create.mockResolvedValue({
-      data: { number: 42, html_url: "https://github.com/owner/repo/issues/42" },
-    } as any);
-
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "bug",
-        title: "Test bug",
-        description: "This is a test bug description",
-      }),
-      headers: { "content-type": "application/json" },
+  it("posts a discussion comment on valid request", async () => {
+    mockPostDiscussionComment.mockResolvedValue({
+      ok: true,
+      commentUrl: "https://github.com/owner/repo/discussions/5#discussioncomment-123",
     });
 
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "bug",
+          title: "Test bug",
+          description: "This is a test bug description",
+        }),
+        headers: { "content-type": "application/json" },
+      },
+      testEnv,
+    );
+
     expect(res.status).toBe(201);
     const json = (await res.json()) as Record<string, unknown>;
     expect(json).toEqual({
-      issueUrl: "https://github.com/owner/repo/issues/42",
-      issueNumber: 42,
+      commentUrl: "https://github.com/owner/repo/discussions/5#discussioncomment-123",
     });
-    expect(mockOctokitInstance.rest.issues.create).toHaveBeenCalledWith({
-      owner: "owner",
-      repo: "repo",
-      title: "[BUG] Test bug",
-      body: expect.stringContaining("Bug Report"),
-      labels: ["user-feedback", "bug"],
+    expect(mockPostDiscussionComment).toHaveBeenCalledWith({
+      token: "test-token",
+      repo: "owner/repo",
+      data: expect.objectContaining({
+        type: "bug",
+        title: "Test bug",
+        description: "This is a test bug description",
+      }),
     });
   });
 
   it("returns 400 for invalid type", async () => {
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "invalid-type",
-        title: "Test",
-        description: "desc",
-      }),
-      headers: { "content-type": "application/json" },
-    });
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "invalid-type",
+          title: "Test",
+          description: "desc",
+        }),
+        headers: { "content-type": "application/json" },
+      },
+      testEnv,
+    );
 
     expect(res.status).toBe(400);
     const json = (await res.json()) as Record<string, unknown>;
@@ -70,40 +105,47 @@ describe("POST /feedback", () => {
   });
 
   it("returns 429 when rate limited", async () => {
-    mockOctokitInstance.rest.issues.create.mockResolvedValue({
-      data: { number: 1, html_url: "https://github.com/owner/repo/issues/1" },
-    } as any);
-
-    await Promise.all(
-      [1, 2, 3, 4, 5].map(
-        async (i) =>
-          await app.request("/feedback", {
-            method: "POST",
-            body: JSON.stringify({
-              type: "feedback",
-              title: `Feedback ${i}`,
-              description: `Description ${i}`,
-            }),
-            headers: {
-              "content-type": "application/json",
-              "x-forwarded-for": "192.168.1.1",
-            },
+    mockPostDiscussionComment.mockResolvedValue({
+      ok: true,
+      commentUrl: "https://github.com/owner/repo/discussions/5#discussioncomment-1",
+    });
+
+    for (let i = 0; i < 5; i++) {
+      const res = await app.request(
+        "/feedback",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            type: "feedback",
+            title: `Feedback ${i}`,
+            description: `Description ${i}`,
           }),
-      ),
-    );
+          headers: {
+            "content-type": "application/json",
+            "x-forwarded-for": "192.168.1.1",
+          },
+        },
+        testEnv,
+      );
+      expect(res.status).toBe(201);
+    }
 
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "feedback",
-        title: "Rate limited",
-        description: "Should be rate limited",
-      }),
-      headers: {
-        "content-type": "application/json",
-        "x-forwarded-for": "192.168.1.1",
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "feedback",
+          title: "Rate limited",
+          description: "Should be rate limited",
+        }),
+        headers: {
+          "content-type": "application/json",
+          "x-forwarded-for": "192.168.1.1",
+        },
       },
-    });
+      testEnv,
+    );
 
     expect(res.status).toBe(429);
     const json = (await res.json()) as Record<string, unknown>;
@@ -111,77 +153,103 @@ describe("POST /feedback", () => {
   });
 
   it("returns 500 when GitHub API call fails", async () => {
-    mockOctokitInstance.rest.issues.create.mockRejectedValue(new Error("API Error"));
-
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "feature",
-        title: "Feature request",
-        description: "I want this feature",
-      }),
-      headers: { "content-type": "application/json" },
+    mockPostDiscussionComment.mockResolvedValue({
+      ok: false,
+      error: "Failed to post discussion comment. Please try again.",
     });
 
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "feature",
+          title: "Feature request",
+          description: "I want this feature",
+        }),
+        headers: { "content-type": "application/json" },
+      },
+      testEnv,
+    );
+
     expect(res.status).toBe(500);
     const json = (await res.json()) as Record<string, unknown>;
-    expect(json.error).toContain("Failed to create GitHub issue");
+    expect(json.error).toContain("Failed to post discussion comment");
   });
 
   it("returns 400 for missing required fields", async () => {
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "bug",
-      }),
-      headers: { "content-type": "application/json" },
-    });
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "bug",
+        }),
+        headers: { "content-type": "application/json" },
+      },
+      testEnv,
+    );
 
     expect(res.status).toBe(400);
     const json = (await res.json()) as Record<string, unknown>;
     expect(json.error).toBeTruthy();
   });
 
-  it("includes email and metadata in issue body", async () => {
-    mockOctokitInstance.rest.issues.create.mockResolvedValue({
-      data: { number: 99, html_url: "https://github.com/owner/repo/issues/99" },
-    } as any);
-
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "feedback",
-        title: "Feedback with extras",
-        description: "Description with email and metadata",
-        email: "test@example.com",
-        metadata: { browser: "Chrome", version: "1.0.0" },
-      }),
-      headers: { "content-type": "application/json" },
+  it("includes email and metadata in comment body", async () => {
+    mockPostDiscussionComment.mockResolvedValue({
+      ok: true,
+      commentUrl: "https://github.com/owner/repo/discussions/5#discussioncomment-99",
     });
 
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "feedback",
+          title: "Feedback with extras",
+          description: "Description with email and metadata",
+          email: "test@example.com",
+          metadata: { browser: "Chrome", version: "1.0.0" },
+        }),
+        headers: { "content-type": "application/json" },
+      },
+      testEnv,
+    );
+
     expect(res.status).toBe(201);
-    expect(mockOctokitInstance.rest.issues.create).toHaveBeenCalledWith(
-      expect.objectContaining({
-        body: expect.stringContaining("test@example.com"),
+    expect(mockPostDiscussionComment).toHaveBeenCalledWith({
+      token: "test-token",
+      repo: "owner/repo",
+      data: expect.objectContaining({
+        email: "test@example.com",
+        metadata: { browser: "Chrome", version: "1.0.0" },
       }),
-    );
+    });
   });
 
   it("returns 500 when GITHUB_TOKEN is missing", async () => {
-    delete process.env.GITHUB_TOKEN;
+    mockPostDiscussionComment.mockResolvedValue({
+      ok: false,
+      error: "Server configuration error",
+    });
 
-    const res = await app.request("/feedback", {
-      method: "POST",
-      body: JSON.stringify({
-        type: "bug",
-        title: "Test",
-        description: "Test desc",
-      }),
-      headers: {
-        "content-type": "application/json",
-        "x-forwarded-for": "10.0.0.1",
+    const res = await app.request(
+      "/feedback",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          type: "bug",
+          title: "Test",
+          description: "Test desc",
+        }),
+        headers: {
+          "content-type": "application/json",
+          "x-forwarded-for": "10.0.0.1",
+        },
       },
-    });
+      { ...testEnv, GITHUB_TOKEN: "" },
+    );
 
     expect(res.status).toBe(500);
     const json = (await res.json()) as Record<string, unknown>;
@@ -191,7 +259,7 @@ describe("POST /feedback", () => {
 
 describe("GET /health", () => {
   it("returns health status", async () => {
-    const res = await app.request("/health");
+    const res = await app.request("/health", undefined, testEnv);
 
     expect(res.status).toBe(200);
     const json = (await res.json()) as Record<string, unknown>;
diff --git a/apps/feedback-proxy/vitest.config.ts b/apps/feedback-proxy/vitest.config.ts
new file mode 100644
index 00000000..3f824fb9
--- /dev/null
+++ b/apps/feedback-proxy/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "node",
+  },
+});
diff --git a/apps/web/src/features/feedback/store.ts b/apps/web/src/features/feedback/store.ts
index e4d302bf..8d5873c1 100644
--- a/apps/web/src/features/feedback/store.ts
+++ b/apps/web/src/features/feedback/store.ts
@@ -18,6 +18,4 @@ export const feedbackSubmitStatusAtom = atom<FeedbackSubmitStatus>("idle");
 
 export const feedbackSubmitErrorAtom = atom<string | null>(null);
 
-export const feedbackSubmitResultAtom = atom<{ issueUrl: string; issueNumber: number } | null>(
-  null,
-);
+export const feedbackSubmitResultAtom = atom<{ commentUrl: string } | null>(null);
diff --git a/apps/web/src/features/feedback/types.ts b/apps/web/src/features/feedback/types.ts
index 5df10a34..d800dfec 100644
--- a/apps/web/src/features/feedback/types.ts
+++ b/apps/web/src/features/feedback/types.ts
@@ -9,8 +9,7 @@ export interface FeedbackFormData {
 }
 
 export interface FeedbackSubmitResult {
-  issueUrl: string;
-  issueNumber: number;
+  commentUrl: string;
 }
 
 export type FeedbackSubmitStatus = "idle" | "submitting" | "success" | "error" | "rate_limited";
diff --git a/apps/web/src/features/feedback/ui/feedback-modal.tsx b/apps/web/src/features/feedback/ui/feedback-modal.tsx
index cade732b..9a89bfdb 100644
--- a/apps/web/src/features/feedback/ui/feedback-modal.tsx
+++ b/apps/web/src/features/feedback/ui/feedback-modal.tsx
@@ -176,19 +176,19 @@ function FeedbackModal() {
                 <div className="space-y-1">
                   <p className="text-base font-medium text-foreground">Thank you!</p>
                   <p className="text-sm text-muted-foreground">
-                    Your feedback has been submitted as issue #{result.issueNumber}.
+                    Your feedback has been posted to the discussion.
                   </p>
                 </div>
                 <a
-                  href={result.issueUrl}
+                  href={result.commentUrl}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
                 >
-                  View on GitHub
+                  View on GitHub Discussions
                   <ExternalLink className="w-3.5 h-3.5" />
                 </a>
-                <p className="text-xs text-muted-foreground">Powered by GitHub</p>
+                <p className="text-xs text-muted-foreground">Powered by GitHub Discussions</p>
                 <Button variant="outline" onClick={() => setOpen(false)}>
                   Close
                 </Button>

From a75e155eba6e7a9edc02a74ea835804b5020fc23 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:13:08 +0200
Subject: [PATCH 26/46] feat(onboarding): restore welcome-modal with original
 flow

- Restore welcome-modal.tsx from git history
- Fresh start now shows WelcomeModal instead of SettingsDialog
- Take tour: starts TutorialTour
- Skip for now: shows canvas (no SettingsDialog)
- Re-add showWelcomeAtom to onboarding atoms
- Restore showWelcomeAtom tests
---
 apps/web/src/features/onboarding/index.ts     |   2 +
 .../onboarding/state/onboarding-atoms.test.ts |  13 ++-
 .../onboarding/state/onboarding-atoms.ts      |   1 +
 .../features/onboarding/ui/welcome-modal.tsx  | 109 ++++++++++++++++++
 apps/web/src/routes/index.tsx                 |  21 +++-
 5 files changed, 142 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/features/onboarding/ui/welcome-modal.tsx

diff --git a/apps/web/src/features/onboarding/index.ts b/apps/web/src/features/onboarding/index.ts
index e228c5ef..28003850 100644
--- a/apps/web/src/features/onboarding/index.ts
+++ b/apps/web/src/features/onboarding/index.ts
@@ -2,4 +2,6 @@
 // Licensed under the AGPL-3.0. See packages/shared/LICENSE for details.
 
 export { TutorialTour } from "./ui/tutorial-tour";
+export { WelcomeModal } from "./ui/welcome-modal";
 export { showTutorialAtom, tutorialStepAtom } from "./state/onboarding-atoms";
+export { showWelcomeAtom } from "./state/onboarding-atoms";
diff --git a/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts b/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts
index 5629d455..a0d0277d 100644
--- a/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts
+++ b/apps/web/src/features/onboarding/state/onboarding-atoms.test.ts
@@ -1,11 +1,15 @@
 import { getDefaultStore } from "jotai";
 import { describe, expect, it } from "vitest";
 
-import { showTutorialAtom, tutorialStepAtom } from "./onboarding-atoms";
+import { showTutorialAtom, showWelcomeAtom, tutorialStepAtom } from "./onboarding-atoms";
 
 describe("onboarding atoms", () => {
   const store = getDefaultStore();
 
+  it("showWelcomeAtom defaults to false", () => {
+    expect(store.get(showWelcomeAtom)).toBe(false);
+  });
+
   it("showTutorialAtom defaults to false", () => {
     expect(store.get(showTutorialAtom)).toBe(false);
   });
@@ -14,6 +18,13 @@ describe("onboarding atoms", () => {
     expect(store.get(tutorialStepAtom)).toBe(0);
   });
 
+  it("showWelcomeAtom can be toggled", () => {
+    store.set(showWelcomeAtom, true);
+    expect(store.get(showWelcomeAtom)).toBe(true);
+    store.set(showWelcomeAtom, false);
+    expect(store.get(showWelcomeAtom)).toBe(false);
+  });
+
   it("showTutorialAtom can be toggled", () => {
     store.set(showTutorialAtom, true);
     expect(store.get(showTutorialAtom)).toBe(true);
diff --git a/apps/web/src/features/onboarding/state/onboarding-atoms.ts b/apps/web/src/features/onboarding/state/onboarding-atoms.ts
index 3510dd9b..61ab9b9e 100644
--- a/apps/web/src/features/onboarding/state/onboarding-atoms.ts
+++ b/apps/web/src/features/onboarding/state/onboarding-atoms.ts
@@ -1,4 +1,5 @@
 import { atom } from "jotai";
 
+export const showWelcomeAtom = atom(false);
 export const showTutorialAtom = atom(false);
 export const tutorialStepAtom = atom(0);
diff --git a/apps/web/src/features/onboarding/ui/welcome-modal.tsx b/apps/web/src/features/onboarding/ui/welcome-modal.tsx
new file mode 100644
index 00000000..4830a4fa
--- /dev/null
+++ b/apps/web/src/features/onboarding/ui/welcome-modal.tsx
@@ -0,0 +1,109 @@
+// Copyright (c) 2026 Joaquin Terrasa. All rights reserved.
+// Licensed under the AGPL-3.0. See packages/shared/LICENSE for details.
+
+import { Download, LayoutGrid, Sparkles } from "lucide-react";
+
+import { Button } from "#/shared/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "#/shared/components/ui/dialog";
+
+interface WelcomeModalProps {
+  open?: boolean;
+  onTakeTour?: () => void;
+  onSkip?: () => void;
+  onComplete?: (keys: {
+    anthropicKey: string;
+    geminiKey: string;
+    unsplashKey: string;
+    openaiKey: string;
+  }) => void;
+  onDismiss?: () => void;
+}
+
+const features = [
+  {
+    icon: Sparkles,
+    text: "Design with AI — Generate beautiful HTML/CSS concepts from natural language",
+  },
+  {
+    icon: LayoutGrid,
+    text: "Compare variations — See up to 4 different designs side by side",
+  },
+  {
+    icon: Download,
+    text: "Export anywhere — Copy code or save as images",
+  },
+];
+
+export function WelcomeModal({
+  open = true,
+  onTakeTour,
+  onSkip,
+  onComplete,
+  onDismiss,
+}: WelcomeModalProps) {
+  const handleTakeTour = () => {
+    if (onTakeTour) {
+      onTakeTour();
+    } else if (onComplete) {
+      onComplete({
+        anthropicKey: "",
+        geminiKey: "",
+        openaiKey: "",
+        unsplashKey: "",
+      });
+    }
+  };
+
+  const handleSkip = () => {
+    if (onSkip) {
+      onSkip();
+    } else if (onDismiss) {
+      onDismiss();
+    }
+  };
+
+  return (
+    <Dialog open={open}>
+      <DialogContent
+        className="max-w-md"
+        showCloseButton={false}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader className="gap-3">
+          <DialogTitle className="text-2xl font-semibold tracking-tight">
+            Welcome to Calca!
+          </DialogTitle>
+          <DialogDescription className="text-base leading-relaxed">
+            Your AI-powered design companion. Describe what you want, and watch as beautiful
+            concepts come to life on your canvas.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="mt-2 space-y-3">
+          {features.map((feature, index) => (
+            <div key={index} className="flex items-start gap-3">
+              <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10">
+                <feature.icon className="size-4 text-primary" />
+              </div>
+              <p className="text-sm leading-relaxed text-foreground">{feature.text}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <Button variant="outline" onClick={handleSkip}>
+            Skip for now
+          </Button>
+          <Button onClick={handleTakeTour}>Take tour</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 0577e258..88c6ed07 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -18,7 +18,7 @@ import { groupsAtom, hydrateGroups, resetSessionAtom } from "#/features/design/s
 import { canvasImagesAtom, hydrateImages } from "#/features/design/state/images-atoms";
 import { SummaryList } from "#/features/design/ui/summary-list";
 import { ModeSidebar } from "#/features/mode-sidebar";
-import { showTutorialAtom } from "#/features/onboarding";
+import { showTutorialAtom, showWelcomeAtom, WelcomeModal } from "#/features/onboarding";
 import { isOwnKeyAtom, loadedAtom, settingsAtom } from "#/features/settings/state/settings-atoms";
 import { SettingsDialog } from "#/features/settings/ui/settings-dialog";
 import { exportCanvas, openImportDialog } from "#/lib/export";
@@ -59,6 +59,7 @@ export default function Home() {
 
   const [showResetConfirm, setShowResetConfirm] = useAtom(showResetConfirmAtom);
   const [showSettings, setShowSettings] = useState(false);
+  const [showWelcome, setShowWelcome] = useAtom(showWelcomeAtom);
   const [showTutorial, setShowTutorial] = useAtom(showTutorialAtom);
   const [showGitHash, setShowGitHash] = useAtom(showGitHashAtom);
   const [showLibrary, setShowLibrary] = useAtom(showLibraryAtom);
@@ -92,7 +93,7 @@ export default function Home() {
         if (parsed.onboardingCompleted === true) return;
       } catch {}
     }
-    setShowSettings(true);
+    setShowWelcome(true);
   });
 
   const pipeline = useGenerationPipeline(canvas);
@@ -234,6 +235,20 @@ export default function Home() {
 
       <ErrorBoundary category={["calca", "web", "features", "onboarding"]}>
         <Suspense fallback={null}>
+          {showWelcome && (
+            <WelcomeModal
+              open={showWelcome}
+              onTakeTour={() => {
+                setShowWelcome(false);
+                setShowTutorial(true);
+              }}
+              onSkip={() => {
+                setSettings((prev) => ({ ...prev, onboardingCompleted: true }));
+                setShowWelcome(false);
+              }}
+            />
+          )}
+
           {showTutorial && (
             <TutorialTour
               onComplete={() => {
@@ -249,7 +264,7 @@ export default function Home() {
         </Suspense>
       </ErrorBoundary>
 
-      {(!isOwnKey || !settings.model) && (
+      {(!isOwnKey || !settings.model) && !showWelcome && (
         <OnboardingBanner onClick={() => setShowSettings(true)} />
       )}
     </div>

From a2c9eee5d09599f768386ab0cab6962e0e7e2af0 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:42:55 +0200
Subject: [PATCH 27/46] fix(desktop): use `Updater.getLocalInfo` as indicated
 in electrobun lint

---
 platforms/desktop/src/updater.ts | 125 +++++++++++++++----------------
 1 file changed, 61 insertions(+), 64 deletions(-)

diff --git a/platforms/desktop/src/updater.ts b/platforms/desktop/src/updater.ts
index 20616cf1..6aa575f7 100644
--- a/platforms/desktop/src/updater.ts
+++ b/platforms/desktop/src/updater.ts
@@ -4,86 +4,83 @@ import { Updater } from "electrobun/bun";
 
 const log = getLogger(["calca", "desktop", "updater"]);
 
-function sendStateToWebview(
-	win: BrowserWindow,
-	state: Record<string, unknown>,
-): void {
-	const script = `window.__calcaUpdaterStateCallback?.(${JSON.stringify(state)})`;
-	win.webview.executeJavascript(script);
+function sendStateToWebview(win: BrowserWindow, state: Record<string, unknown>): void {
+  const script = `window.__calcaUpdaterStateCallback?.(${JSON.stringify(state)})`;
+  win.webview.executeJavascript(script);
 }
 
 export const updaterHandlers = {
-	updater__startDownload: async () => {
-		try {
-			await downloadAndPrepare();
-		} catch (error) {
-			log.error`startDownload handler error: ${error}`;
-		}
-	},
-	updater__apply: async () => {
-		try {
-			await applyIfReady();
-		} catch (error) {
-			log.error`apply handler error: ${error}`;
-		}
-	},
+  updater__startDownload: async () => {
+    try {
+      await downloadAndPrepare();
+    } catch (error) {
+      log.error`startDownload handler error: ${error}`;
+    }
+  },
+  updater__apply: async () => {
+    try {
+      await applyIfReady();
+    } catch (error) {
+      log.error`apply handler error: ${error}`;
+    }
+  },
 };
 
 export async function checkAndNotify(win?: BrowserWindow): Promise<void> {
-	try {
-		const info = await Updater.getLocallocalInfo();
-		const result = await Updater.checkForUpdate();
+  try {
+    const info = await Updater.getLocalInfo();
+    const result = await Updater.checkForUpdate();
 
-		if (Updater.updateInfo()?.updateReady) {
-			if (win) sendStateToWebview(win, { state: "ready", version: result.version });
-			return;
-		}
+    if (Updater.updateInfo()?.updateReady) {
+      if (win) sendStateToWebview(win, { state: "ready", version: result.version });
+      return;
+    }
 
-		if (result.updateAvailable) {
-			if (win)
-				sendStateToWebview(win, {
-					state: "available",
-					version: result.version,
-					currentVersion: info.version,
-				});
-		}
-	} catch (error) {
-		log.error`checkAndNotify failed: ${error}`;
-	}
+    if (result.updateAvailable) {
+      if (win)
+        sendStateToWebview(win, {
+          state: "available",
+          version: result.version,
+          currentVersion: info.version,
+        });
+    }
+  } catch (error) {
+    log.error`checkAndNotify failed: ${error}`;
+  }
 }
 
 export async function downloadAndPrepare(win?: BrowserWindow): Promise<void> {
-	try {
-		Updater.onStatusChange((entry) => {
-			if (entry.status === "download-progress" && win) {
-				sendStateToWebview(win, { state: "downloading" });
-			}
-		});
+  try {
+    Updater.onStatusChange((entry) => {
+      if (entry.status === "download-progress" && win) {
+        sendStateToWebview(win, { state: "downloading" });
+      }
+    });
 
-		if (win) sendStateToWebview(win, { state: "downloading" });
+    if (win) sendStateToWebview(win, { state: "downloading" });
 
-		await Updater.downloadUpdate();
+    await Updater.downloadUpdate();
 
-		if (Updater.updateInfo()?.updateReady && win) {
-			sendStateToWebview(win, {
-				state: "ready",
-				version: Updater.updateInfo()?.version ?? "",
-			});
-		}
-	} catch (error) {
-		log.error`downloadAndPrepare failed: ${error}`;
-	}
+    if (Updater.updateInfo()?.updateReady && win) {
+      sendStateToWebview(win, {
+        state: "ready",
+        version: Updater.updateInfo()?.version ?? "",
+      });
+    }
+  } catch (error) {
+    log.error`downloadAndPrepare failed: ${error}`;
+  }
 }
 
 export async function applyIfReady(): Promise<void> {
-	if (!Updater.updateInfo()?.updateReady) {
-		log.warn`applyIfReady: update not ready yet`;
-		return;
-	}
+  if (!Updater.updateInfo()?.updateReady) {
+    log.warn`applyIfReady: update not ready yet`;
+    return;
+  }
 
-	try {
-		await Updater.applyUpdate();
-	} catch (error) {
-		log.error`applyIfReady failed: ${error}`;
-	}
+  try {
+    await Updater.applyUpdate();
+  } catch (error) {
+    log.error`applyIfReady failed: ${error}`;
+  }
 }

From 079dad0162ebb662b9d12f7c05ee33469074317b Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:45:14 +0200
Subject: [PATCH 28/46] fix: re-run validate step and fix type issues

---
 .../canvas-hud/ui/onboarding-banner.tsx       |   4 +-
 apps/web/src/features/comments/ui/index.ts    |   4 +-
 .../src/features/design/ui/summary-list.tsx   |   1 +
 .../web/src/features/feedback/ui/bug-icon.tsx |   1 +
 .../mode-sidebar/ui/preset-button.tsx         |   2 +-
 .../features/onboarding/ui/welcome-modal.tsx  |   2 +-
 .../settings/ui/provider-selector.tsx         |   2 +-
 apps/web/src/main.tsx                         |   2 +-
 apps/web/src/shared/components/ui/popover.tsx |  47 +++-----
 .../web/src/shared/components/ui/progress.tsx |  17 ++-
 .../web/src/shared/components/ui/textarea.tsx |  10 +-
 .../src/widgets/prompt-bar/ui/image-pill.tsx  |   3 +-
 .../widgets/prompt-bar/ui/prompt-library.tsx  |  15 +--
 .../UpdateNotification.tsx                    |   3 +-
 bun.lock                                      | 104 +++++-------------
 .../src/__tests__/posthog-client.test.ts      |   4 +-
 16 files changed, 73 insertions(+), 148 deletions(-)

diff --git a/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx b/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx
index abb239a2..eaf57a3c 100644
--- a/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx
+++ b/apps/web/src/features/canvas-hud/ui/onboarding-banner.tsx
@@ -1,6 +1,6 @@
 import { m } from "#/lib/i18n";
-import { Button } from "#/shared/components/ui/button";
 import { cn } from "#/lib/utils";
+import { Button } from "#/shared/components/ui/button";
 
 interface OnboardingBannerProps {
   onClick?: () => void;
@@ -17,7 +17,7 @@ const OnboardingBanner = ({ onClick }: OnboardingBannerProps) => {
           "border border-chart-1/20",
           "text-chart-1",
           "hover:bg-chart-1/20",
-          "shadow-sm"
+          "shadow-sm",
         )}
         onClick={onClick}
       >
diff --git a/apps/web/src/features/comments/ui/index.ts b/apps/web/src/features/comments/ui/index.ts
index 9521564f..e140016f 100644
--- a/apps/web/src/features/comments/ui/index.ts
+++ b/apps/web/src/features/comments/ui/index.ts
@@ -1,2 +1,2 @@
-export { CommentInput } from "./comment-input";
-export { CommentThread } from "./comment-thread";
+export * as CommentInput from "./comment-input";
+export * as CommentThread from "./comment-thread";
diff --git a/apps/web/src/features/design/ui/summary-list.tsx b/apps/web/src/features/design/ui/summary-list.tsx
index 58afa74b..344658c1 100644
--- a/apps/web/src/features/design/ui/summary-list.tsx
+++ b/apps/web/src/features/design/ui/summary-list.tsx
@@ -2,6 +2,7 @@ import { useAtom } from "jotai";
 import { useState } from "react";
 
 import { Button } from "#/shared/components/ui/button";
+
 import { groupsAtom } from "../state/groups-atoms";
 import { SummaryDialog } from "./summary-dialog";
 
diff --git a/apps/web/src/features/feedback/ui/bug-icon.tsx b/apps/web/src/features/feedback/ui/bug-icon.tsx
index ce3801a0..ed6d76f7 100644
--- a/apps/web/src/features/feedback/ui/bug-icon.tsx
+++ b/apps/web/src/features/feedback/ui/bug-icon.tsx
@@ -2,6 +2,7 @@ import { useSetAtom } from "jotai";
 import { Bug } from "lucide-react";
 
 import { Button } from "#/shared/components/ui/button";
+
 import { feedbackModalOpenAtom } from "../store";
 
 export function BugIcon() {
diff --git a/apps/web/src/features/mode-sidebar/ui/preset-button.tsx b/apps/web/src/features/mode-sidebar/ui/preset-button.tsx
index 07944f96..c8d2b39b 100644
--- a/apps/web/src/features/mode-sidebar/ui/preset-button.tsx
+++ b/apps/web/src/features/mode-sidebar/ui/preset-button.tsx
@@ -11,9 +11,9 @@ import {
 } from "lucide-react";
 import { useCallback, useMemo, useRef } from "react";
 
-import { Button } from "#/shared/components/ui/button";
 import { SYSTEM_PROMPT_PRESETS } from "#/features/settings/lib/presets";
 import { settingsAtom, updateSettingsAtom } from "#/features/settings/state/settings-atoms";
+import { Button } from "#/shared/components/ui/button";
 
 import { sidebarDialogAtom } from "../state/dialog-atom";
 
diff --git a/apps/web/src/features/onboarding/ui/welcome-modal.tsx b/apps/web/src/features/onboarding/ui/welcome-modal.tsx
index 4830a4fa..0e83c3fd 100644
--- a/apps/web/src/features/onboarding/ui/welcome-modal.tsx
+++ b/apps/web/src/features/onboarding/ui/welcome-modal.tsx
@@ -106,4 +106,4 @@ export function WelcomeModal({
       </DialogContent>
     </Dialog>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/features/settings/ui/provider-selector.tsx b/apps/web/src/features/settings/ui/provider-selector.tsx
index 8edd8de1..b9801f67 100644
--- a/apps/web/src/features/settings/ui/provider-selector.tsx
+++ b/apps/web/src/features/settings/ui/provider-selector.tsx
@@ -1,7 +1,7 @@
+import type { ProviderType } from "@app/core/ai/providers";
 import { Check } from "lucide-react";
 
 import { Button } from "#/shared/components/ui/button";
-import type { ProviderType } from "@app/core/ai/providers";
 
 interface ProviderSelectorProps {
   providerType: ProviderType | undefined;
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index e8ef5cff..d2700ada 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,5 +1,5 @@
-import { createLogger } from "@app/logger";
 import { initAnalytics } from "@app/analytics";
+import { createLogger } from "@app/logger";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { createStore, Provider } from "jotai";
 import { StrictMode } from "react";
diff --git a/apps/web/src/shared/components/ui/popover.tsx b/apps/web/src/shared/components/ui/popover.tsx
index 319ca6b5..c3380c2d 100644
--- a/apps/web/src/shared/components/ui/popover.tsx
+++ b/apps/web/src/shared/components/ui/popover.tsx
@@ -1,18 +1,14 @@
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "radix-ui"
+import { Popover as PopoverPrimitive } from "radix-ui";
+import * as React from "react";
 
-import { cn } from "#/lib/utils"
+import { cn } from "#/lib/utils";
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
@@ -29,18 +25,16 @@ function PopoverContent({
         sideOffset={sideOffset}
         className={cn(
           "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
+          className,
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
 function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -50,30 +44,21 @@ function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1 text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
-  return (
-    <div
-      data-slot="popover-title"
-      className={cn("font-medium", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="popover-title" className={cn("font-medium", className)} {...props} />;
 }
 
-function PopoverDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">) {
+function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <p
       data-slot="popover-description"
       className={cn("text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -84,4 +69,4 @@ export {
   PopoverHeader,
   PopoverTitle,
   PopoverDescription,
-}
+};
diff --git a/apps/web/src/shared/components/ui/progress.tsx b/apps/web/src/shared/components/ui/progress.tsx
index 9f58a139..f1a772ff 100644
--- a/apps/web/src/shared/components/ui/progress.tsx
+++ b/apps/web/src/shared/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Progress as ProgressPrimitive } from "radix-ui"
+import { Progress as ProgressPrimitive } from "radix-ui";
+import * as React from "react";
 
-import { cn } from "#/lib/utils"
+import { cn } from "#/lib/utils";
 
 function Progress({
   className,
@@ -13,10 +13,7 @@ function Progress({
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-        className
-      )}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -25,7 +22,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
-export { Progress }
+export { Progress };
diff --git a/apps/web/src/shared/components/ui/textarea.tsx b/apps/web/src/shared/components/ui/textarea.tsx
index 47591225..764c26c2 100644
--- a/apps/web/src/shared/components/ui/textarea.tsx
+++ b/apps/web/src/shared/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "#/lib/utils"
+import { cn } from "#/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
@@ -8,11 +8,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx b/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx
index 0860e5c8..0be12a3b 100644
--- a/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/image-pill.tsx
@@ -1,8 +1,7 @@
 import { X } from "lucide-react";
 
-import { Button } from "#/shared/components/ui/button";
-
 import type { SelectedImage } from "#/features/settings/types";
+import { Button } from "#/shared/components/ui/button";
 
 interface ImagePillProps {
   image: SelectedImage;
diff --git a/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx b/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx
index 4a4efaff..c7c68d8d 100644
--- a/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx
+++ b/apps/web/src/widgets/prompt-bar/ui/prompt-library.tsx
@@ -1,6 +1,7 @@
+import { X } from "lucide-react";
 import { useState } from "react";
+
 import { Button } from "#/shared/components/ui/button";
-import { X } from "lucide-react";
 
 interface PromptLibraryProps {
   open: boolean;
@@ -151,18 +152,10 @@ export function PromptLibrary({ open, onClose, onUsePrompt }: PromptLibraryProps
                       </div>
                     </div>
                     <div className="flex items-center gap-1.5 mt-2.5 opacity-0 group-hover/item:opacity-100 transition-opacity">
-                      <Button
-                        variant="default"
-                        size="sm"
-                        onClick={() => handleUse(p.text)}
-                      >
+                      <Button variant="default" size="sm" onClick={() => handleUse(p.text)}>
                         Use prompt →
                       </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => handleCopy(p.text)}
-                      >
+                      <Button variant="ghost" size="sm" onClick={() => handleCopy(p.text)}>
                         {copied === p.text ? "Copied ✓" : "Copy"}
                       </Button>
                     </div>
diff --git a/apps/web/src/widgets/update-notification/UpdateNotification.tsx b/apps/web/src/widgets/update-notification/UpdateNotification.tsx
index 3a49ea4c..39ce8117 100644
--- a/apps/web/src/widgets/update-notification/UpdateNotification.tsx
+++ b/apps/web/src/widgets/update-notification/UpdateNotification.tsx
@@ -1,7 +1,8 @@
+import { Moon, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+
 import { Button } from "#/shared/components/ui/button";
-import { Moon, X } from "lucide-react";
 
 type UpdaterState =
   | { state: "idle" }
diff --git a/bun.lock b/bun.lock
index 912316fe..8e26e43f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -226,7 +226,7 @@
 
     "@adobe/css-tools": ["@adobe/css-tools@4.4.4", "", {}, "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg=="],
 
-    "@ai-sdk/anthropic": ["@ai-sdk/anthropic@3.0.74", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.26" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-Xew9rfz9WWhDSyF8rNhjT/XWOWelNfJrMlmG0Ahw210hStisRpQZ1s+7VeI9JTJOZ5y5tXqBi5kfPwYnCfyRTA=="],
+    "@ai-sdk/anthropic": ["@ai-sdk/anthropic@3.0.75", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.26" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-5AV3CKwaOJFdGXhihVgvRLNrjwRn2Xmy71YygT8DYOA+5zTx93Seg2QSIS8b3tJxzZ7X4H84pEtrE8VZKBCZGA=="],
 
     "@ai-sdk/gateway": ["@ai-sdk/gateway@3.0.110", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.26", "@vercel/oidc": "3.2.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-sbv8+1L9/BRKydn8dMNwoMQKupA4iLJ9N+yvxgW6wMQ/94UepDf3FeYWMj/dLdzolAHZ6izRUP4s5WqQkmJ2Zg=="],
 
@@ -384,17 +384,17 @@
 
     "@cloudflare/unenv-preset": ["@cloudflare/unenv-preset@2.16.1", "", { "peerDependencies": { "unenv": "2.0.0-rc.24", "workerd": ">1.20260305.0 <2.0.0-0" }, "optionalPeers": ["workerd"] }, "sha512-ECxObrMfyTl5bhQf/lZCXwo5G6xX9IAUo+nDMKK4SZ8m4Jvvxp52vilxyySSWh2YTZz8+HQ07qGH/2rEom1vDw=="],
 
-    "@cloudflare/workerd-darwin-64": ["@cloudflare/workerd-darwin-64@1.20260430.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-ADohZUHf7NBvPp2PdZig2Opxx+hDkk3ve7jrTne3JRx9kDSB73zc4LzcEeEN8LKkbAcqZmvfRJfpChSlusu0lA=="],
+    "@cloudflare/workerd-darwin-64": ["@cloudflare/workerd-darwin-64@1.20260504.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-IOMjYoftNRXabFt+QzY2Bo2mR2TNl8xsGvE0HnQ+K0S2c61VOUGUkr9gpJjnwrJ65yA9Qed4xfg0RRqXHO+nfA=="],
 
-    "@cloudflare/workerd-darwin-arm64": ["@cloudflare/workerd-darwin-arm64@1.20260430.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/DoYC/1wHs+YRZzzqSQg1/EHB4hiv1yV5U8FnmapRRIzVaPtnt+ApeOXeMrIdKidgKOI8TqQzgBU8xbIM7Cl4Q=="],
+    "@cloudflare/workerd-darwin-arm64": ["@cloudflare/workerd-darwin-arm64@1.20260504.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-7iMXxIU0N5KklZpQm2kuwTm0XtrpHXNqhejJyGquky8gSTnm31zBdutjMekH8VRr6ckbvZIl6lvqXzXdfOEojg=="],
 
-    "@cloudflare/workerd-linux-64": ["@cloudflare/workerd-linux-64@1.20260430.1", "", { "os": "linux", "cpu": "x64" }, "sha512-koJhBWvEVZPKCVFtMLp2iMHlYr+lFCF47wGbnlKdHVlemV0zTxJEyHI8aLlrhPLhBmOmYLp46rXw09/qJkRIhQ=="],
+    "@cloudflare/workerd-linux-64": ["@cloudflare/workerd-linux-64@1.20260504.1", "", { "os": "linux", "cpu": "x64" }, "sha512-YLB0EH5FQV++oWlalFgPF3p2Bp3dn/D6RWNMw0ukEC8gKnNX6o61A+dlFUl8hRD35ja1zKRxGFUojs4U2+MoJA=="],
 
-    "@cloudflare/workerd-linux-arm64": ["@cloudflare/workerd-linux-arm64@1.20260430.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-hMdapNAzNQZDXGGkg4Slydc3fRJP5FUZLJVVcZCW/+imhhJro9Z1rv5n/wfR+txKoSWhTYR8eOp8Pyi2bzLzlw=="],
+    "@cloudflare/workerd-linux-arm64": ["@cloudflare/workerd-linux-arm64@1.20260504.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-FAh/82jDXDArfn9xDih6f/IJfF2SHXBb4nFeQAyHyvXrn18zM6Q3yl2Vj0U7LybbNbmu7TNGghwaM2NoSQS+0A=="],
 
-    "@cloudflare/workerd-windows-64": ["@cloudflare/workerd-windows-64@1.20260430.1", "", { "os": "win32", "cpu": "x64" }, "sha512-jS3ffixjb5USOwz4frw4WzCz0HrjVxkgyU3WiYb06N7hBAfN6eOrveAJ4QRef0+suK4V1vQFoB1oKdRBsXe9Dw=="],
+    "@cloudflare/workerd-windows-64": ["@cloudflare/workerd-windows-64@1.20260504.1", "", { "os": "win32", "cpu": "x64" }, "sha512-QUg/B3dfrK/KHHHhiJzdkLkTg5mG7lA3t8iplbBoUa3XKCLOHOOXhbU4WSYlLqg8YnsQ6XLZ1HVA99fmZhJh7A=="],
 
-    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20260505.1", "", {}, "sha512-Uz9D2hcwB4/pdnmCU7RsgknY8TQ5st0cQMMN6h/hvWt1TCt99GUkbi6dMgWdP7jXfIfh+S/EI5zQugI9RZn4Bw=="],
+    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20260506.1", "", {}, "sha512-IKv/C08utEbAqEu2zr0/3CMf1MbYrl7x0Z1UsrnMs4xxfIN81vtGTRduCZb7xJQpaICQPe0Sa6fhHlZmUXrMjw=="],
 
     "@commitlint/cli": ["@commitlint/cli@20.5.3", "", { "dependencies": { "@commitlint/format": "^20.5.0", "@commitlint/lint": "^20.5.3", "@commitlint/load": "^20.5.3", "@commitlint/read": "^20.5.0", "@commitlint/types": "^20.5.0", "tinyexec": "^1.0.0", "yargs": "^17.0.0" }, "bin": { "commitlint": "./cli.js" } }, "sha512-OJdL0EXWD5y9LPa0nr/geOwzaS8BsdaybKkcloB0JgsguGxNv2R+hC2FTPqrAcprg35zF33KOQerY0x8W1aesA=="],
 
@@ -772,9 +772,9 @@
 
     "@poppinss/exception": ["@poppinss/exception@1.2.3", "", {}, "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw=="],
 
-    "@posthog/core": ["@posthog/core@1.28.2", "", { "dependencies": { "@posthog/types": "1.372.8" } }, "sha512-Dii3pxDheG1WioztvV/MqHQMnb16jSFrl2HkDR1T5yf5/R7lPqJCFYt+eXkEdp/oAv/PD+1joyG6Ap/2quFmtQ=="],
+    "@posthog/core": ["@posthog/core@1.28.3", "", { "dependencies": { "@posthog/types": "1.372.9" } }, "sha512-SOy0aphKawZzp8jxfeOpTcXPwi6ii0I2V6tX8YXnM+WbxKKR/R+BXLK0jS6LV8kZtW3H5YxmPAfuIbUP1UnGTw=="],
 
-    "@posthog/types": ["@posthog/types@1.372.8", "", {}, "sha512-ALpfCnWsMSM9Cw/6kyLPVpd81ZReEdZwmDxOi+DTJuIo7wDxBiu2cAsjOuA6D/AL22v7HOJrHsmBAPAWqS5X7Q=="],
+    "@posthog/types": ["@posthog/types@1.372.9", "", {}, "sha512-B7k9S+H9WUKHXxe1HOkQWbpWtMcrBvsodm5stZaLQ3pYxf9TowtwssdzTtX4hHjzSYqgrS1IpNnJX4vs1KgBzA=="],
 
     "@protobufjs/aspromise": ["@protobufjs/aspromise@1.1.2", "", {}, "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="],
 
@@ -1050,15 +1050,15 @@
 
     "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.100.9", "", { "dependencies": { "@tanstack/query-devtools": "5.100.9" }, "peerDependencies": { "@tanstack/react-query": "^5.100.9", "react": "^18 || ^19" } }, "sha512-mM3slaVGXJmz+pOLgXdANj75ikgQCyudyl3kmFvm6brI1JyVeY/+IeD17uDHIvZrD8hfoO2sdZ54RFsHdYAuhA=="],
 
-    "@tanstack/react-router": ["@tanstack/react-router@1.169.1", "", { "dependencies": { "@tanstack/history": "1.161.6", "@tanstack/react-store": "^0.9.3", "@tanstack/router-core": "1.169.1", "isbot": "^5.1.22" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-MBtQKSvac3OCcsSa6oBpDrrN90IV47I6Gtv05NxhbFVh+gVjtqvs6HSU4XM9+y5sHZPgS+35eArflX4vM8GEnQ=="],
+    "@tanstack/react-router": ["@tanstack/react-router@1.169.2", "", { "dependencies": { "@tanstack/history": "1.161.6", "@tanstack/react-store": "^0.9.3", "@tanstack/router-core": "1.169.2", "isbot": "^5.1.22" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-OJM7Kguc7ERnweaNRWsyWgIKcl3z23rD1B4jaxjzd9RGdnzpt2HfrWa9rggbT0Hfzhfo4D2ZmsfoTme035tniQ=="],
 
     "@tanstack/react-store": ["@tanstack/react-store@0.9.3", "", { "dependencies": { "@tanstack/store": "0.9.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg=="],
 
-    "@tanstack/router-core": ["@tanstack/router-core@1.169.1", "", { "dependencies": { "@tanstack/history": "1.161.6", "cookie-es": "^3.0.0", "seroval": "^1.5.0", "seroval-plugins": "^1.5.0" }, "bin": { "intent": "bin/intent.js" } }, "sha512-x+2gIGKTTE1qAn7tLieGfrB5ciOviDmmi2ox9fAWUubRV+yTU5ruGFXocoCIWF+lB+SOtnHjo2E9BLSWyYoEmA=="],
+    "@tanstack/router-core": ["@tanstack/router-core@1.169.2", "", { "dependencies": { "@tanstack/history": "1.161.6", "cookie-es": "^3.0.0", "seroval": "^1.5.4", "seroval-plugins": "^1.5.4" } }, "sha512-5sm0DJF1A7Mz+9gy4Gz/lLovNailK3yot4vYvz9MkBUPw26uLnhQiR8hSCYxucjE0wD6Mdlc5l+Z0/XTlZ7xHw=="],
 
-    "@tanstack/router-generator": ["@tanstack/router-generator@1.166.40", "", { "dependencies": { "@babel/types": "^7.28.5", "@tanstack/router-core": "1.169.1", "@tanstack/router-utils": "1.161.8", "@tanstack/virtual-file-routes": "1.161.7", "jiti": "^2.6.1", "magic-string": "^0.30.21", "prettier": "^3.5.0", "zod": "^3.24.2" } }, "sha512-78WYpSUBeNFkxJZ76nltzccKdGKNZSqfwCts424nVOyM6nF5CSXPS5Lfbyu28u3Gi7Pu/mGR3e4Rkc9WDKNP1Q=="],
+    "@tanstack/router-generator": ["@tanstack/router-generator@1.166.41", "", { "dependencies": { "@babel/types": "^7.28.5", "@tanstack/router-core": "1.169.2", "@tanstack/router-utils": "1.161.8", "@tanstack/virtual-file-routes": "1.161.7", "jiti": "^2.6.1", "magic-string": "^0.30.21", "prettier": "^3.5.0", "zod": "^3.24.2" } }, "sha512-XpnkVvk9AlCtw5vggJsnSx3MdKGk8Asopwy9wUFAqFAHqlrRJzV9PoZ5kGkNEJMOYYcMTriJLN4D+kyXRUJpDQ=="],
 
-    "@tanstack/router-plugin": ["@tanstack/router-plugin@1.167.33", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.27.1", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@tanstack/router-core": "1.169.1", "@tanstack/router-generator": "1.166.40", "@tanstack/router-utils": "1.161.8", "@tanstack/virtual-file-routes": "1.161.7", "chokidar": "^3.6.0", "unplugin": "^3.0.0", "zod": "^3.24.2" }, "peerDependencies": { "@rsbuild/core": ">=1.0.2 || ^2.0.0", "@tanstack/react-router": "^1.169.1", "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0 || >=8.0.0", "vite-plugin-solid": "^2.11.10 || ^3.0.0-0", "webpack": ">=5.92.0" }, "optionalPeers": ["@rsbuild/core", "@tanstack/react-router", "vite", "vite-plugin-solid", "webpack"] }, "sha512-oopYVBUpLeT28EPpXmnKOtqfeEtY4IYp4YOYLx3OuRMQcOUsssU7lug4KhEhVGUxLx+S9jcBhcMb3bCyTUVlwA=="],
+    "@tanstack/router-plugin": ["@tanstack/router-plugin@1.167.34", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.27.1", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@tanstack/router-core": "1.169.2", "@tanstack/router-generator": "1.166.41", "@tanstack/router-utils": "1.161.8", "@tanstack/virtual-file-routes": "1.161.7", "chokidar": "^3.6.0", "unplugin": "^3.0.0", "zod": "^3.24.2" }, "peerDependencies": { "@rsbuild/core": ">=1.0.2 || ^2.0.0", "@tanstack/react-router": "^1.169.2", "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0 || >=8.0.0", "vite-plugin-solid": "^2.11.10 || ^3.0.0-0", "webpack": ">=5.92.0" }, "optionalPeers": ["@rsbuild/core", "@tanstack/react-router", "vite", "vite-plugin-solid", "webpack"] }, "sha512-hU0Cuw79Yo6FGPBB0mW9Ik8bnTzmnUKtbgbvmIzeFdK3wKBPS4+xN7kcxVaBqXfP6xR3PFkIf2SSoYsiuLjVtg=="],
 
     "@tanstack/router-utils": ["@tanstack/router-utils@1.161.8", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/generator": "^7.28.5", "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", "ansis": "^4.1.0", "babel-dead-code-elimination": "^1.0.12", "diff": "^8.0.2", "pathe": "^2.0.3", "tinyglobby": "^0.2.15" } }, "sha512-xyiLWEKjfBAVhauDSSjXxyf7s8elU6SM+V050sbkofvGmIIvkwPFtDsX7Gvwh14kBd6iCwAT+RiPvXTxAptY0Q=="],
 
@@ -1170,7 +1170,7 @@
 
     "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.59.2", "", { "dependencies": { "@typescript-eslint/types": "8.59.2", "eslint-visitor-keys": "^5.0.0" } }, "sha512-NwjLUnGy8/Zfx23fl50tRC8rYaYnM52xNRYFAXvmiil9yh1+K6aRVQMnzW6gQB/1DLgWt977lYQn7C+wtgXZiA=="],
 
-    "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
+    "@ungap/structured-clone": ["@ungap/structured-clone@1.3.1", "", {}, "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ=="],
 
     "@vercel/oidc": ["@vercel/oidc@3.2.0", "", {}, "sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug=="],
 
@@ -1516,7 +1516,7 @@
 
     "electrobun": ["electrobun@1.18.1", "", { "dependencies": { "@babylonjs/core": "^7.45.0", "@types/bun": "^1.3.8", "png-to-ico": "^2.1.8", "proxy-agent": "^6.5.0", "rcedit": "^4.0.1", "three": "^0.165.0" }, "bin": { "electrobun": "bin/electrobun.cjs" } }, "sha512-tgZ+WKGskn/1/Y5i1mpVCCkgRa1O31Tz7MIArBTK44GfPzT43uOq9c/HvxdQGrLeZV8ZvjK1lQrwqSXCgh6tvA=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.349", "", {}, "sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.351", "", {}, "sha512-9D7Iqx8RImSvCnOsj86rCH6eQjZFQoM04Jn6HnZVM0Nu/G58/gmKYQ1d12MZTbjQbQSTGI8nwEy07ErsA2slLA=="],
 
     "emmet": ["emmet@2.4.11", "", { "dependencies": { "@emmetio/abbreviation": "^2.3.3", "@emmetio/css-abbreviation": "^2.1.8" } }, "sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ=="],
 
@@ -1814,15 +1814,15 @@
 
     "isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
 
-    "isbot": ["isbot@5.1.39", "", {}, "sha512-obH0yYahGXdzNxo+djmHhBYThUKDkz565cxkIlt2L9hXfv1NlaLKoDBHo6KxXsYrIXx2RK3x5vY36CfZcobxEw=="],
+    "isbot": ["isbot@5.1.40", "", {}, "sha512-yNeeynhhtIVRBk12tBV4eHNxwB42HzR4Q3Ea7vCOiJhImGaAIdIMrbJtacQlBizGLjUPw+akkFI5Dn9T70XoVQ=="],
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
-    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
+    "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
 
     "jose": ["jose@6.2.3", "", {}, "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw=="],
 
-    "jotai": ["jotai@2.19.1", "", { "peerDependencies": { "@babel/core": ">=7.0.0", "@babel/template": ">=7.0.0", "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@babel/core", "@babel/template", "@types/react", "react"] }, "sha512-sqm9lVZiqBHZH8aSRk32DSiZDHY3yUIlulXYn9GQj7/LvoUdYXSMti7ZPJGo+6zjzKFt5a25k/I6iBCi43PJcw=="],
+    "jotai": ["jotai@2.20.0", "", { "peerDependencies": { "@babel/core": ">=7.0.0", "@babel/template": ">=7.0.0", "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@babel/core", "@babel/template", "@types/react", "react"] }, "sha512-b5GAqgmXmXzB4WPaTH26ppk9Sl7AA9WSQX7yfdM+gJ1rFROiWcVbi97gFuN/yVCojOcbcvop2sfLL+fjxW0JVg=="],
 
     "js-tiktoken": ["js-tiktoken@1.0.21", "", { "dependencies": { "base64-js": "^1.5.1" } }, "sha512-biOj/6M5qdgx5TKjDnFT1ymSpM5tbd3ylwDtrQvFQSu0Z7bBYko2dF+W/aUkXUPuk6IVpRxk/3Q2sHOzGlS36g=="],
 
@@ -2042,7 +2042,7 @@
 
     "min-indent": ["min-indent@1.0.1", "", {}, "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="],
 
-    "miniflare": ["miniflare@4.20260430.0", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "^0.34.5", "undici": "7.24.8", "workerd": "1.20260430.1", "ws": "8.18.0", "youch": "4.1.0-beta.10" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-MWvMm3Siho9Yj7lbJZidLs8hbrRvIcOrif2mnsHQZdvoKfedpea+GaN8XJxbpRcq0B2WzNI1BB1ihdnqes3/ZA=="],
+    "miniflare": ["miniflare@4.20260504.0", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "^0.34.5", "undici": "7.24.8", "workerd": "1.20260504.1", "ws": "8.18.0", "youch": "4.1.0-beta.10" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-HeI/HLx+rbeo/UB4qb6NsNcFdUVD7xDzyCexZJTVtFMlfpfexUKEDmdeTRRpzeHrJseZFGua+v9JO1kfPublUw=="],
 
     "minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
 
@@ -2180,7 +2180,7 @@
 
     "postcss": ["postcss@8.5.14", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg=="],
 
-    "posthog-js": ["posthog-js@1.372.8", "", { "dependencies": { "@opentelemetry/api": "^1.9.0", "@opentelemetry/api-logs": "^0.208.0", "@opentelemetry/exporter-logs-otlp-http": "^0.208.0", "@opentelemetry/resources": "^2.2.0", "@opentelemetry/sdk-logs": "^0.208.0", "@posthog/core": "1.28.2", "@posthog/types": "1.372.8", "core-js": "^3.38.1", "dompurify": "^3.3.2", "fflate": "^0.4.8", "preact": "^10.28.2", "query-selector-shadow-dom": "^1.0.1", "web-vitals": "^5.1.0" } }, "sha512-NAFWVScFGnU5jgGNLkrY/UnGH82uULs9RsJ/f26LkLn1l0MOZfq+/z+2RaOOQQX4NHruIVuxqz3J/50bgRG68A=="],
+    "posthog-js": ["posthog-js@1.372.9", "", { "dependencies": { "@opentelemetry/api": "^1.9.0", "@opentelemetry/api-logs": "^0.208.0", "@opentelemetry/exporter-logs-otlp-http": "^0.208.0", "@opentelemetry/resources": "^2.2.0", "@opentelemetry/sdk-logs": "^0.208.0", "@posthog/core": "1.28.3", "@posthog/types": "1.372.9", "core-js": "^3.38.1", "dompurify": "^3.3.2", "fflate": "^0.4.8", "preact": "^10.28.2", "query-selector-shadow-dom": "^1.0.1", "web-vitals": "^5.1.0" } }, "sha512-qFhTxxrONCO4YBubuEp6/f3beRPku8OqgfHwpSro/XcDU0oPXMVyvsXGUnxhjaq4PvQb79PwvquAX0/HIGcnWg=="],
 
     "posthog-node": ["posthog-node@3.1.3", "", { "dependencies": { "axios": "^1.6.0", "rusha": "^0.8.14" } }, "sha512-UaOOoWEUYTcaaDe1w0fgHW/sXvFr3RO0l7yI7RUDzkZNZCfwXNO9r3pc14d1EtNppF/SHBrV5hNiZZATpf/vUw=="],
 
@@ -2322,9 +2322,9 @@
 
     "send": ["send@1.2.1", "", { "dependencies": { "debug": "^4.4.3", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "fresh": "^2.0.0", "http-errors": "^2.0.1", "mime-types": "^3.0.2", "ms": "^2.1.3", "on-finished": "^2.4.1", "range-parser": "^1.2.1", "statuses": "^2.0.2" } }, "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ=="],
 
-    "seroval": ["seroval@1.5.3", "", {}, "sha512-BXe0x4buEeYiIKaRUnth1WqCILQ3k4O67KP/B4pC3pVz0Mv2c96ngA9QDREUYxWY1sb2RZVRqwI9RcpVMyHCVw=="],
+    "seroval": ["seroval@1.5.4", "", {}, "sha512-46uFvgrXTVxZcUorgSSRZ4y+ieqLLQRMlG4bnCZKW3qI6BZm7Rg4ntMW4p1mILEEBZWrFlcpp0AyIIlM6jD9iw=="],
 
-    "seroval-plugins": ["seroval-plugins@1.5.3", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-LhVh4KjjkKmCxOUjoaUwtqbDjyMfnA535yEmmGDuwZcIYtw8ns6tZmeszNTECeUg/3sJpnEjsz/KhQrcPXPw1Q=="],
+    "seroval-plugins": ["seroval-plugins@1.5.4", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-S0xQPhUTefAhNvNWFg0c1J8qJArHt5KdtJ/cFAofo06KD1MVSeFWyl4iiu+ApDIuw0WhjpOfCdgConOfAnLgkw=="],
 
     "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],
 
@@ -2636,9 +2636,9 @@
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
-    "workerd": ["workerd@1.20260430.1", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260430.1", "@cloudflare/workerd-darwin-arm64": "1.20260430.1", "@cloudflare/workerd-linux-64": "1.20260430.1", "@cloudflare/workerd-linux-arm64": "1.20260430.1", "@cloudflare/workerd-windows-64": "1.20260430.1" }, "bin": { "workerd": "bin/workerd" } }, "sha512-KEgIWyiw3Jmn+DCd/L3ePo5fmiiYb/UcwKvDWPf/nLLOiwShDFzDSsegU5NY/JcwgvO/QsLHVi2FYrbkcXNY5Q=="],
+    "workerd": ["workerd@1.20260504.1", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260504.1", "@cloudflare/workerd-darwin-arm64": "1.20260504.1", "@cloudflare/workerd-linux-64": "1.20260504.1", "@cloudflare/workerd-linux-arm64": "1.20260504.1", "@cloudflare/workerd-windows-64": "1.20260504.1" }, "bin": { "workerd": "bin/workerd" } }, "sha512-AQTXSHbYNP9tLPgJNn0TmizyE4aDh2VuZZXlTAL0uu4fbCY436NAnQSJIzZbaFHM3DnAtVs9G8tkiJztSdYqDg=="],
 
-    "wrangler": ["wrangler@4.87.0", "", { "dependencies": { "@cloudflare/kv-asset-handler": "0.5.0", "@cloudflare/unenv-preset": "2.16.1", "blake3-wasm": "2.1.5", "esbuild": "0.27.3", "miniflare": "4.20260430.0", "path-to-regexp": "6.3.0", "unenv": "2.0.0-rc.24", "workerd": "1.20260430.1" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@cloudflare/workers-types": "^4.20260430.1" }, "optionalPeers": ["@cloudflare/workers-types"], "bin": { "wrangler": "bin/wrangler.js", "wrangler2": "bin/wrangler.js" } }, "sha512-lfhfKwLfQlowwgV0xhlYgE9fU3n0I30d4ccGY/rTCEm/n42Mjvlr0Ng3ZPNqlsrsKBcDR531V7dsPkgELvrk/Q=="],
+    "wrangler": ["wrangler@4.88.0", "", { "dependencies": { "@cloudflare/kv-asset-handler": "0.5.0", "@cloudflare/unenv-preset": "2.16.1", "blake3-wasm": "2.1.5", "esbuild": "0.27.3", "miniflare": "4.20260504.0", "path-to-regexp": "6.3.0", "unenv": "2.0.0-rc.24", "workerd": "1.20260504.1" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@cloudflare/workers-types": "^4.20260504.1" }, "optionalPeers": ["@cloudflare/workers-types"], "bin": { "wrangler": "bin/wrangler.js", "wrangler2": "bin/wrangler.js" } }, "sha512-f470QwbeT/JM1S0duq+sLtkss7UBxIFDtYHgujv9tdQUyA/dLGDq51am0rqrsuFtCi97lTM1P5sqtt8xra1AlA=="],
 
     "wrap-ansi": ["wrap-ansi@9.0.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "string-width": "^7.0.0", "strip-ansi": "^7.1.0" } }, "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww=="],
 
@@ -2834,8 +2834,6 @@
 
     "astro/es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
-    "astro/esbuild": ["esbuild@0.27.7", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.7", "@esbuild/android-arm": "0.27.7", "@esbuild/android-arm64": "0.27.7", "@esbuild/android-x64": "0.27.7", "@esbuild/darwin-arm64": "0.27.7", "@esbuild/darwin-x64": "0.27.7", "@esbuild/freebsd-arm64": "0.27.7", "@esbuild/freebsd-x64": "0.27.7", "@esbuild/linux-arm": "0.27.7", "@esbuild/linux-arm64": "0.27.7", "@esbuild/linux-ia32": "0.27.7", "@esbuild/linux-loong64": "0.27.7", "@esbuild/linux-mips64el": "0.27.7", "@esbuild/linux-ppc64": "0.27.7", "@esbuild/linux-riscv64": "0.27.7", "@esbuild/linux-s390x": "0.27.7", "@esbuild/linux-x64": "0.27.7", "@esbuild/netbsd-arm64": "0.27.7", "@esbuild/netbsd-x64": "0.27.7", "@esbuild/openbsd-arm64": "0.27.7", "@esbuild/openbsd-x64": "0.27.7", "@esbuild/openharmony-arm64": "0.27.7", "@esbuild/sunos-x64": "0.27.7", "@esbuild/win32-arm64": "0.27.7", "@esbuild/win32-ia32": "0.27.7", "@esbuild/win32-x64": "0.27.7" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w=="],
-
     "astro/package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
 
     "astro/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
@@ -2848,6 +2846,8 @@
 
     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
+    "cosmiconfig-typescript-loader/jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
+
     "cross-spawn-windows-exe/is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
 
     "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="],
@@ -3034,58 +3034,6 @@
 
     "@tanstack/router-plugin/chokidar/readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
-    "astro/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.7", "", { "os": "aix", "cpu": "ppc64" }, "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg=="],
-
-    "astro/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.27.7", "", { "os": "android", "cpu": "arm" }, "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ=="],
-
-    "astro/esbuild/@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.7", "", { "os": "android", "cpu": "arm64" }, "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ=="],
-
-    "astro/esbuild/@esbuild/android-x64": ["@esbuild/android-x64@0.27.7", "", { "os": "android", "cpu": "x64" }, "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg=="],
-
-    "astro/esbuild/@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw=="],
-
-    "astro/esbuild/@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ=="],
-
-    "astro/esbuild/@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.7", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w=="],
-
-    "astro/esbuild/@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.7", "", { "os": "freebsd", "cpu": "x64" }, "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ=="],
-
-    "astro/esbuild/@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.7", "", { "os": "linux", "cpu": "arm" }, "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA=="],
-
-    "astro/esbuild/@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A=="],
-
-    "astro/esbuild/@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.7", "", { "os": "linux", "cpu": "ia32" }, "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg=="],
-
-    "astro/esbuild/@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.7", "", { "os": "linux", "cpu": "none" }, "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q=="],
-
-    "astro/esbuild/@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.7", "", { "os": "linux", "cpu": "none" }, "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw=="],
-
-    "astro/esbuild/@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.7", "", { "os": "linux", "cpu": "ppc64" }, "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ=="],
-
-    "astro/esbuild/@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.7", "", { "os": "linux", "cpu": "none" }, "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ=="],
-
-    "astro/esbuild/@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.7", "", { "os": "linux", "cpu": "s390x" }, "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw=="],
-
-    "astro/esbuild/@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.7", "", { "os": "linux", "cpu": "x64" }, "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA=="],
-
-    "astro/esbuild/@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.7", "", { "os": "none", "cpu": "arm64" }, "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w=="],
-
-    "astro/esbuild/@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.7", "", { "os": "none", "cpu": "x64" }, "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw=="],
-
-    "astro/esbuild/@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.7", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A=="],
-
-    "astro/esbuild/@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.7", "", { "os": "openbsd", "cpu": "x64" }, "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg=="],
-
-    "astro/esbuild/@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.7", "", { "os": "none", "cpu": "arm64" }, "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw=="],
-
-    "astro/esbuild/@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.7", "", { "os": "sunos", "cpu": "x64" }, "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA=="],
-
-    "astro/esbuild/@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA=="],
-
-    "astro/esbuild/@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.7", "", { "os": "win32", "cpu": "ia32" }, "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw=="],
-
-    "astro/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.7", "", { "os": "win32", "cpu": "x64" }, "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg=="],
-
     "boxen/string-width/emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
 
     "boxen/string-width/strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
diff --git a/packages/analytics/src/__tests__/posthog-client.test.ts b/packages/analytics/src/__tests__/posthog-client.test.ts
index fc3869c0..99e3a45a 100644
--- a/packages/analytics/src/__tests__/posthog-client.test.ts
+++ b/packages/analytics/src/__tests__/posthog-client.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
   init: vi.fn(),
@@ -44,7 +44,7 @@ describe("posthog-client", () => {
       expect(mocks.init).toHaveBeenCalledTimes(1);
       const [apiKey, config] = mocks.init.mock.calls[0]!;
       expect(apiKey).toBe("test-api-key");
-      expect(config.api_host).toBe("https://eu.posthog.com");
+      expect(config.api_host).toBe("https://us.i.posthog.com");
       expect(config.disable_external_dependency_loading).toBe(true);
       expect(config.persistence).toBe("localStorage");
     });

From e5a50704041c3e35e84347980f7e6e1ae59fabcf Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:59:32 +0200
Subject: [PATCH 29/46] fix(web): remove remaining use of hardcoded model names

---
 apps/web/src/features/settings/types.ts     | 15 ---------------
 apps/web/src/widgets/toolbar/ui/toolbar.tsx | 10 +++++-----
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/features/settings/types.ts b/apps/web/src/features/settings/types.ts
index 3dcc7453..f0c161e8 100644
--- a/apps/web/src/features/settings/types.ts
+++ b/apps/web/src/features/settings/types.ts
@@ -51,18 +51,3 @@ export interface Settings {
   onboardingCompleted: boolean;
   analyticsEnabled: boolean;
 }
-
-export const MODELS: { id: string; label: string }[] = [
-  { id: "claude-sonnet-4-20250514", label: "Sonnet 4.5" },
-  { id: "claude-sonnet-4", label: "Sonnet 4" },
-  { id: "claude-opus-4", label: "Opus 4" },
-  { id: "claude-opus-4-5-20250918", label: "Opus 4.5" },
-  { id: "claude-opus-4-6", label: "Opus 4.6" },
-  { id: "claude-sonnet-4-5", label: "Sonnet 4.5" },
-  { id: "gpt-4o", label: "GPT-4o" },
-  { id: "gpt-4-turbo", label: "GPT-4 Turbo" },
-  { id: "gpt-4", label: "GPT-4" },
-  { id: "gpt-4o-mini", label: "GPT-4o Mini" },
-  { id: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
-  { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
-];
diff --git a/apps/web/src/widgets/toolbar/ui/toolbar.tsx b/apps/web/src/widgets/toolbar/ui/toolbar.tsx
index 5e392d1d..76eb2152 100644
--- a/apps/web/src/widgets/toolbar/ui/toolbar.tsx
+++ b/apps/web/src/widgets/toolbar/ui/toolbar.tsx
@@ -2,7 +2,6 @@ import { Menu, Settings } from "lucide-react";
 import { useState } from "react";
 
 import type { ProviderConfig } from "#/features/settings/types";
-import { MODELS } from "#/features/settings/types";
 import { SettingsDialog } from "#/features/settings/ui/settings-dialog";
 import { Button } from "#/shared/components/ui/button";
 import {
@@ -14,6 +13,8 @@ import {
 } from "#/shared/components/ui/dropdown-menu";
 import { Separator } from "#/shared/components/ui/separator";
 
+const NO_MODEL_SELECTED = "No model selected";
+
 interface ToolbarProps {
   isOwnKey: boolean;
   model: string;
@@ -34,10 +35,9 @@ export function Toolbar({
   hasFrames,
 }: ToolbarProps) {
   const [providerId, modelId] = model.includes("/") ? model.split("/") : [null, model];
-  const provider = providerId ? providers.find((p) => p.id === providerId) : undefined;
-  const displayModel = provider?.models.find((m) => m.id === modelId)?.displayName || modelId;
-  const modelLabel =
-    MODELS.find((m) => m.id === modelId)?.label || displayModel || model || "Sonnet 4.5";
+  const provider = providerId ? providers.find((_) => _.id === providerId) : undefined;
+  const displayModel = provider?.models.find((_) => _.id === modelId)?.displayName || modelId;
+  const modelLabel = displayModel || model || NO_MODEL_SELECTED;
   const [settingsOpen, setSettingsOpen] = useState(false);
 
   return (

From d3ff68360eec56b3002e1adc6b51faff8d793468 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 15:59:44 +0200
Subject: [PATCH 30/46] chore(web): remove dead code

---
 .../settings/ui/provider-selector.tsx         | 63 -------------------
 1 file changed, 63 deletions(-)
 delete mode 100644 apps/web/src/features/settings/ui/provider-selector.tsx

diff --git a/apps/web/src/features/settings/ui/provider-selector.tsx b/apps/web/src/features/settings/ui/provider-selector.tsx
deleted file mode 100644
index b9801f67..00000000
--- a/apps/web/src/features/settings/ui/provider-selector.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { ProviderType } from "@app/core/ai/providers";
-import { Check } from "lucide-react";
-
-import { Button } from "#/shared/components/ui/button";
-
-interface ProviderSelectorProps {
-  providerType: ProviderType | undefined;
-  onProviderChange: (provider: ProviderType) => void;
-  disabled?: boolean;
-}
-
-export default function ProviderSelector({
-  providerType,
-  onProviderChange,
-  disabled = false,
-}: ProviderSelectorProps) {
-  const providers = [
-    {
-      description: "Claude Opus 4.6, Sonnet 4.5, Opus 4, or Sonnet 4",
-      icon: "🤖",
-      id: "anthropic" as const,
-      label: "Anthropic",
-    },
-    {
-      description: "GPT-4, GPT-4o, GPT-3.5 Turbo, or custom endpoints",
-      icon: "🚀",
-      id: "openai-compatible" as const,
-      label: "OpenAI-Compatible",
-    },
-  ];
-
-  return (
-    <div className="space-y-2">
-      {providers.map((provider) => (
-        <Button
-          key={provider.id}
-          variant="ghost"
-          disabled={disabled}
-          onClick={() => onProviderChange(provider.id)}
-          className={`w-full flex items-center justify-between px-5 py-3.5 rounded-xl text-left transition-all ${
-            disabled
-              ? "opacity-35 cursor-not-allowed bg-gray-100/30 border border-transparent"
-              : providerType === provider.id
-                ? "bg-blue-500/10 border border-blue-300/40 text-gray-800"
-                : "bg-white/40 border border-transparent hover:bg-white/60 text-gray-600"
-          }`}
-        >
-          <div className="flex items-center gap-2">
-            <div>
-              <span className="text-[13px] font-medium">
-                {provider.icon} {provider.label}
-              </span>
-              <span className="text-[11px] text-gray-500 ml-2">{provider.description}</span>
-            </div>
-          </div>
-          {providerType === provider.id && !disabled && (
-            <Check className="w-4 h-4 text-blue-500 shrink-0" />
-          )}
-        </Button>
-      ))}
-    </div>
-  );
-}

From 4eaf7ac7ef46e595c3b1f284f32f86b496f44a07 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:25:34 +0200
Subject: [PATCH 31/46] chore(changeset): configure unified versioning with
 fixed array

---
 .changeset/config.json | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index a6e4a9d8..bf7c8d18 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -2,7 +2,21 @@
   "$schema": "https://unpkg.com/@changesets/config@3.1.3/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [],
+  "fixed": [
+    [
+      "@app/web",
+      "@app/server",
+      "@app/landing",
+      "@app/cli",
+      "@app/feedback-proxy",
+      "@app/electrobun",
+      "@app/core",
+      "@app/shared",
+      "@app/pro",
+      "@app/analytics",
+      "@app/logger"
+    ]
+  ],
   "linked": [],
   "access": "restricted",
   "baseBranch": "main",

From de05bfda425c5f93da158122b2d62fa855f4caf6 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:26:02 +0200
Subject: [PATCH 32/46] chore: bump core packages to 0.5.0

---
 packages/analytics/package.json | 2 +-
 packages/core/package.json      | 2 +-
 packages/logger/package.json    | 2 +-
 packages/pro/package.json       | 2 +-
 packages/shared/package.json    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/analytics/package.json b/packages/analytics/package.json
index 8dd8de0f..62ffb203 100644
--- a/packages/analytics/package.json
+++ b/packages/analytics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/analytics",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/core/package.json b/packages/core/package.json
index 4bbd53e6..353b25f3 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/core",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/logger/package.json b/packages/logger/package.json
index b0f299ec..6899ff16 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/logger",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/pro/package.json b/packages/pro/package.json
index e42cad18..9c962ce3 100644
--- a/packages/pro/package.json
+++ b/packages/pro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/pro",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": true,
   "description": "Calca Enterprise/Pro features — Elastic License v2",
   "license": "LicenseRef-ELv2",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 0fff035e..dfcbc36a 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/shared",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",

From 77eb37515cc6c6a9085ea3b799bcb1ed485f21ee Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:26:12 +0200
Subject: [PATCH 33/46] chore: bump app packages to 0.5.0

---
 apps/cli/package.json            | 2 +-
 apps/feedback-proxy/package.json | 2 +-
 apps/landing/package.json        | 2 +-
 apps/server/package.json         | 2 +-
 apps/web/package.json            | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/cli/package.json b/apps/cli/package.json
index 0bbb0ef2..ac94f80c 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/cli",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/apps/feedback-proxy/package.json b/apps/feedback-proxy/package.json
index f8cb72ce..8924f8e1 100644
--- a/apps/feedback-proxy/package.json
+++ b/apps/feedback-proxy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/feedback-proxy",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "private": true,
   "description": "Feedback proxy server — validates input, rate-limits, and creates GitHub Issues",
   "license": "AGPL-3.0",
diff --git a/apps/landing/package.json b/apps/landing/package.json
index 7ad745fe..a8188798 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/landing",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/apps/server/package.json b/apps/server/package.json
index 78e48052..f9f7cf2d 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/server",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/apps/web/package.json b/apps/web/package.json
index 123fa051..c88df7f5 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/web",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
@@ -30,8 +30,8 @@
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@tanstack/react-query": "^5.99.0",
     "@tanstack/react-query-devtools": "^5.99.0",
-    "@tour-kit/core": "^0.5.0",
-    "@tour-kit/react": "^0.5.0",
+    "@tour-kit/core": "^0.11.0",
+    "@tour-kit/react": "^0.11.0",
     "ai": "^6.0.156",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

From 16009bbcf08dc11d415567feec0b3fc868691cd6 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:26:21 +0200
Subject: [PATCH 34/46] chore: bump desktop and root to 0.5.0

---
 bun.lock                       | 34 +++++++++++++++++++---------------
 package.json                   |  2 +-
 platforms/desktop/package.json |  2 +-
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/bun.lock b/bun.lock
index 8e26e43f..52b5f942 100644
--- a/bun.lock
+++ b/bun.lock
@@ -27,11 +27,11 @@
     },
     "apps/cli": {
       "name": "@app/cli",
-      "version": "0.3.0",
+      "version": "0.5.0",
     },
     "apps/feedback-proxy": {
       "name": "@app/feedback-proxy",
-      "version": "0.1.0",
+      "version": "0.5.0",
       "dependencies": {
         "hono": "^4.0.0",
         "octokit": "^4.1.0",
@@ -47,7 +47,7 @@
     },
     "apps/landing": {
       "name": "@app/landing",
-      "version": "0.4.1",
+      "version": "0.5.0",
       "dependencies": {
         "@astrojs/check": "^0.9.9",
         "@astrojs/react": "^4.2.0",
@@ -66,7 +66,7 @@
     },
     "apps/server": {
       "name": "@app/server",
-      "version": "0.3.1",
+      "version": "0.5.0",
       "dependencies": {
         "@app/core": "workspace:*",
         "@app/logger": "workspace:*",
@@ -86,7 +86,7 @@
     },
     "apps/web": {
       "name": "@app/web",
-      "version": "0.3.1",
+      "version": "0.5.0",
       "dependencies": {
         "@ai-sdk/anthropic": "^3.0.68",
         "@ai-sdk/google": "^3.0.61",
@@ -100,8 +100,8 @@
         "@radix-ui/react-use-controllable-state": "^1.2.2",
         "@tanstack/react-query": "^5.99.0",
         "@tanstack/react-query-devtools": "^5.99.0",
-        "@tour-kit/core": "^0.5.0",
-        "@tour-kit/react": "^0.5.0",
+        "@tour-kit/core": "^0.11.0",
+        "@tour-kit/react": "^0.11.0",
         "ai": "^6.0.156",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -146,7 +146,7 @@
     },
     "packages/analytics": {
       "name": "@app/analytics",
-      "version": "0.3.0",
+      "version": "0.5.0",
       "dependencies": {
         "posthog-js": "^1.371.0",
       },
@@ -157,7 +157,7 @@
     },
     "packages/core": {
       "name": "@app/core",
-      "version": "0.3.1",
+      "version": "0.5.0",
       "dependencies": {
         "@ai-sdk/anthropic": "^3.0.68",
         "@ai-sdk/google": "^3.0.61",
@@ -175,7 +175,7 @@
     },
     "packages/logger": {
       "name": "@app/logger",
-      "version": "0.0.1",
+      "version": "0.5.0",
       "dependencies": {
         "@logtape/logtape": "^2.0.5",
         "@logtape/pretty": "^2.0.5",
@@ -188,14 +188,14 @@
     },
     "packages/pro": {
       "name": "@app/pro",
-      "version": "0.3.0",
+      "version": "0.5.0",
       "devDependencies": {
         "typescript": "^6.0.3",
       },
     },
     "packages/shared": {
       "name": "@app/shared",
-      "version": "0.3.0",
+      "version": "0.5.0",
       "dependencies": {
         "zod": "^3.24.0",
       },
@@ -205,7 +205,7 @@
     },
     "platforms/desktop": {
       "name": "@app/electrobun",
-      "version": "0.4.1",
+      "version": "0.5.0",
       "dependencies": {
         "@app/server": "workspace:*",
         "@logtape/file": "^2.0.5",
@@ -1074,9 +1074,13 @@
 
     "@tootallnate/quickjs-emscripten": ["@tootallnate/quickjs-emscripten@0.23.0", "", {}, "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="],
 
-    "@tour-kit/core": ["@tour-kit/core@0.5.1", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-i2yMH3e/CtPClJMVR516Snv6QOzbtOjBTyzSDTA34Wx9vUuMTBwDdT++5/B1dNncJtruaRafwRUehX7s2P2V3Q=="],
+    "@tour-kit/core": ["@tour-kit/core@0.11.0", "", { "dependencies": { "clsx": "^2.1.1", "tailwind-merge": "^3.5.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-M5O1nCY+pNZP1gv340KFLYND2spQnukBLAnEBpIVOqKuQCUXeTnwPgadoS1WBiZpb0CMb4smiVNQJuOir0S+lw=="],
 
-    "@tour-kit/react": ["@tour-kit/react@0.5.1", "", { "dependencies": { "@floating-ui/react": "^0.27.19", "@radix-ui/react-slot": "^1.2.4", "@tour-kit/core": "0.5.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "tailwind-merge": "^3.5.0" }, "peerDependencies": { "@mui/base": "^5.0.0-beta.0", "next": "^13.0.0 || ^14.0.0 || ^15.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "react-router": "^6.0.0 || ^7.0.0", "react-router-dom": "^6.0.0", "tailwindcss": "^3.4.0 || ^4.0.0" }, "optionalPeers": ["@mui/base", "next", "react-router", "react-router-dom", "tailwindcss"] }, "sha512-bH5TTwhyxe1ve2luefDEIITuxvCsMIanzFNib1eODKO5HEpkg64JnD+Cri3nusArTQHt9MZdBaO5TC9TxhNwgw=="],
+    "@tour-kit/license": ["@tour-kit/license@1.0.3", "", { "dependencies": { "zod": "^4.3.6" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-Jic9FLoOtZssiEpUP/2F40QbdFHH86SxZRpV+BExDQvygfGwt0m0Vq/C95E3bAuhsyXQjH5oXz3dcvMKOSEZWA=="],
+
+    "@tour-kit/media": ["@tour-kit/media@0.11.0", "", { "dependencies": { "@radix-ui/react-slot": "^1.2.4", "@tour-kit/core": "0.11.0", "@tour-kit/license": "1.0.3", "class-variance-authority": "^0.7.1" }, "peerDependencies": { "@lottiefiles/react-lottie-player": "^3.5.0", "@mui/base": "^5.0.0-beta.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@lottiefiles/react-lottie-player", "@mui/base"] }, "sha512-6vDyd9g8h6TqtyOvdIUXWDBLagQYSqtu9b9bT4rpwgrKrKoGSYFnG7XZRIAUnBOZtlxKIT4+8lPTBYcJ8VeOqA=="],
+
+    "@tour-kit/react": ["@tour-kit/react@0.11.0", "", { "dependencies": { "@floating-ui/react": "^0.27.19", "@radix-ui/react-slot": "^1.2.4", "@tour-kit/core": "0.11.0", "@tour-kit/media": "0.11.0", "class-variance-authority": "^0.7.1" }, "peerDependencies": { "@mui/base": "^5.0.0-beta.0", "next": "^13.0.0 || ^14.0.0 || ^15.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "react-router": "^6.0.0 || ^7.0.0", "react-router-dom": "^6.0.0", "tailwindcss": "^3.4.0 || ^4.0.0" }, "optionalPeers": ["@mui/base", "next", "react-router", "react-router-dom", "tailwindcss"] }, "sha512-iwQJac/+Zs9llf5zBtUdlVgnRiGbbiRFCjlTvF49UeeCMZNobpuZX8jYEZvtPZRholHEurLQMh8XIor9PuXBMg=="],
 
     "@tsconfig/node10": ["@tsconfig/node10@1.0.12", "", {}, "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ=="],
 
diff --git a/package.json b/package.json
index e1a62094..ec0ff820 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "calca",
   "private": true,
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "AI design tool with infinite canvas — vibe coding for design",
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/platforms/desktop/package.json b/platforms/desktop/package.json
index b4439646..a47a50b6 100644
--- a/platforms/desktop/package.json
+++ b/platforms/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@app/electrobun",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {

From 5347e4a615772eb71a8ef384ed4565fcd0104ad7 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:26:30 +0200
Subject: [PATCH 35/46] chore(electrobun): update version to 0.5.0

---
 apps/Resources/version.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/Resources/version.json b/apps/Resources/version.json
index 39a8c864..381a76d2 100644
--- a/apps/Resources/version.json
+++ b/apps/Resources/version.json
@@ -1,3 +1,3 @@
 {
-  "version": "0.4.0"
+  "version": "0.5.0"
 }
\ No newline at end of file

From 1466a844a02848dc697eab1a7334e191be546425 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:26:41 +0200
Subject: [PATCH 36/46] docs: update CHANGELOG for 0.4.0, 0.4.1, 0.5.0

---
 CHANGELOG.md | 146 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 123 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd7dec0c..fe925c27 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,47 +5,147 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.3.0] - 2025-04-26
+## [0.5.0] - 2026-05-06
 
 ### Added
 
-- **Mastra AI Pipeline** — Full workflow-based design pipeline with Mastra, including workflow steps, stream consumer hook, and integration tests
-- **Hono Server** — New standalone Hono server with CORS, route handlers, and API routes for the design pipeline
-- **Vite Migration** — Web app migrated from Next.js to Vite with TanStack Router for SPA routing
-- **Theme System** — Swappable Tailwind v4 theme infrastructure with shadcn/ui utilities
-- **Internationalization** — New `lib/i18n` module with English translations and `lib/export` with `.design` format support
-- **IndexedDB Hook** — Custom IndexedDB hook for client-side data persistence
-- **Brand Rebrand** — Complete rebrand from Gosto to Calca with new logo assets, brand voice ADR, and updated UI copy
+- **Onboarding** — Restored welcome-modal with original flow; replaced SettingsModal/WelcomeModal with SettingsDialog; migrated onboarding-banner to shadcn design system
+- **Feedback** — Updated feedback UI to show discussion comment URL; switched feedback-proxy from GitHub Issues to Discussion comments
+- **Desktop Context Menus** — Implemented frame clipboard, context menu, and keyboard shortcuts; added Duplicate, disabled states, and shortcut labels; added Delete menu item and accelerator shortcuts
+- **NavigationMenu** — New shared NavigationMenu UI component replacing dropdown-menu patterns in context toolbar, remix button, and export menu
+- **Custom Remix** — Added custom remix flow via prompt bar
+- **Landing Page** — Built landing page with Astro, React, and Tailwind v4; added static assets, sections, and GitHub Pages deployment
+- **Analytics** — Enabled PostHog initialization on app startup
+- **Code Signing** — Added Apple code signing and notarization steps to desktop CI workflow; enabled signing in Electrobun config
+- **Feedback Proxy CF Workers** — Added Cloudflare Workers deployment workflow; wired CF Workers entry point; extracted modules and scaffolding
 
 ### Changed
 
-- **Pipeline Architecture** — Slimmed `use-generation-pipeline` to UI-only; Mastra stream consumer handles server communication
-- **Brand Rename** — Renamed Gosto→Calca across all infrastructure files and feature code
+- **shadcn Migration** — Migrated remaining raw HTML primitives, buttons, popovers, and dropdowns to shadcn components across the web app
+- **Desktop Build** — Simplified build scripts with shared logger and extracted helpers; added build script with env loading and artifact prep
+- **Mode Sidebar** — Improved mode sidebar and system prompt button layout
+- **Desktop Context Menu** — Suppressed default WebKit context menu; fixed platform detection and wired web-to-native RPC
 
 ### Fixed
 
-- Removed old API routes and wired remix/revision through the Mastra workflow
-- Resolved AI SDK provider-utils version mismatch
-- Added missing workspace dependencies and package exports for the Mastra pipeline
-- Fixed request body passing as `inputData`
-- Fixed index route availability with `createFileRoute`
+- Fixed desktop `Updater.getLocalInfo` usage per electrobun lint
+- Made feedback email required with disposable email validation
+- Added react types back to web app
+- Extracted action button to separate module
+- Pinned `@tailwindcss/browser` to 4.2.4 for CI reliability
+- Resolved workflow failures for feedback-proxy, desktop build, and landing page
+- Only notarize in CI to avoid local build failures
+- Cleaned up imports in feedback-modal
+- Prevented text overflow in critique mode button
+- Improved React type safety in error-boundary with PropsWithChildren pattern
+- Used direct file imports for lazy route components
+- Used default exports for lazy comment loading
+- Migrated remaining raw buttons to shadcn Button, fixed textarea border
+- Updated design card for desktop layouts
+- Added Tailwind CSS browser build support for desktop
 
 ### Tests
 
-- Added integration tests for Mastra design pipeline workflow
-- Added rebrand verification tests
+- Added unit tests for frame clipboard copy/paste
 
 ### Docs
 
-- Updated pipeline route example to workflow pattern
+- Consolidated architecture decisions into clean ADRs and PRD
+- Cleaned up e2e testing best practices heading
+- Fixed markdown formatting in PRD v2
+- Removed roadmap directory
+- Renumbered MADR files and added pro-package-architecture decision
+- Updated project READMEs to match current state
 
 ### Chore
 
-- Simplified `dev-web` script on root package.json
-- Added Mastra + type-fest dependencies and created schemas + MADR 0012
-- Updated lockfile for Calca rebrand dependencies
-- Updated public icons and pro package readme
-- Removed old `otto-icon.jpg` branding assets
+- Updated gitignore
+- Installed shadcn popover, progress, and textarea components
+- Updated lockfile after shadcn component installs
+- Added react-icons and mailchecker dependencies
+- Extracted action button to separate module
+- Updated desktop bun.lock
+
+## [0.4.1] - 2026-05-03
+
+### Fixed
+
+- Replaced `zx` with Bun.spawn to fix Windows path corruption
+- Searched for Windows binary extensions (`.cmd`, `.exe`, `.ps1`)
+- Used POSIX paths in zx and `fs/promises` for file ops
+- Resolved electrobun binary and Windows path issues
+- Updated provider tests to match pass-through behavior
+- Used vitest via `bun run test` and excluded dist tests from CI
+
+### Changed
+
+- Replaced `zx` with Bun shell for build scripts
+
+### Chore
+
+- Bumped desktop version to 0.4.0
+
+## [0.4.0] - 2026-05-01
+
+### Added
+
+- **Desktop App** — Scaffolded Electrobun project with config, main process stub, build scripts, and native context menu; added application menu with Help > Report Bug
+- **Auto-Updater** — Implemented auto-updater flow using Electrobun Updater API
+- **Analytics** — Added PostHog client, events, types, and tests; instrumented web app with PostHog event tracking; added analytics opt-out toggle to General settings
+- **Feedback** — Added feedback UI with bug icon, modal, and form; scaffolded feedback proxy with GitHub Issues creation via Octokit
+- **Settings** — Added shadcn/ui components, Zod schemas, and new UI shells for settings and onboarding; added Reset to Factory Settings utility; added language section and improved provider card layout; added analyticsEnabled field; added required model and optional fallbackModel to settings types
+- **Desktop CI/CD** — Added GitHub Actions CI/CD pipeline for desktop builds; added desktop tasks to Turborepo pipeline
+- **Toolbar** — Added compass to zoom bar; redistributed toolbar into three FSD features
+- **Error Boundary** — Added reusable ErrorBoundary component
+- **AI SDK Telemetry** — Added AI SDK telemetry adapter and pipeline step transition logging
+
+### Changed
+
+- **Toolbar Rewrite** — Rewrote mode-sidebar with tooltips, lucide icons, and compact sizing; rewrote export-menu and remix-button to use dropdown-menu with hover behavior; unified canvas-hud styling
+- **Desktop Scripts** — Replaced shell scripts with cross-platform TypeScript; consolidated scripts into single build command and cross-platform dev coordinator; broke down monolithic entry point into focused modules
+- **Server** — Exported Hono app without starting server for embeddability; migrated console.* to @app/logger; removed custom logging wrapper
+- **Frontend** — Replaced fetch with Hono RPC client; added shared dropdown-menu and tooltip components; replaced custom SVGs with lucide icons
+- **Monorepo** — Simplified workspace imports to use package.json exports/imports; consolidated desktop to `platforms/desktop/` and removed stale scaffolds
+
+### Fixed
+
+- Probed user's configured models instead of hardcoded list; replaced MODEL_FALLBACK_CHAIN with buildModelFallbackChain; removed DEFAULT_MODEL from settings and pipeline
+- Required model configuration in onboarding flow; removed Claude-only preset models from model picker
+- Prevented welcome re-showing on reload and fixed tour re-render
+- Migrated SettingsDialog to jotai atoms for state consistency
+- Resolved CORS error by adding dev server proxy
+- Bridged VITE_AI_* env vars from root .env to import.meta.env
+- Fixed hardcoded colors and suppressed CDN warning; added semantic tokens and updated component colors; improved color visibility and mode differentiation
+- Used custom jotai provider to sync desktop app bar functionality
+- Removed idle timeout limit on electrobun
+- Fixed HMR for server, dev scripts, and API proxy loop
+- Improved server binding, dev detection, and added verification tooling
+- Ensured loggers are initialized in all apps
+- Implemented working cache with LRU eviction and fallback backoff
+- Resolved hydration race causing onboarding to re-show on reload
+- Resolved all TypeScript errors in @app/web
+- Standardized lint/format/typecheck scripts across all workspaces
+
+### Performance
+
+- Lazy-loaded non-critical features and deferred devtools
+- Added Vite code splitting with manualChunks
+- Switched to `views://` protocol and added splash screen in desktop
+
+### Docs
+
+- Added auto-update, distribution, and storage migration plans for desktop
+- Added AGENTS.md for desktop
+
+### Chore
+
+- Removed last mentions to 'gosto' in place of 'calca'
+- Updated oxfmt config to sort imports
+- Applied oxfmt and oxlint auto-fixes across codebase
+- Disabled stylistic oxlint rules and fixed override syntax
+- Ran formatter across the whole project
+- Ensured oxlint and oxfmt are always executed with 'validate' script
+- Updated bun.lock
 
 ## [0.1.0] - 2025-04-05
 

From 2ed96038e5018966481f89d513fc47d89782ff88 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:26:51 +0200
Subject: [PATCH 37/46] docs: add Release Process section to AGENTS.md

---
 AGENTS.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index 3cb29d24..18c9ec25 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -244,6 +244,20 @@ These defaults are wired into `use-settings.ts` via `NEXT_PUBLIC_*` variables so
 Specs are written in Gauge Markdown and run via agent-browser.
 See [docs/testing/e2e-specs.md](docs/testing/e2e-specs.md) for conventions, built-in steps, and how to add new ones.
 
+---
+
+## Release Process
+
+Uses **@changesets/cli** with unified versioning (all 11 workspace packages in `fixed` array). Changesets only manages workspace packages — root and Electrobun version files need manual sync.
+
+**Workflow:**
+1. `bunx changeset` — describe change and bump type
+2. `bunx changeset version` — bumps all workspace packages
+3. Manually update: root `package.json`, root `CHANGELOG.md`, `apps/Resources/version.json`
+4. Commit and tag: `git commit -m "chore: release vX.Y.Z" && git tag vX.Y.Z && git push --tags`
+
+Desktop builds via GitHub Actions on `v*` tags.
+
 ## Package-Specific Guides
 
 Dive deeper into the area you're working on:

From daf7a72f712dc09b1a5ed402b2dba0a1c277e2fb Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:42:57 +0200
Subject: [PATCH 38/46] docs: fix stale version.json references

---
 AGENTS.md                         | 2 +-
 docs/desktop-auto-update.md       | 4 ++--
 docs/desktop-storage-migration.md | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 18c9ec25..87d2ce69 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -253,7 +253,7 @@ Uses **@changesets/cli** with unified versioning (all 11 workspace packages in `
 **Workflow:**
 1. `bunx changeset` — describe change and bump type
 2. `bunx changeset version` — bumps all workspace packages
-3. Manually update: root `package.json`, root `CHANGELOG.md`, `apps/Resources/version.json`
+3. Manually update: root `package.json`, root `CHANGELOG.md`
 4. Commit and tag: `git commit -m "chore: release vX.Y.Z" && git tag vX.Y.Z && git push --tags`
 
 Desktop builds via GitHub Actions on `v*` tags.
diff --git a/docs/desktop-auto-update.md b/docs/desktop-auto-update.md
index df81a4f9..1e8818e9 100644
--- a/docs/desktop-auto-update.md
+++ b/docs/desktop-auto-update.md
@@ -6,13 +6,13 @@ The Calca desktop app checks for updates on startup by comparing the local versi
 
 ## Version Source
 
-- **Local**: `apps/Resources/version.json` → `{"version": "0.3.0"}`
+- **Local**: `platforms/desktop/package.json` → imported by `src/version.ts`
 - **Remote**: GitHub Releases API `GET /repos/{owner}/{repo}/releases/latest`
 - **Comparison**: Parse semver from both, update available if remote > local
 
 ## Update Check Flow
 
-1. App starts → `platforms/desktop/src/index.ts` reads `version.json`
+1. App starts → version read from `platforms/desktop/package.json` via `src/version.ts`
 2. Fetch `https://api.github.com/repos/{owner}/{repo}/releases/latest`
 3. Parse release tag (`v0.3.0` → `0.3.0`) and compare semver
 4. If newer: set `globalThis.__CALCA_UPDATE_AVAILABLE__ = true` and store new version
diff --git a/docs/desktop-storage-migration.md b/docs/desktop-storage-migration.md
index ea1677bf..c84b4669 100644
--- a/docs/desktop-storage-migration.md
+++ b/docs/desktop-storage-migration.md
@@ -47,7 +47,7 @@ API keys stored in macOS Keychain:
 
 ## Migration Script
 
-Runs once on first desktop launch, triggered by `version.json` migration flag:
+Runs once on first desktop launch, triggered by `.migrated` flag:
 
 1. Check `~/Library/Application Support/Calca/.migrated` flag
 2. If not migrated:

From d6fd27198838ef04e574be5ae2025ccaef121ad8 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Wed, 6 May 2026 16:43:25 +0200
Subject: [PATCH 39/46] chore: remove orphaned apps/Resources/version.json

---
 apps/Resources/version.json | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 apps/Resources/version.json

diff --git a/apps/Resources/version.json b/apps/Resources/version.json
deleted file mode 100644
index 381a76d2..00000000
--- a/apps/Resources/version.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "version": "0.5.0"
-}
\ No newline at end of file

From 14110801d5a9ccc56ae674b488422e6a8dc2c2c1 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 14:52:59 +0200
Subject: [PATCH 40/46] feat: make validate available per-package via --cwd

---
 AGENTS.md                        |  2 ++
 apps/cli/package.json            |  2 +-
 apps/feedback-proxy/package.json |  3 ++-
 apps/landing/package.json        |  3 ++-
 apps/server/package.json         |  2 +-
 apps/web/package.json            |  3 ++-
 packages/analytics/package.json  |  3 ++-
 packages/core/package.json       |  3 ++-
 packages/logger/package.json     |  3 ++-
 packages/pro/package.json        |  2 +-
 packages/shared/package.json     |  2 +-
 platforms/desktop/package.json   |  3 ++-
 scripts/validate.ts              | 25 ++++++++++++++++++++++---
 13 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 87d2ce69..3b04a86c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -200,6 +200,8 @@ bun test
 bun run typecheck
 ```
 
+> **Backpressure:** Run `bun run validate` (from repo root or any package dir) to check typecheck, lint, format, and tests. Use as gate before marking implementation tasks complete.
+
 ### Portless (Named Dev URLs)
 
 Dev servers use [portless](https://github.com/vercel-labs/portless) for stable `.localhost` URLs instead of port numbers. First run auto-starts the HTTPS proxy on port 443 and generates a local CA (run `npx portless trust` if you see certificate warnings).
diff --git a/apps/cli/package.json b/apps/cli/package.json
index ac94f80c..82229c97 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -11,6 +11,6 @@
     "test": "vitest run --passWithNoTests",
     "lint": "oxlint --fix .",
     "format": "oxfmt --write .",
-    "validate": "echo 'validate: not yet implemented'"
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   }
 }
diff --git a/apps/feedback-proxy/package.json b/apps/feedback-proxy/package.json
index 8924f8e1..ec0a2e4b 100644
--- a/apps/feedback-proxy/package.json
+++ b/apps/feedback-proxy/package.json
@@ -12,7 +12,8 @@
     "deploy": "wrangler deploy",
     "deploy:dry": "wrangler deploy --dry-run",
     "typecheck": "bunx tsc --noEmit --project tsconfig.json",
-    "test": "vitest run"
+    "test": "vitest run",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "hono": "^4.0.0",
diff --git a/apps/landing/package.json b/apps/landing/package.json
index a8188798..de989d89 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -11,7 +11,8 @@
     "preview": "astro preview",
     "test": "vitest run --passWithNoTests",
     "lint": "oxlint --fix .",
-    "format": "oxfmt --write ."
+    "format": "oxfmt --write .",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.9",
diff --git a/apps/server/package.json b/apps/server/package.json
index f9f7cf2d..e6dff9bf 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -16,7 +16,7 @@
     "test": "vitest run --passWithNoTests",
     "lint": "oxlint --fix .",
     "format": "oxfmt --write .",
-    "validate": "echo 'validate: not yet implemented'"
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "@app/core": "workspace:*",
diff --git a/apps/web/package.json b/apps/web/package.json
index c88df7f5..8e73cd22 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,7 +15,8 @@
     "test": "vitest",
     "lint": "oxlint --fix --react-plugin .",
     "format": "oxfmt --write .",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^3.0.68",
diff --git a/packages/analytics/package.json b/packages/analytics/package.json
index 62ffb203..83417ea9 100644
--- a/packages/analytics/package.json
+++ b/packages/analytics/package.json
@@ -11,7 +11,8 @@
     "build": "echo 'build: not yet implemented'",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "clean": "echo 'clean: not yet implemented'"
+    "clean": "echo 'clean: not yet implemented'",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "posthog-js": "^1.371.0"
diff --git a/packages/core/package.json b/packages/core/package.json
index 353b25f3..d22e4812 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -26,7 +26,8 @@
     "lint": "oxlint --fix .",
     "format": "oxfmt --write .",
     "test": "vitest run",
-    "clean": "echo 'clean: not yet implemented'"
+    "clean": "echo 'clean: not yet implemented'",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^3.0.68",
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 6899ff16..9396974a 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -12,7 +12,8 @@
     "lint": "oxlint --fix .",
     "format": "oxfmt --write .",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "@logtape/logtape": "^2.0.5",
diff --git a/packages/pro/package.json b/packages/pro/package.json
index 9c962ce3..e4bc86a2 100644
--- a/packages/pro/package.json
+++ b/packages/pro/package.json
@@ -15,7 +15,7 @@
     "test": "vitest run --passWithNoTests",
     "lint": "oxlint --fix .",
     "format": "oxfmt --write .",
-    "validate": "echo 'validate: not yet implemented'"
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {},
   "devDependencies": {
diff --git a/packages/shared/package.json b/packages/shared/package.json
index dfcbc36a..c2e5667c 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -15,7 +15,7 @@
     "test:watch": "vitest",
     "lint": "oxlint --fix .",
     "format": "oxfmt --write .",
-    "validate": "echo 'validate: not yet implemented'"
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "zod": "^3.24.0"
diff --git a/platforms/desktop/package.json b/platforms/desktop/package.json
index a47a50b6..cf1d0018 100644
--- a/platforms/desktop/package.json
+++ b/platforms/desktop/package.json
@@ -10,7 +10,8 @@
     "prebuild:desktop": "rm -rf build artifacts Resources/web",
     "build:desktop": "bun run scripts/build.ts",
     "verify": "bun run scripts/verify.ts",
-    "clean": "rm -rf build artifacts Resources/web"
+    "clean": "rm -rf build artifacts Resources/web",
+    "validate": "bun ../../scripts/validate.ts --cwd $INIT_CWD"
   },
   "dependencies": {
     "@app/server": "workspace:*",
diff --git a/scripts/validate.ts b/scripts/validate.ts
index 120c7650..d8442f73 100644
--- a/scripts/validate.ts
+++ b/scripts/validate.ts
@@ -37,9 +37,15 @@ const stages: Stage[] = [
   { display: "Test", cmd: "test" },
 ];
 
-const runStage = async ({ display, cmd, onError }: Stage): Promise<StageOutput> => {
+const runStage = async (
+  { display, cmd, onError }: Stage,
+  filter?: string,
+): Promise<StageOutput> => {
   try {
-    await $`bunx turbo ${cmd}`.quiet();
+    const turboCmd = filter
+      ? $`bunx turbo ${cmd} --filter=${filter}`.quiet()
+      : $`bunx turbo ${cmd}`.quiet();
+    await turboCmd;
     return { line: `Running ${display}... ✅`, ok: true };
   } catch (error) {
     if (error instanceof $.ShellError && onError) {
@@ -53,7 +59,20 @@ const runStage = async ({ display, cmd, onError }: Stage): Promise<StageOutput>
 };
 
 const main = async () => {
-  const results = await Promise.all(stages.map(runStage));
+  const argv = process.argv;
+  const cwdIndex = argv.indexOf("--cwd");
+  let filter: string | undefined;
+
+  if (cwdIndex !== -1 && argv[cwdIndex + 1]) {
+    const cwdArg = argv[cwdIndex + 1]!;
+    const cwdPath = cwdArg.startsWith("/")
+      ? cwdArg
+      : `${process.cwd()}/${cwdArg}`;
+    const pkgJson: { name: string } = await Bun.file(`${cwdPath}/package.json`).json();
+    filter = pkgJson.name;
+  }
+
+  const results = await Promise.all(stages.map((stage) => runStage(stage, filter)));
 
   for (const { line } of results) {
     console.log(line);

From 9855317ddcd1761e93cf26dd80aca4a745dacd7d Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 15:35:30 +0200
Subject: [PATCH 41/46] feat(settings): extract SettingsContent from
 SettingsDialog

Reuse settings content in tour view without duplicating layout and
section rendering logic.
---
 apps/web/src/features/settings/ui/index.ts    |  1 +
 .../features/settings/ui/settings-content.tsx | 59 +++++++++++++++++++
 .../features/settings/ui/settings-dialog.tsx  | 49 +--------------
 3 files changed, 62 insertions(+), 47 deletions(-)
 create mode 100644 apps/web/src/features/settings/ui/settings-content.tsx

diff --git a/apps/web/src/features/settings/ui/index.ts b/apps/web/src/features/settings/ui/index.ts
index e841bf47..a7c770fe 100644
--- a/apps/web/src/features/settings/ui/index.ts
+++ b/apps/web/src/features/settings/ui/index.ts
@@ -1,4 +1,5 @@
 export { SettingsDialog } from "./settings-dialog";
+export { SettingsContent } from "./settings-content";
 export { SettingsSidebar, type SettingsSection } from "./settings-sidebar";
 export { SettingsGeneral } from "./settings-general";
 export { SettingsReset } from "./settings-reset";
diff --git a/apps/web/src/features/settings/ui/settings-content.tsx b/apps/web/src/features/settings/ui/settings-content.tsx
new file mode 100644
index 00000000..49a5a5b9
--- /dev/null
+++ b/apps/web/src/features/settings/ui/settings-content.tsx
@@ -0,0 +1,59 @@
+import { useAtom, useSetAtom } from "jotai";
+import { useState } from "react";
+
+import { Separator } from "#/shared/components/ui/separator";
+
+import { settingsAtom, updateSettingsAtom } from "../state/settings-atoms";
+import { SettingsAbout } from "./settings-about";
+import { SettingsGeneral } from "./settings-general";
+import { SettingsPersonalization } from "./settings-personalization";
+import { SettingsReset } from "./settings-reset";
+import { SettingsSidebar, type SettingsSection } from "./settings-sidebar";
+
+export interface SettingsContentProps {
+  onOpenChange?: (open: boolean) => void;
+  defaultSection?: SettingsSection;
+}
+
+function PlaceholderContent({ title }: { title: string }) {
+  return (
+    <div className="flex items-center justify-center h-full text-muted-foreground">
+      <p className="text-sm">{title} settings coming soon</p>
+    </div>
+  );
+}
+
+export function SettingsContent({ onOpenChange, defaultSection }: SettingsContentProps) {
+  const [activeSection, setActiveSection] = useState<SettingsSection>(defaultSection ?? "general");
+  const [settings] = useAtom(settingsAtom);
+  const updateSettings = useSetAtom(updateSettingsAtom);
+  const handleOpenChange = onOpenChange ?? (() => {});
+
+  return (
+    <div className="flex h-[500px]">
+      <div className="flex flex-col shrink-0 border-r border-border bg-muted/30">
+        <div className="px-5 py-4">
+          <h2 className="text-sm font-semibold text-foreground">Settings</h2>
+        </div>
+        <Separator />
+        <SettingsSidebar activeSection={activeSection} onSectionChange={setActiveSection} />
+      </div>
+
+      <div className="flex-1 p-6 overflow-y-auto">
+        {activeSection === "general" && (
+          <SettingsGeneral
+            settings={settings}
+            onUpdate={updateSettings}
+            onOpenChange={handleOpenChange}
+          />
+        )}
+        {activeSection === "personalization" && (
+          <SettingsPersonalization settings={settings} onUpdate={updateSettings} />
+        )}
+        {activeSection === "skills" && <PlaceholderContent title="Skills" />}
+        {activeSection === "about" && <SettingsAbout />}
+        {activeSection === "reset" && <SettingsReset />}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/features/settings/ui/settings-dialog.tsx b/apps/web/src/features/settings/ui/settings-dialog.tsx
index cdd3f25d..83bb53a8 100644
--- a/apps/web/src/features/settings/ui/settings-dialog.tsx
+++ b/apps/web/src/features/settings/ui/settings-dialog.tsx
@@ -1,39 +1,18 @@
-import { useAtom, useSetAtom } from "jotai";
-import { useState } from "react";
-
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
 } from "#/shared/components/ui/dialog";
-import { Separator } from "#/shared/components/ui/separator";
 
-import { settingsAtom, updateSettingsAtom } from "../state/settings-atoms";
-import { SettingsAbout } from "./settings-about";
-import { SettingsGeneral } from "./settings-general";
-import { SettingsPersonalization } from "./settings-personalization";
-import { SettingsReset } from "./settings-reset";
-import { type SettingsSection, SettingsSidebar } from "./settings-sidebar";
+import { SettingsContent } from "./settings-content";
 
 interface SettingsDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
-function PlaceholderContent({ title }: { title: string }) {
-  return (
-    <div className="flex items-center justify-center h-full text-muted-foreground">
-      <p className="text-sm">{title} settings coming soon</p>
-    </div>
-  );
-}
-
 export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
-  const [activeSection, setActiveSection] = useState<SettingsSection>("general");
-  const [settings] = useAtom(settingsAtom);
-  const updateSettings = useSetAtom(updateSettingsAtom);
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-2xl p-0 overflow-hidden gap-0" showCloseButton={true}>
@@ -42,31 +21,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
           Configure your Calca preferences including AI provider, theme, and personalization
           options.
         </DialogDescription>
-        <div className="flex h-[500px]">
-          <div className="flex flex-col shrink-0 border-r border-border bg-muted/30">
-            <div className="px-5 py-4">
-              <h2 className="text-sm font-semibold text-foreground">Settings</h2>
-            </div>
-            <Separator />
-            <SettingsSidebar activeSection={activeSection} onSectionChange={setActiveSection} />
-          </div>
-
-          <div className="flex-1 p-6 overflow-y-auto">
-            {activeSection === "general" && (
-              <SettingsGeneral
-                settings={settings}
-                onUpdate={updateSettings}
-                onOpenChange={onOpenChange}
-              />
-            )}
-            {activeSection === "personalization" && (
-              <SettingsPersonalization settings={settings} onUpdate={updateSettings} />
-            )}
-            {activeSection === "skills" && <PlaceholderContent title="Skills" />}
-            {activeSection === "about" && <SettingsAbout />}
-            {activeSection === "reset" && <SettingsReset />}
-          </div>
-        </div>
+        <SettingsContent onOpenChange={onOpenChange} />
       </DialogContent>
     </Dialog>
   );

From 06449510ca1a5e91c63e7ff6a8d224d6afa7f941 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 15:35:36 +0200
Subject: [PATCH 42/46] feat(settings): add data-tour attributes to settings UI
 elements

Mark AI Provider, Add Provider, and Unsplash API Key with data-tour
attributes for tour-kit step targeting.
---
 apps/web/src/features/settings/ui/settings-general.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/features/settings/ui/settings-general.tsx b/apps/web/src/features/settings/ui/settings-general.tsx
index 1933f50f..717cabef 100644
--- a/apps/web/src/features/settings/ui/settings-general.tsx
+++ b/apps/web/src/features/settings/ui/settings-general.tsx
@@ -35,17 +35,18 @@ function ApiKeyInput({
   onChange,
   placeholder,
   error,
+  ...rest
 }: {
   label: string;
   value: string;
   onChange: (value: string) => void;
   placeholder: string;
   error?: string | null;
-}) {
+} & Record<string, unknown>) {
   const [show, setShow] = useState(false);
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2" {...rest}>
       <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
         {label}
       </Label>
@@ -430,7 +431,7 @@ export function SettingsGeneral({ settings, onUpdate, onOpenChange }: SettingsGe
           onValueChange={handleProviderChange}
           disabled={settings.providers.length === 0}
         >
-          <SelectTrigger className="w-full">
+          <SelectTrigger className="w-full" data-tour="settings-provider">
             <SelectValue
               placeholder={
                 settings.providers.length === 0 ? "No providers configured" : "Select a provider"
@@ -531,6 +532,7 @@ export function SettingsGeneral({ settings, onUpdate, onOpenChange }: SettingsGe
           type="button"
           onClick={() => setShowAddProvider(true)}
           className="w-full"
+          data-tour="settings-add-provider"
         >
           <Plus className="size-4 mr-2" />
           Add Provider
@@ -573,6 +575,7 @@ export function SettingsGeneral({ settings, onUpdate, onOpenChange }: SettingsGe
           onChange={handleUnsplashKeyChange}
           placeholder="Access key..."
           error={apiKeyErrors.unsplash}
+          data-tour="settings-unsplash-key"
         />
 
         <ApiKeyInput

From 4acecb4ee62a114b7beb2953b50db87fc269f53f Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 15:35:55 +0200
Subject: [PATCH 43/46] feat(onboarding): add currentTourStepIdAtom for tour
 step tracking

---
 apps/web/src/features/onboarding/index.ts                  | 7 ++++++-
 apps/web/src/features/onboarding/state/onboarding-atoms.ts | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/features/onboarding/index.ts b/apps/web/src/features/onboarding/index.ts
index 28003850..855a47d5 100644
--- a/apps/web/src/features/onboarding/index.ts
+++ b/apps/web/src/features/onboarding/index.ts
@@ -3,5 +3,10 @@
 
 export { TutorialTour } from "./ui/tutorial-tour";
 export { WelcomeModal } from "./ui/welcome-modal";
-export { showTutorialAtom, tutorialStepAtom } from "./state/onboarding-atoms";
+export { SettingsTourView } from "./ui/settings-tour-view";
+export {
+  showTutorialAtom,
+  tutorialStepAtom,
+  currentTourStepIdAtom,
+} from "./state/onboarding-atoms";
 export { showWelcomeAtom } from "./state/onboarding-atoms";
diff --git a/apps/web/src/features/onboarding/state/onboarding-atoms.ts b/apps/web/src/features/onboarding/state/onboarding-atoms.ts
index 61ab9b9e..28774196 100644
--- a/apps/web/src/features/onboarding/state/onboarding-atoms.ts
+++ b/apps/web/src/features/onboarding/state/onboarding-atoms.ts
@@ -3,3 +3,4 @@ import { atom } from "jotai";
 export const showWelcomeAtom = atom(false);
 export const showTutorialAtom = atom(false);
 export const tutorialStepAtom = atom(0);
+export const currentTourStepIdAtom = atom<string | null>(null);

From 567654b3f5a7b1c2a7c40000c20a74f03d8bcb25 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 15:36:00 +0200
Subject: [PATCH 44/46] feat(onboarding): create SettingsTourView visual
 replica component

Non-interactive replica at z-[45] with pointer-events-none for use
during settings tour steps.
---
 .../features/onboarding/ui/settings-tour-view.tsx  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 apps/web/src/features/onboarding/ui/settings-tour-view.tsx

diff --git a/apps/web/src/features/onboarding/ui/settings-tour-view.tsx b/apps/web/src/features/onboarding/ui/settings-tour-view.tsx
new file mode 100644
index 00000000..2241daf8
--- /dev/null
+++ b/apps/web/src/features/onboarding/ui/settings-tour-view.tsx
@@ -0,0 +1,14 @@
+import { SettingsContent } from "#/features/settings/ui/settings-content";
+
+export function SettingsTourView() {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center pointer-events-none z-[45]">
+      <div
+        className="bg-background rounded-xl shadow-lg border border-border overflow-hidden w-full max-w-2xl mx-4"
+        aria-hidden="true"
+      >
+        <SettingsContent defaultSection="general" />
+      </div>
+    </div>
+  );
+}

From c01f25baf94413979c40573185d9dffb0b7d2f2a Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 15:36:08 +0200
Subject: [PATCH 45/46] feat(onboarding): extend tutorial tour with settings
 configuration steps

Add provider-setup, add-provider, and unsplash-key steps between
toolbar and all-set. Wire currentTourStepIdAtom for step tracking.
---
 .../features/onboarding/ui/tutorial-tour.tsx  | 57 +++++++++++++++++--
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/features/onboarding/ui/tutorial-tour.tsx b/apps/web/src/features/onboarding/ui/tutorial-tour.tsx
index d7132d30..74d95e52 100644
--- a/apps/web/src/features/onboarding/ui/tutorial-tour.tsx
+++ b/apps/web/src/features/onboarding/ui/tutorial-tour.tsx
@@ -2,35 +2,50 @@
 // Licensed under the AGPL-3.0. See packages/shared/LICENSE for details.
 
 import { Tour, TourCard, TourOverlay, TourProvider, TourStep } from "@tour-kit/react";
-import { useSetAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { useCallback, useRef } from "react";
 
-import { showTutorialAtom } from "../state/onboarding-atoms";
+import { currentTourStepIdAtom, showTutorialAtom } from "../state/onboarding-atoms";
 
 export function TutorialTour(props: { onComplete?: () => void; hasFrames?: boolean }) {
   const { onComplete } = props;
   const setShowTutorial = useSetAtom(showTutorialAtom);
+  const [, setCurrentTourStepId] = useAtom(currentTourStepIdAtom);
   const centerRef = useRef<HTMLElement>(null);
   // Ref to guard against multiple completions
   const completedRef = useRef(false);
 
+  const handleStepChange = useCallback(
+    (step: { id: string }, _index: number) => {
+      setCurrentTourStepId(step.id);
+    },
+    [setCurrentTourStepId],
+  );
+
   const handleComplete = useCallback(() => {
     // Prevent the function from running more than once
     if (completedRef.current) return;
     completedRef.current = true;
 
-    console.debug("TutorialTour: Completing tour");
     setShowTutorial(false);
+    setCurrentTourStepId(null);
     onComplete?.();
-  }, [setShowTutorial, onComplete]);
+  }, [setShowTutorial, setCurrentTourStepId, onComplete]);
 
   const handleSkip = useCallback(() => {
     setShowTutorial(false);
-  }, [setShowTutorial]);
+    setCurrentTourStepId(null);
+  }, [setShowTutorial, setCurrentTourStepId]);
 
   return (
     <TourProvider>
-      <Tour id="tutorial" autoStart onComplete={handleComplete} onSkip={handleSkip}>
+      <Tour
+        id="tutorial"
+        autoStart
+        onComplete={handleComplete}
+        onSkip={handleSkip}
+        onStepChange={handleStepChange}
+      >
         <TourStep
           id="prompt-bar"
           target='[data-tour="prompt-action-mode"]'
@@ -51,6 +66,36 @@ export function TutorialTour(props: { onComplete?: () => void; hasFrames?: boole
           showProgress
           placement="bottom"
         />
+        <TourStep
+          id="provider-setup"
+          target='[data-tour="settings-provider"]'
+          title="AI Provider"
+          content="Select your AI provider from the dropdown. If you don't see any providers, you'll need to add one first."
+          showNavigation
+          showClose
+          showProgress
+          placement="bottom"
+        />
+        <TourStep
+          id="add-provider"
+          target='[data-tour="settings-add-provider"]'
+          title="Add a Provider"
+          content="Click here to add a new AI provider. You'll need to provide the provider's base URL and API key."
+          showNavigation
+          showClose
+          showProgress
+          placement="bottom"
+        />
+        <TourStep
+          id="unsplash-key"
+          target='[data-tour="settings-unsplash-key"]'
+          title="Unsplash API Key"
+          content="Add your Unsplash API key here to enable image generation in your designs."
+          showNavigation
+          showClose
+          showProgress
+          placement="top"
+        />
         <TourStep
           id="all-set"
           target={centerRef}

From 13749cfb9b0145c491d53c4690a981c22d3c6ba1 Mon Sep 17 00:00:00 2001
From: Joaquin Terrasa <josocjoq+dev@pm.me>
Date: Thu, 7 May 2026 15:36:14 +0200
Subject: [PATCH 46/46] feat(onboarding): wire SettingsTourView and add ?tour
 query param

Close real SettingsDialog during settings tour steps, render
SettingsTourView replica instead. Support ?tour param for replay.
---
 apps/web/src/routes/index.tsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 88c6ed07..cbfcc384 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,7 +1,7 @@
 import { trackExportComplete } from "@app/analytics";
 import { createFileRoute } from "@tanstack/react-router";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { lazy, Suspense, useCallback, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useState } from "react";
 
 import { useCanvas } from "#/features/canvas";
 import { CanvasHUD } from "#/features/canvas-hud";
@@ -18,7 +18,13 @@ import { groupsAtom, hydrateGroups, resetSessionAtom } from "#/features/design/s
 import { canvasImagesAtom, hydrateImages } from "#/features/design/state/images-atoms";
 import { SummaryList } from "#/features/design/ui/summary-list";
 import { ModeSidebar } from "#/features/mode-sidebar";
-import { showTutorialAtom, showWelcomeAtom, WelcomeModal } from "#/features/onboarding";
+import {
+  showTutorialAtom,
+  showWelcomeAtom,
+  WelcomeModal,
+  SettingsTourView,
+  currentTourStepIdAtom,
+} from "#/features/onboarding";
 import { isOwnKeyAtom, loadedAtom, settingsAtom } from "#/features/settings/state/settings-atoms";
 import { SettingsDialog } from "#/features/settings/ui/settings-dialog";
 import { exportCanvas, openImportDialog } from "#/lib/export";
@@ -64,6 +70,11 @@ export default function Home() {
   const [showGitHash, setShowGitHash] = useAtom(showGitHashAtom);
   const [showLibrary, setShowLibrary] = useAtom(showLibraryAtom);
   const [toolMode, setToolMode] = useAtom(toolModeAtom);
+  const currentTourStepId = useAtomValue(currentTourStepIdAtom);
+  const isSettingsTourStep =
+    currentTourStepId === "provider-setup" ||
+    currentTourStepId === "add-provider" ||
+    currentTourStepId === "unsplash-key";
 
   useMountEffect(() => {
     setShowGitHash(new URLSearchParams(window.location.search).has("devMode"));
@@ -96,6 +107,18 @@ export default function Home() {
     setShowWelcome(true);
   });
 
+  useMountEffect(() => {
+    if (new URLSearchParams(window.location.search).has("tour")) {
+      setShowTutorial(true);
+    }
+  });
+
+  useEffect(() => {
+    if (isSettingsTourStep && showSettings) {
+      setShowSettings(false);
+    }
+  }, [isSettingsTourStep, showSettings, setShowSettings]);
+
   const pipeline = useGenerationPipeline(canvas);
   const commentHandlers = useCommentHandlers(pipeline.handleRevision);
 
@@ -191,6 +214,8 @@ export default function Home() {
         }}
       />
 
+      {isSettingsTourStep && <SettingsTourView />}
+
       {showSettings && (
         <ErrorBoundary category={["calca", "web", "features", "settings"]}>
           <Suspense fallback={null}>