feat: add jsx-slot system and upgrade client templates to shadcn

.changeset/curly-dragons-poke.md

@@ -0,0 +1,6 @@
+---
+"stack-effect": minor
+---
+
+add JSX slot injection system and upgrade client templates to shadcn components.
+

package.json

@@ -11,7 +11,7 @@
     "format:check": "biome check .",
     "prepare": "effect-language-service patch",
     "test": "turbo run test",
-    "test:e2e": "playwright test",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts --root apps/cli",
     "start": "bun apps/cli/src/index.ts",
     "type-check": "turbo run type-check",
     "complexity": "bun run scripts/complexity-report.ts"

packages/catalog/src/registry/content/client-api.ts

@@ -27,42 +27,44 @@ export const helloAtom = runtime.fn(() =>
 export const clientRestCardContents = `import { useAtom } from "@effect/atom-react";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { helloAtom } from "@/lib/atoms/hello-atom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export const RestCard = () => {
   const [response, getHello] = useAtom(helloAtom);
 
   return (
-    <div className="flex flex-col gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground">
-      <h2 className="font-bold text-lg">REST API</h2>
-      <button
-        type="button"
-        className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-        onClick={() => getHello()}
-      >
-        Call REST API
-      </button>
-      <div className="rounded-md border border-border bg-muted/50 p-4">
-        {AsyncResult.builder(response)
-          .onSuccess((data) => (
-            <pre className="text-sm">
-              <code>
-                Message: {data.message}{"\\n"}Success: {data.success.toString()}
-              </code>
-            </pre>
-          ))
-          .onFailure((error) => (
-            <pre className="text-destructive text-sm">
-              <code>Error: {JSON.stringify(error, null, 2)}</code>
-            </pre>
-          ))
-          .onInitial(() => (
-            <p className="text-muted-foreground text-sm">
-              Click the button above to test the REST API
-            </p>
-          ))
-          .orNull()}
-      </div>
-    </div>
+    <Card>
+      <CardHeader>
+        <CardTitle>REST API</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <Button onClick={() => getHello()}>
+          Call REST API
+        </Button>
+        <div className="rounded-md border border-border bg-muted/50 p-4">
+          {AsyncResult.builder(response)
+            .onSuccess((data) => (
+              <pre className="text-sm">
+                <code>
+                  Message: {data.message}{"\\n"}Success: {data.success.toString()}
+                </code>
+              </pre>
+            ))
+            .onFailure((error) => (
+              <pre className="text-destructive text-sm">
+                <code>Error: {JSON.stringify(error, null, 2)}</code>
+              </pre>
+            ))
+            .onInitial(() => (
+              <p className="text-muted-foreground text-sm">
+                Click the button above to test the REST API
+              </p>
+            ))
+            .orNull()}
+        </div>
+      </CardContent>
+    </Card>
   );
 };
 `;

packages/catalog/src/registry/content/client-chat.ts

@@ -301,6 +301,9 @@ import { AsyncResult } from "effect/unstable/reactivity";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { chatAtom } from "@/lib/atoms/chat-atom";
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 
 type Message = {
   role: "user" | "assistant" | "system";
@@ -437,9 +440,9 @@ export function ChatBox() {
   }, [scrollTrigger]);
 
   return (
-    <div className="flex h-full w-full flex-col rounded-lg border border-border bg-card text-card-foreground">
-      <div className="border-b border-border p-4">
-        <h2 className="font-bold text-lg">Chat (RPC)</h2>
+    <Card className="flex h-full w-full flex-col">
+      <CardHeader>
+        <CardTitle>Chat (RPC)</CardTitle>
         <div className="flex gap-2 mt-1">
           {isStreaming && (
             <span className="inline-flex items-center rounded-full border border-border bg-secondary px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.2em] text-secondary-foreground">
@@ -457,9 +460,10 @@ export function ChatBox() {
             </span>
           )}
         </div>
-      </div>
+      </CardHeader>
 
-      <div className="flex-1 min-h-0 overflow-y-auto px-4" ref={scrollContainerRef}>
+      <CardContent className="flex-1 min-h-0 flex flex-col gap-0 p-0">
+        <div className="flex-1 min-h-0 overflow-y-auto px-4" ref={scrollContainerRef}>
         <div className="space-y-6 py-6">
           {displayHistory.length === 0 && currentSegments.length === 0 && (
             <div className="flex flex-col items-start gap-2 rounded-none border border-border bg-muted/50 px-4 py-6 text-xs text-muted-foreground">
@@ -535,16 +539,17 @@ export function ChatBox() {
                 {currentResult.error.message}
               </p>
               {currentResult.error.recoverable && (
-                <button
-                  type="button"
-                  className="mt-2 rounded-md border border-border px-3 py-1 text-xs hover:bg-muted"
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-2"
                   onClick={() => {
                     const messages = historyToMessages(history);
                     sendMessages(messages);
                   }}
                 >
                   Retry
-                </button>
+                </Button>
               )}
             </div>
           )}
@@ -553,26 +558,24 @@ export function ChatBox() {
 
       <div className="border-t border-border p-4">
         <div className="flex w-full gap-2">
-          <input
+          <Input
             type="text"
             placeholder="Send a message"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && handleSend()}
             disabled={isWaiting || isStreaming}
-            className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
           />
-          <button
-            type="button"
+          <Button
             onClick={handleSend}
             disabled={!input.trim() || isWaiting || isStreaming}
-            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
           >
             Send
-          </button>
+          </Button>
         </div>
       </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 

packages/catalog/src/registry/content/client-rpc.ts

@@ -92,6 +92,8 @@ export const tickAtom = runtime.fn(
 export const clientRpcCardContents = `import { useAtom } from "@effect/atom-react";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { tickAtom } from "@/lib/atoms/tick-atom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export const RpcCard = () => {
   const [result, search] = useAtom(tickAtom);
@@ -102,16 +104,16 @@ export const RpcCard = () => {
   };
   return (
     <div className="flex h-full flex-col gap-4">
-      <div className="rounded-lg border border-border bg-card p-6 text-card-foreground">
-        <h2 className="mb-4 font-bold text-lg">RPC API</h2>
-        <button
-          type="button"
-          className="w-full rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-          onClick={handleSearch}
-        >
-          Call RPC API
-        </button>
-      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>RPC API</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Button className="w-full" onClick={handleSearch}>
+            Call RPC API
+          </Button>
+        </CardContent>
+      </Card>
 
       <div className="flex-1 rounded-lg border border-border bg-muted/50 p-4">
         {event ? (

packages/catalog/src/registry/content/client-websocket.ts

@@ -61,6 +61,8 @@ import type {
 import { AsyncResult } from "effect/unstable/reactivity";
 import { useEffect, useMemo } from "react";
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   presenceSubscriptionAtom,
   WebSocketClient,
@@ -157,11 +159,11 @@ export function PresencePanel({ className }: { className?: string }) {
   const isConnecting = AsyncResult.isInitial(eventsResult);
 
   return (
-    <div className={cn("flex h-full flex-col rounded-lg border border-border bg-card text-card-foreground", className)}>
-      <div className="border-b border-border p-4">
+    <Card className={cn("flex h-full flex-col", className)}>
+      <CardHeader>
         <div className="flex items-center justify-between gap-2">
           <div>
-            <h2 className="font-bold text-lg">WebSocket Presence (RPC)</h2>
+            <CardTitle>WebSocket Presence (RPC)</CardTitle>
             <p className="text-xs text-muted-foreground">Realtime status updates over RPC.</p>
           </div>
           <span
@@ -181,34 +183,33 @@ export function PresencePanel({ className }: { className?: string }) {
                 : "disconnected"}
           </span>
         </div>
-      </div>
+      </CardHeader>
 
-      <div className="flex flex-col gap-4 p-4">
+      <CardContent className="flex flex-col gap-4">
         <div className="flex gap-2">
-          <button
-            type="button"
+          <Button
             onClick={() => handleSetStatus("online")}
-            className="flex-1 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            className="flex-1"
             disabled={!isConnected || !myClientId}
           >
             Online
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="secondary"
             onClick={() => handleSetStatus("away")}
-            className="flex-1 rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground hover:bg-secondary/90 disabled:opacity-50"
+            className="flex-1"
             disabled={!isConnected || !myClientId}
           >
             Away
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="outline"
             onClick={() => handleSetStatus("busy")}
-            className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium hover:bg-muted disabled:opacity-50"
+            className="flex-1"
             disabled={!isConnected || !myClientId}
           >
             Busy
-          </button>
+          </Button>
         </div>
 
         <div className="rounded-none border border-border bg-muted/50 p-3">
@@ -248,8 +249,8 @@ export function PresencePanel({ className }: { className?: string }) {
             </ul>
           )}
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 `;