feat: add chat UI with markdown rendering and flow actions

- Add Assistant, User, and Message chat components
- Add markdown rendering components (code blocks, links, lists, etc.)
- Add flow panel actions (PanelRightActions)
- Update layout, page, and FitViewOnResize components
- Remove old Chat, FollowUp, and Messages components
- Update dependencies

Co-authored-by: Cursor <cursoragent@cursor.com>

package.json

@@ -47,6 +47,7 @@
 		"@xyflow/svelte": "^1.5.0",
 		"clsx": "^2.1.1",
 		"elkjs": "^0.11.0",
+		"mode-watcher": "^1.1.0",
 		"svelte-markdown": "^0.4.1",
 		"tailwind-merge": "^3.4.0"
 	}

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       elkjs:
         specifier: ^0.11.0
         version: 0.11.0
+      mode-watcher:
+        specifier: ^1.1.0
+        version: 1.1.0(svelte@5.50.1)
       svelte-markdown:
         specifier: ^0.4.1
         version: 0.4.1(svelte@5.50.1)
@@ -1236,6 +1239,11 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mode-watcher@1.1.0:
+    resolution: {integrity: sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g==}
+    peerDependencies:
+      svelte: ^5.27.0
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -1412,6 +1420,16 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  runed@0.23.4:
+    resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
+    peerDependencies:
+      svelte: ^5.7.0
+
+  runed@0.25.0:
+    resolution: {integrity: sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   runed@0.35.1:
     resolution: {integrity: sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==}
     peerDependencies:
@@ -1488,6 +1506,12 @@ packages:
     peerDependencies:
       svelte: ^5.30.2
 
+  svelte-toolbelt@0.7.1:
+    resolution: {integrity: sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0
+
   svelte@5.50.1:
     resolution: {integrity: sha512-/Jlom4ddkISyVHXpM2O5dXP9pYnaiFrVQzPbIL1/pEoOa77ZunCb6nDgUCTNCQ/X3t64z9ukrK6R+BbB3kPR3A==}
     engines: {node: '>=18'}
@@ -2606,6 +2630,12 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  mode-watcher@1.1.0(svelte@5.50.1):
+    dependencies:
+      runed: 0.25.0(svelte@5.50.1)
+      svelte: 5.50.1
+      svelte-toolbelt: 0.7.1(svelte@5.50.1)
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
@@ -2730,6 +2760,16 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.57.1
       fsevents: 2.3.3
 
+  runed@0.23.4(svelte@5.50.1):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.50.1
+
+  runed@0.25.0(svelte@5.50.1):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.50.1
+
   runed@0.35.1(@sveltejs/kit@2.50.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.50.1)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.50.1)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.50.1):
     dependencies:
       dequal: 2.0.3
@@ -2809,6 +2849,13 @@ snapshots:
     transitivePeerDependencies:
       - '@sveltejs/kit'
 
+  svelte-toolbelt@0.7.1(svelte@5.50.1):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.23.4(svelte@5.50.1)
+      style-to-object: 1.0.14
+      svelte: 5.50.1
+
   svelte@5.50.1:
     dependencies:
       '@jridgewell/remapping': 2.3.5

src/lib/components/chat/Assistant.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { Handle, useEdges, useNodes, useNodesData, Position, type NodeProps, type Edge , type Node, useSvelteFlow} from '@xyflow/svelte';
+
+	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
+  import { Button } from '$lib/components/ui/button';
+	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
+	import { onMount } from 'svelte';
+	import Message from './Message.svelte';
+	import Spinner from '$lib/components/loading/Spinner.svelte';
+
+  let { id }: NodeProps = $props();
+
+  // svelte-ignore state_referenced_locally
+  const nodeData = useNodesData(id)
+
+  let selectedModels = $derived(nodeData.current?.data.selectedModels as ChatModel[] ?? []);
+  let loading = $derived(nodeData.current?.data.loading as boolean ?? false);
+  let message = $derived(nodeData.current?.data.content ? { role: 'assistant', content: nodeData.current?.data.content } as ChatMessage : null);
+</script>
+ 
+<article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
+  <div class="nodrag">
+    <header class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-1 flex-wrap">
+        {#each selectedModels as model}
+          <Button variant="outline" size="sm" class="font-normal! shadow-none! relative group">
+            <img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
+            {model.modelName}
+          </Button>
+        {/each}
+      </div>
+    </header>
+    
+    {#if loading}
+    <div class="flex items-center justify-start gap-1">
+      <Spinner className="size-4!" />
+      <p class="text-sm text-muted-foreground/70">Thinking...</p>
+    </div>
+    {/if}
+    {#if message}
+      <Message {message} />
+    {/if}
+  </div>
+</article>
+<Handle type="target" position={Position.Top} class="opacity-0"/>
+<Handle type="target" position={Position.Left} class="opacity-0"/>
+<Handle type="target" position={Position.Right} class="opacity-0"/>
+<Handle type="source" position={Position.Bottom} class="opacity-0" />
+<Handle type="source" position={Position.Left} class="opacity-0" />
+<Handle type="source" position={Position.Right} class="opacity-0" />

src/lib/components/chat/Chat.svelte

@@ -1,220 +0,0 @@
-<script lang="ts">
-  import { Send, X } from '@lucide/svelte';
-  import { Handle, useEdges, useNodes, useNodesData, Position, type NodeProps, type Edge , type Node, useSvelteFlow} from '@xyflow/svelte';
-
-	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
-  import { Button } from '$lib/components/ui/button';
-	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
-	import Spinner from '$lib/components/loading/Spinner.svelte';
-	import { onMount } from 'svelte';
-	import Messages from './Messages.svelte';
-
-  let { id }: NodeProps = $props();
-
-  // svelte-ignore state_referenced_locally
-  const nodeData = useNodesData(id)
-  const { current: nodes, set: setNodes, update: updateNodes } = useNodes();
-  const { current: edges, set: setEdges, update: updateEdges } = useEdges();
-  const { fitView, updateNodeData } = useSvelteFlow();
-  
-  let selectedModels = $state.raw<ChatModel[]>(nodeData.current?.data.selectedModels as ChatModel[] ?? []);
-  let prompt = $state.raw<string>(nodeData.current?.data.prompt as string ?? '');
-  let provider = $state.raw<string>('auto');
-  let loading = $state.raw<boolean>(false);
-  let aiCallDone = $state.raw<boolean>(false);
-
-  let messages = $state.raw<ChatMessage[]>([]);
-
-  function addModel(model: ChatModel) {
-    if (!selectedModels.some((m) => m.id === model.id)) {
-      selectedModels = [...selectedModels, model];
-    }
-  }
-  function removeModel(model: ChatModel) {
-    selectedModels = selectedModels.filter((m) => m.id !== model.id);
-  }
-  
-  function handleTriggerAction() {
-    const newNodes: Node[] = [];
-    if (selectedModels.length > 1) {
-      updateNodeData(id, {
-        selectedModels: selectedModels.slice(1),
-      }, { replace: true });
-      selectedModels.slice(1).forEach((m) => {
-        const newNodeId = `chat-${crypto.randomUUID()}`;
-        const position = {
-          y: 0,
-          x: 630,
-        }
-        newNodes.push({
-          id: newNodeId,
-          type: 'chat',
-          position,
-          data: {
-            prompt,
-            selectedModels: [m],
-          },
-        });
-      });
-      selectedModels = selectedModels.slice(0, 1);
-    };
-    updateNodes((currentNodes) => [...currentNodes, ...newNodes]);
-    fitView({
-      maxZoom: 1,
-      minZoom: 1,
-      interpolate: 'smooth',
-      duration: 500,
-    })
-    handleTriggerAiCall();
-  }
-
-  async function handleTriggerAiCall() {
-    const start = Date.now();
-    try {
-      messages = [...messages, { role: 'user', content: prompt }];
-      loading = true;
-      const response = await fetch('/api', {
-        method: 'POST',
-        body: JSON.stringify({
-          model: selectedModels[0].id,
-          prompt,
-        }),
-      });
-      if (!response.ok) throw new Error(response.statusText);
-      if (!response.body) throw new Error('No response body');
-
-      messages = [...messages, { role: 'assistant', content: '' }];
-      const assistantIndex = messages.length - 1;
-      let content = '';
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) {
-          aiCallDone = true;
-          const newNodeId = `message-${crypto.randomUUID()}`;
-          const newNode: Node = {
-            id: newNodeId,
-            type: 'followUp',
-            position: {
-              x: 0,
-              y: 0,
-            },
-            data: {
-              // map messages to add isHidden: true
-              messages,
-              selectedModels,
-            },
-          }
-          const newEdge: Edge = {
-            id: `edge-${crypto.randomUUID()}`,
-            source: id,
-            target: newNodeId,
-          }
-          updateNodes((currentNodes) => [...currentNodes, newNode]);
-          updateEdges((currentEdges) => [...currentEdges, newEdge]);
-          break;
-        }
-
-        content += decoder.decode(value, { stream: true });
-        messages = messages.map((m, i) =>
-          i === assistantIndex ? { ...m, content } : m
-        );
-      }
-
-      messages = messages.map((m, i) =>
-        i === assistantIndex ? { ...m, content, timestamp: Date.now() - start } : m
-      );
-    } catch (error) {
-      console.error(error);
-    } finally {
-      loading = false;
-    }
-  }
-
-  onMount(() => {
-    if (nodeData.current?.data.prompt) {
-      handleTriggerAiCall();
-    }
-  });
-</script>
- 
-<article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
-  <div class="nodrag">
-    <header class="flex items-center justify-between mb-3">
-      <div class="flex items-center gap-1 flex-wrap">
-        {#each selectedModels as model}
-          <Button variant="outline" size="sm" class="font-normal! shadow-none! relative group">
-            <img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
-            {model.modelName}
-            <Button variant="default" size="icon-3xs" class="!shadow-none! absolute -top-1 -right-1 rounded-full! opacity-0 group-hover:opacity-100 transition-opacity duration-300" onclick={() => removeModel(model)}>
-              <X class="size-3" />
-            </Button>
-          </Button>
-        {/each}
-        {#if selectedModels.length < 3 && !loading && !aiCallDone}
-          <ComboBoxModels
-            onSelect={addModel}
-            excludeIds={selectedModels.map((m) => m.id)}
-          />
-        {/if}
-      </div>
-    </header>
-    <Messages {messages} />
-    {#if !aiCallDone}
-      <footer class="flex transition-all duration-300 {!loading ? 'flex-col items-end' : 'items-start mt-4 gap-2'}">
-        {#if loading}
-          <input
-            name="message"
-            id="message"
-            placeholder="Ask me anything..."
-            disabled={loading}
-            class="w-full resize-none bg-transparent border rounded-lg py-1.5 px-3 outline-none text-sm text-muted-foreground"
-            bind:value={prompt}
-            onkeydown={(e: KeyboardEvent) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              prompt = prompt.trim();
-              if (prompt) {
-                handleTriggerAction();
-              }
-            }
-          }} />
-        {:else}
-          <textarea
-            name="message"
-            id="message"
-            placeholder="Ask me anything..."
-            disabled={loading}
-            class="w-full resize-none bg-transparent border-none outline-none text-base text-accent-foreground"
-            bind:value={prompt}
-            onkeydown={(e: KeyboardEvent) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                prompt = prompt.trim();
-                if (prompt) {
-                  handleTriggerAction();
-                }
-              }
-            }}
-          ></textarea>
-        {/if}
-        <Button variant="outline" size="icon-sm" class="" disabled={!selectedModels.length || !prompt || loading} onclick={handleTriggerAction}>
-          {#if loading}
-            <Spinner className="size-5"/>
-          {:else}
-            <Send />
-          {/if}
-        </Button>
-      </footer>
-    {/if}
-  </div>
-</article>
-<Handle type="target" position={Position.Top} class="opacity-0"/>
-<Handle type="target" position={Position.Left} class="opacity-0"/>
-<Handle type="target" position={Position.Right} class="opacity-0"/>
-<Handle type="source" position={Position.Bottom} class="opacity-0" />
-<Handle type="source" position={Position.Left} class="opacity-0" />
-<Handle type="source" position={Position.Right} class="opacity-0" />

src/lib/components/chat/Message.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import SvelteMarkdown from 'svelte-markdown';
+
+  import type { ChatMessage } from '$lib/helpers/types';
+  import Paragraph from './markdown/Paragraph.svelte';
+  import Heading from './markdown/Heading.svelte';
+  import Code from './markdown/Code.svelte';
+  import Codespan from './markdown/Codespan.svelte';
+  import Blockquote from './markdown/Blockquote.svelte';
+  import List from './markdown/List.svelte';
+  import ListItem from './markdown/ListItem.svelte';
+  import Link from './markdown/Link.svelte';
+  import Hr from './markdown/Hr.svelte';
+
+  let { message }: { message: ChatMessage } = $props();
+
+  const renderers = {
+    paragraph: Paragraph,
+    heading: Heading,
+    code: Code,
+    codespan: Codespan,
+    blockquote: Blockquote,
+    list: List,
+    listitem: ListItem,
+    link: Link,
+    hr: Hr,
+  };
+</script>
+
+<main class="cursor-auto select-auto p-1">
+  {#if message?.role === 'user'}
+    <p class="text-lg text-accent-foreground leading-relaxed">
+      {message.content}
+    </p>
+  {:else}
+    <SvelteMarkdown source={message.content} renderers={renderers as any} />
+  {/if}
+</main>
+  <!-- {#if message.timestamp}
+    <p class="text-[10px] text-muted-foreground bg-muted px-2 py-1 rounded-md font-mono">
+      {message.timestamp / 1000}s
+    </p>
+  {/if} -->

src/lib/components/chat/Messages.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import SvelteMarkdown from 'svelte-markdown';
-
-  import type { ChatMessage } from '$lib/helpers/types';
-
-  let { messages }: { messages: ChatMessage[] } = $props();
-</script>
-
-<main class="p-1 space-y-2 cursor-auto select-auto">
-  {#each messages as message}
-    <div class="flex items-center justify-end {message.role === 'user' ? 'justify-end' : 'justify-start'}">
-      <div class="flex flex-col justify-center items-start gap-1.5">
-        {#if message.role === 'user'}
-          <p class="text-sm text-muted-foreground bg-accent-foreground/5 px-2 py-1 rounded-md">{message.content}</p>
-        {:else}
-          <SvelteMarkdown source={message.content} />
-        {/if}
-        {#if message.timestamp}
-          <p class="text-[10px] text-muted-foreground bg-muted px-2 py-1 rounded-md font-mono">
-            {message.timestamp / 1000}s
-          </p>
-        {/if}
-      </div>
-    </div>
-  {/each}
-</main>

src/lib/components/chat/{FollowUp.svelte → User.svelte}

@@ -6,24 +6,21 @@
   import { Button } from '$lib/components/ui/button';
 	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
-	import { onMount } from 'svelte';
-	import Messages from './Messages.svelte';
+	import Message from './Message.svelte';
 
   let { id }: NodeProps = $props();
 
   // svelte-ignore state_referenced_locally
   const nodeData = useNodesData(id)
-  const { current: nodes, set: setNodes, update: updateNodes } = useNodes();
-  const { current: edges, set: setEdges, update: updateEdges } = useEdges();
+  const { update: updateNodes } = useNodes();
+  const { update: updateEdges } = useEdges();
   const { fitView, updateNodeData } = useSvelteFlow();
-  
+
   let selectedModels = $state.raw<ChatModel[]>(nodeData.current?.data.selectedModels as ChatModel[] ?? []);
   let prompt = $state.raw<string>(nodeData.current?.data.prompt as string ?? '');
-  let provider = $state.raw<string>('auto');
   let loading = $state.raw<boolean>(false);
   let aiCallDone = $state.raw<boolean>(false);
-
-  let messages = $state.raw<ChatMessage[]>([]);
+  let messages = $state.raw<ChatMessage[]>(nodeData.current?.data?.messages as ChatMessage[] ?? []);
 
   function addModel(model: ChatModel) {
     if (!selectedModels.some((m) => m.id === model.id)) {
@@ -36,109 +33,105 @@
   
   function handleTriggerAction() {
     const newNodes: Node[] = [];
-    if (selectedModels.length > 1) {
-      updateNodeData(id, {
-        selectedModels: selectedModels.slice(1),
-      }, { replace: true });
-      selectedModels.slice(1).forEach((m) => {
-        const newNodeId = `chat-${crypto.randomUUID()}`;
-        const position = {
+    const newEdges: Edge[] = [];
+    messages = [...messages, { role: 'user', content: prompt }];
+    updateNodeData(id, { messages }, { replace: true });
+
+    selectedModels.forEach((m) => {
+      const newNodeId = `assistant-${crypto.randomUUID()}`;
+      const newNode: Node = {
+        id: newNodeId,
+        type: 'assistant',
+        position: {
+          x: 0,
           y: 0,
-          x: 630,
+        },
+        data: {
+          role: "assistant",
+          selectedModels: [m],
+          content: "",
+          loading: true,
         }
-        newNodes.push({
-          id: newNodeId,
-          type: 'chat',
-          position,
-          data: {
-            prompt,
-            selectedModels: [m],
-          },
-        });
-      });
-      selectedModels = selectedModels.slice(0, 1);
-    };
+      }
+      const newEdge: Edge = {
+        id: `edge-${crypto.randomUUID()}`,
+        source: id,
+        target: newNodeId,
+      }
+      newNodes.push(newNode);
+      newEdges.push(newEdge);
+    })
     updateNodes((currentNodes) => [...currentNodes, ...newNodes]);
+    updateEdges((currentEdges) => [...currentEdges, ...newEdges]);
     fitView({
       maxZoom: 1,
       minZoom: 1,
       interpolate: 'smooth',
       duration: 500,
     })
-    handleTriggerAiCall();
+    handleTriggerAiCall(newNodes);
   }
 
-  async function handleTriggerAiCall() {
+  async function handleTriggerAiCall(newNodes: Node[]) {
     const start = Date.now();
-    try {
-      messages = [...messages, { role: 'user', content: prompt }];
-      loading = true;
-      const response = await fetch('/api', {
-        method: 'POST',
-        body: JSON.stringify({
-          model: selectedModels[0].id,
-          prompt,
-        }),
-      });
-      if (!response.ok) throw new Error(response.statusText);
-      if (!response.body) throw new Error('No response body');
+    newNodes.forEach(async (node) => {
+      const model = (node?.data?.selectedModels as ChatModel[])?.length > 0 ? (node?.data?.selectedModels as ChatModel[])[0] : null;
+      if (!model) return;
+      try {
+        const response = await fetch('/api', {
+          method: 'POST',
+          body: JSON.stringify({
+            model: model.id,
+            prompt,
+          }),
+        });
+        if (!response.ok) throw new Error(response.statusText);
+        if (!response.body) throw new Error('No response body');
 
-      messages = [...messages, { role: 'assistant', content: '' }];
-      const assistantIndex = messages.length - 1;
-      let content = '';
+        let content = '';
 
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
 
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) {
-          aiCallDone = true;
-          console.log("AI CALL DONE")
-          const newNodeId = `message-${crypto.randomUUID()}`;
-          const newNode: Node = {
-            id: newNodeId,
-            type: 'follow-up',
-            position: {
-              x: 0,
-              y: 0,
-            },
-            data: {
-              messages,
-              selectedModels,
-            },
-          }
-          const newEdge: Edge = {
-            id: `edge-${crypto.randomUUID()}`,
-            source: id,
-            target: newNodeId,
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            const newNodeId = `user-${crypto.randomUUID()}`;
+            const newNode: Node = {
+              id: newNodeId,
+              type: 'user',
+              position: {
+                x: 0,
+                y: 0,
+              },
+              data: {
+                role: 'user',
+                messages: [...messages, { role: 'assistant', content }],
+                selectedModels: [model],
+              },
+            }
+            const newEdge: Edge = {
+              id: `edge-${crypto.randomUUID()}`,
+              source: node.id,
+              target: newNodeId,
+            }
+            updateNodes((currentNodes) => [...currentNodes, newNode]);
+            updateEdges((currentEdges) => [...currentEdges, newEdge]);
+            break;
           }
-          updateNodes((currentNodes) => [...currentNodes, newNode]);
-          updateEdges((currentEdges) => [...currentEdges, newEdge]);
-          break;
-        }
 
-        content += decoder.decode(value, { stream: true });
-        messages = messages.map((m, i) =>
-          i === assistantIndex ? { ...m, content } : m
-        );
+          content += decoder.decode(value, { stream: true });
+          updateNodeData(node.id, { ...node.data,content, loading: false }, { replace: true });
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        loading = false;
       }
-
-      messages = messages.map((m, i) =>
-        i === assistantIndex ? { ...m, content, timestamp: Date.now() - start } : m
-      );
-    } catch (error) {
-      console.error(error);
-    } finally {
-      loading = false;
-    }
+      });
   }
 
-  onMount(() => {
-    if (nodeData.current?.data.prompt) {
-      handleTriggerAiCall();
-    }
-  });
+  let lastMessage = $derived(messages?.length > 0 && messages[messages.length - 1].role === 'user' ? messages[messages.length - 1] : null);
 </script>
  
 <article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
@@ -149,12 +142,14 @@
           <Button variant="outline" size="sm" class="font-normal! shadow-none! relative group">
             <img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
             {model.modelName}
-            <Button variant="default" size="icon-3xs" class="!shadow-none! absolute -top-1 -right-1 rounded-full! opacity-0 group-hover:opacity-100 transition-opacity duration-300" onclick={() => removeModel(model)}>
-              <X class="size-3" />
-            </Button>
+            {#if !lastMessage}
+              <Button variant="default" size="icon-3xs" class="!shadow-none! absolute -top-1 -right-1 rounded-full! opacity-0 group-hover:opacity-100 transition-opacity duration-300" onclick={() => removeModel(model)}>
+                <X class="size-3" />
+              </Button>
+            {/if}
           </Button>
         {/each}
-        {#if selectedModels.length < 3 && !loading && !aiCallDone}
+        {#if selectedModels.length < 3 && !loading && !lastMessage}
           <ComboBoxModels
             onSelect={addModel}
             excludeIds={selectedModels.map((m) => m.id)}
@@ -162,18 +157,18 @@
         {/if}
       </div>
     </header>
-    <Messages {messages} />
-    {#if !aiCallDone}
-      <footer class="flex transition-all duration-300 {!loading ? 'flex-col items-end' : 'items-start mt-4 gap-2'}">
-        {#if loading}
-          <input
-            name="message"
-            id="message"
-            placeholder="Ask me anything..."
-            disabled={loading}
-            class="w-full resize-none bg-transparent border rounded-lg py-1.5 px-3 outline-none text-sm text-muted-foreground"
-            bind:value={prompt}
-            onkeydown={(e: KeyboardEvent) => {
+    {#if lastMessage}
+      <Message message={lastMessage} />
+      {:else}
+      <footer class="flex transition-all duration-300 flex-col items-end">
+        <textarea
+          name="message"
+          id="message"
+          placeholder="Ask me anything..."
+          disabled={loading}
+          class="w-full resize-none bg-transparent border-none outline-none text-base text-accent-foreground"
+          bind:value={prompt}
+          onkeydown={(e: KeyboardEvent) => {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
               prompt = prompt.trim();
@@ -181,26 +176,8 @@
                 handleTriggerAction();
               }
             }
-          }} />
-        {:else}
-          <textarea
-            name="message"
-            id="message"
-            placeholder="Ask me anything..."
-            disabled={loading}
-            class="w-full resize-none bg-transparent border-none outline-none text-base text-accent-foreground"
-            bind:value={prompt}
-            onkeydown={(e: KeyboardEvent) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                prompt = prompt.trim();
-                if (prompt) {
-                  handleTriggerAction();
-                }
-              }
-            }}
-          ></textarea>
-        {/if}
+          }}
+        ></textarea>
         <Button variant="outline" size="icon-sm" class="" disabled={!selectedModels.length || !prompt || loading} onclick={handleTriggerAction}>
           {#if loading}
             <Spinner className="size-5"/>

src/lib/components/chat/markdown/Blockquote.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<blockquote class="border-l-2 border-muted-foreground/30 pl-3 my-3 text-muted-foreground italic">
+  {@render children?.()}
+</blockquote>

src/lib/components/chat/markdown/Code.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  let { lang, text }: { lang?: string; text: string } = $props();
+</script>
+
+<div class="relative my-3 rounded-lg overflow-hidden border border-border/60 bg-muted/50">
+  {#if lang}
+    <div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border/60">
+      <span class="text-[11px] font-mono text-muted-foreground">{lang}</span>
+    </div>
+  {/if}
+  <pre class="overflow-x-auto p-3"><code class="text-[13px] leading-relaxed font-mono text-foreground/90">{text}</code></pre>
+</div>

src/lib/components/chat/markdown/Codespan.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  let { raw }: { raw: string } = $props();
+</script>
+
+<code class="px-1.5 py-0.5 rounded-md bg-muted text-[13px] font-mono text-foreground/85 border border-border/40">{raw.replace(/`/g, '')}</code>

src/lib/components/chat/markdown/Heading.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { depth, children }: { depth: number; raw?: string; text?: string; children?: Snippet } = $props();
+</script>
+
+{#if depth === 1}
+  <h1 class="text-xl font-semibold text-foreground mt-4 mb-2 first:mt-0">{@render children?.()}</h1>
+{:else if depth === 2}
+  <h2 class="text-lg font-semibold text-foreground mt-3.5 mb-2 first:mt-0">{@render children?.()}</h2>
+{:else if depth === 3}
+  <h3 class="text-base font-semibold text-foreground mt-3 mb-1.5 first:mt-0">{@render children?.()}</h3>
+{:else}
+  <h4 class="text-sm font-semibold text-foreground mt-2.5 mb-1 first:mt-0">{@render children?.()}</h4>
+{/if}

src/lib/components/chat/markdown/Hr.svelte

@@ -0,0 +1 @@
+<hr class="my-4 border-t border-border/60" />

src/lib/components/chat/markdown/Link.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { href = '', title, children }: { href?: string; title?: string; children?: Snippet } = $props();
+</script>
+
+<a {href} {title} target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 decoration-primary/40 hover:decoration-primary transition-colors">
+  {@render children?.()}
+</a>

src/lib/components/chat/markdown/List.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { ordered, start, children }: { ordered: boolean; start?: number; children?: Snippet } = $props();
+</script>
+
+{#if ordered}
+  <ol class="list-decimal list-outside pl-5 my-2 space-y-1 text-sm text-foreground/90 marker:text-muted-foreground" {start}>
+    {@render children?.()}
+  </ol>
+{:else}
+  <ul class="list-disc list-outside pl-5 my-2 space-y-1 text-sm text-foreground/90 marker:text-muted-foreground">
+    {@render children?.()}
+  </ul>
+{/if}

src/lib/components/chat/markdown/ListItem.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<li class="leading-relaxed pl-0.5">{@render children?.()}</li>

src/lib/components/chat/markdown/Paragraph.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<p class="text-sm leading-relaxed text-foreground/90 mb-3 last:mb-0">{@render children?.()}</p>

src/lib/components/flow/FitViewOnResize.svelte

@@ -9,8 +9,8 @@
   // Fallback dimensions (used before nodes are measured by xyflow)
   const DEFAULT_WIDTH = 600;
   const DEFAULT_HEIGHT = 200;
-  const H_SPACING = 100;
-  const V_SPACING = 80;
+  const H_SPACING = 40;
+  const V_SPACING = 40;
 
   const { fitView } = useSvelteFlow();
   const nodesStore = useNodes();
@@ -18,9 +18,6 @@
 
   let lastLayoutKey = $state<string | null>(null);
 
-  const isChat = (n: Node) => n.type === 'chat';
-  const isFollowUp = (n: Node) => n.type === 'followUp' || n.type === 'follow-up';
-
   /** Get the actual measured height of a node, or fallback */
   function getMeasuredHeight(node: Node): number {
     return node.measured?.height ?? DEFAULT_HEIGHT;
@@ -62,7 +59,7 @@
   function handleWindowResize() {
     fitView({
       maxZoom: 1,
-      minZoom: 0.5,
+      minZoom: 0.8,
       interpolate: 'smooth',
       duration: 500,
     });
@@ -77,88 +74,96 @@
   });
 
   /**
-   * Custom layout:
-   * - All chat nodes on the same horizontal row
-   * - Follow-up nodes below their source, using real measured heights
-   * - Multiple follow-ups for one source: stacked vertically
+   * Custom tree layout:
+   * - Root nodes (no incoming edge) on the same horizontal row
+   * - Siblings (children sharing the same source) on the same horizontal row
+   * - Parent centered above its children
+   * - Works recursively for any depth (user -> assistant -> user -> ...)
    */
   function computeLayout(nodes: Node[], edges: Edge[]): Node[] {
     const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-    const chatNodes = nodes.filter(isChat).sort((a, b) => a.id.localeCompare(b.id));
-    const followUpNodes = nodes.filter(isFollowUp);
 
-    // Build source->targets mapping from edges
-    const sourceByTarget = new Map<string, string>();
+    // Build parent->children mapping from edges
+    const childrenBySource = new Map<string, string[]>();
+    const hasParent = new Set<string>();
     for (const e of edges) {
-      sourceByTarget.set(e.target, e.source);
+      hasParent.add(e.target);
+      const list = childrenBySource.get(e.source) ?? [];
+      list.push(e.target);
+      childrenBySource.set(e.source, list);
     }
 
-    const followUpsBySource = new Map<string, string[]>();
-    for (const node of followUpNodes) {
-      const sourceId = sourceByTarget.get(node.id);
-      if (sourceId) {
-        const list = followUpsBySource.get(sourceId) ?? [];
-        list.push(node.id);
-        followUpsBySource.set(sourceId, list);
-      }
-    }
+    // Root nodes: no incoming edge
+    const rootNodes = nodes.filter((n) => !hasParent.has(n.id));
 
-    const positions = new Map<string, { x: number; y: number }>();
+    // 1) Compute the horizontal space each subtree needs
+    const subtreeWidths = new Map<string, number>();
 
-    // Chat nodes: same horizontal row, spaced by max width + H_SPACING
-    chatNodes.forEach((node, i) => {
-      positions.set(node.id, {
-        x: i * (getMeasuredWidth(node) + H_SPACING),
-        y: 0,
-      });
-    });
+    function computeSubtreeWidth(nodeId: string): number {
+      if (subtreeWidths.has(nodeId)) return subtreeWidths.get(nodeId)!;
+      const node = nodeMap.get(nodeId);
+      const nodeWidth = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
+      const children = childrenBySource.get(nodeId) ?? [];
 
-    // Place follow-ups recursively, depth-first
-    const processed = new Set<string>();
+      if (children.length === 0) {
+        subtreeWidths.set(nodeId, nodeWidth);
+        return nodeWidth;
+      }
 
-    const placeFollowUps = (sourceId: string) => {
-      const targets = followUpsBySource.get(sourceId);
-      if (!targets?.length) return;
+      const childrenTotalWidth = children.reduce(
+        (sum, childId) => sum + computeSubtreeWidth(childId),
+        0,
+      ) + (children.length - 1) * H_SPACING;
 
-      const sourcePos = positions.get(sourceId);
-      if (!sourcePos) return;
+      const width = Math.max(nodeWidth, childrenTotalWidth);
+      subtreeWidths.set(nodeId, width);
+      return width;
+    }
 
-      const sourceNode = nodeMap.get(sourceId);
-      const sourceHeight = sourceNode ? getMeasuredHeight(sourceNode) : DEFAULT_HEIGHT;
+    for (const root of rootNodes) {
+      computeSubtreeWidth(root.id);
+    }
 
-      let nextY = sourcePos.y + sourceHeight + V_SPACING;
+    // 2) Place nodes top-down: each node is centered in its allocated subtree width
+    const positions = new Map<string, { x: number; y: number }>();
 
-      for (const targetId of targets) {
-        if (processed.has(targetId)) continue;
+    function placeNode(nodeId: string, allocatedX: number, y: number) {
+      const node = nodeMap.get(nodeId);
+      const nodeWidth = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
+      const nodeHeight = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
+      const stWidth = subtreeWidths.get(nodeId) ?? nodeWidth;
 
-        positions.set(targetId, { x: sourcePos.x, y: nextY });
-        processed.add(targetId);
+      // Center node within its allocated subtree space
+      const x = allocatedX + (stWidth - nodeWidth) / 2;
+      positions.set(nodeId, { x, y });
 
-        const targetNode = nodeMap.get(targetId);
-        const targetHeight = targetNode ? getMeasuredHeight(targetNode) : DEFAULT_HEIGHT;
+      const children = childrenBySource.get(nodeId) ?? [];
+      if (children.length === 0) return;
 
-        // Recurse: place any follow-ups of this follow-up
-        placeFollowUps(targetId);
+      const childY = y + nodeHeight + V_SPACING;
+      let childX = allocatedX;
 
-        // Advance Y past this target and all its descendants
-        nextY = getSubtreeBottom(targetId, nodeMap, positions, followUpsBySource) + V_SPACING;
+      for (const childId of children) {
+        const childStWidth = subtreeWidths.get(childId) ?? DEFAULT_WIDTH;
+        placeNode(childId, childX, childY);
+        childX += childStWidth + H_SPACING;
       }
-    };
+    }
 
-    // Start from chat nodes
-    for (const chat of chatNodes) {
-      placeFollowUps(chat.id);
+    // Place root nodes side by side
+    let rootX = 0;
+    for (const root of rootNodes) {
+      computeSubtreeWidth(root.id);
+      placeNode(root.id, rootX, 0);
+      rootX += (subtreeWidths.get(root.id) ?? DEFAULT_WIDTH) + H_SPACING;
     }
 
-    // Orphan follow-ups (no source found)
-    for (const node of followUpNodes) {
+    // Orphan nodes (safety net)
+    for (const node of nodes) {
       if (positions.has(node.id)) continue;
       const allY = Array.from(positions.values()).map((p) => p.y);
       const maxY = allY.length > 0 ? Math.max(...allY) : 0;
-      positions.set(node.id, {
-        x: 0,
-        y: maxY + DEFAULT_HEIGHT + V_SPACING,
-      });
+      positions.set(node.id, { x: 0, y: maxY + DEFAULT_HEIGHT + V_SPACING });
     }
 
     return nodes.map((node) => ({
@@ -167,28 +172,6 @@
     }));
   }
 
-  /** Get the bottom Y edge of a node and all its follow-up descendants */
-  function getSubtreeBottom(
-    nodeId: string,
-    nodeMap: Map<string, Node>,
-    positions: Map<string, { x: number; y: number }>,
-    followUpsBySource: Map<string, string[]>,
-  ): number {
-    const pos = positions.get(nodeId);
-    const node = nodeMap.get(nodeId);
-    if (!pos) return 0;
-    const height = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
-    let bottom = pos.y + height;
-
-    const children = followUpsBySource.get(nodeId);
-    if (children) {
-      for (const childId of children) {
-        bottom = Math.max(bottom, getSubtreeBottom(childId, nodeMap, positions, followUpsBySource));
-      }
-    }
-    return bottom;
-  }
-
   function runLayout(nodes: Node[], edges: Edge[]) {
     const result = computeLayout(nodes, edges);
 
@@ -207,7 +190,7 @@
 
     fitView({
       maxZoom: 1,
-      minZoom: 0.5,
+      minZoom: 0.8,
       interpolate: 'smooth',
       duration: 250,
     });

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Plus, Contrast } from '@lucide/svelte';
+	import { Panel } from '@xyflow/svelte';
+
+  import { Button } from '$lib/components/ui/button';
+
+
+  let { onReset }: { onReset: () => void } = $props();
+
+  function handleReset() {
+    const ok = confirm('Are you sure you want to reset the flow?');
+    if (ok) {
+      onReset();
+    }
+  }
+</script>
+
+<Panel position="top-right" class="p-3 flex items-center justify-end gap-2">
+  <Button variant="outline" size="icon" class="" onclick={handleReset}>
+    <Plus />
+  </Button>
+</Panel>

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { ModeWatcher } from "mode-watcher";
 
 	import './layout.css';
 	import HuggingFaceLogo from '$lib/assets/hf-logo.svg';
@@ -27,6 +28,7 @@
 	<meta name="robots" content="index, follow">
 	<meta name="google" content="notranslate">
 </svelte:head>
+<ModeWatcher />
 <svelte:boundary>
 	<div class="min-h-screen bg-white overflow-hidden">
 		{#if modelsState.loading}

src/routes/+page.svelte

@@ -3,25 +3,29 @@
   import '@xyflow/svelte/dist/style.css';
   
   import { modelsState } from '$lib/state/models.svelte';
-	import Chat from '$lib/components/chat/Chat.svelte';
+	import User from '$lib/components/chat/User.svelte';
+	import Assistant from '$lib/components/chat/Assistant.svelte';
   import HFLogo from '$lib/assets/hf-logo.svg';
 	import type { ChatModel } from '$lib/helpers/types';
   import FitViewOnResize from '$lib/components/flow/FitViewOnResize.svelte';
-	import FollowUp from '$lib/components/chat/FollowUp.svelte';
+	import PanelRightActions from '$lib/components/flow/actions/PanelRightActions.svelte';
   
   const nodeTypes = {
-    chat: Chat,
-    followUp: Chat
+    user: User,
+    assistant: Assistant
   }
 
-  const initialNodes = [{
-    id: '1',
-    type: 'chat',
-    position: { x: 0, y: 0 },
-    data: {
-      selectedModels: modelsState.models.slice(0, 1) as ChatModel[],
-    },
-  }];
+  function getInitialNodes() {
+    return [{
+      id: `user-${crypto.randomUUID()}`,
+      type: 'user',
+      position: { x: 0, y: 0 },
+      data: {
+        selectedModels: modelsState.models.slice(0, 2) as ChatModel[],
+      },
+    }]
+  }
+  const initialNodes = getInitialNodes();
 
   let nodes = $state.raw<Node[]>(initialNodes);
   let edges = $state.raw<Edge[]>([]);
@@ -32,13 +36,13 @@
     bind:nodes
     bind:edges
     nodeTypes={nodeTypes}
-    minZoom={0.5}
+    minZoom={0.8}
     maxZoom={1.5}
     fitView
     proOptions={{ hideAttribution: true }}
     fitViewOptions={{
       maxZoom: 1,
-      minZoom: 0.5,
+      minZoom: 0.8,
       interpolate: "smooth",
       duration: 500,
     }}
@@ -48,10 +52,13 @@
     <FitViewOnResize initialNodes={initialNodes} />
     <MiniMap />
     <Background variant={BackgroundVariant.Lines} gap={30} patternColor="rgba(0, 0, 0, 0.04)" />
-    <Panel position="top-right" class="p-3">
-      (user-panel)
-    </Panel>
-    <Panel position="bottom-left" class="py-1.5 px-2.5 flex items-center justify-center gap-1.5 rounded-md border border-border bg-background shadow-xs">
+    <PanelRightActions
+      onReset={() => {
+        nodes = getInitialNodes();
+        edges = [];
+      }}
+    />
+    <Panel position="bottom-left" class="py-1.5 pl-2.5 pr-3.5 flex items-center justify-center gap-1.5 rounded-lg border border-border bg-background shadow-xs">
       <img src={HFLogo} alt="HF Logo" class="size-7" />
       <p class="text-xs text-accent-foreground">
         Hugging Face Playground

src/routes/layout.css

@@ -1,121 +1,121 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
-@import "tw-animate-css";
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.13 0.028 261.692);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.13 0.028 261.692);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.13 0.028 261.692);
+	--primary: oklch(0.21 0.034 264.665);
+	--primary-foreground: oklch(0.985 0.002 247.839);
+	--secondary: oklch(0.967 0.003 264.542);
+	--secondary-foreground: oklch(0.21 0.034 264.665);
+	--muted: oklch(0.967 0.003 264.542);
+	--muted-foreground: oklch(0.551 0.027 264.364);
+	--accent: oklch(0.967 0.003 264.542);
+	--accent-foreground: oklch(0.21 0.034 264.665);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.928 0.006 264.531);
+	--input: oklch(0.928 0.006 264.531);
+	--ring: oklch(0.707 0.022 261.325);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0.002 247.839);
+	--sidebar-foreground: oklch(0.13 0.028 261.692);
+	--sidebar-primary: oklch(0.21 0.034 264.665);
+	--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+	--sidebar-accent: oklch(0.967 0.003 264.542);
+	--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+	--sidebar-border: oklch(0.928 0.006 264.531);
+	--sidebar-ring: oklch(0.707 0.022 261.325);
 }
 
 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+	--background: oklch(0.13 0.028 261.692);
+	--foreground: oklch(0.985 0.002 247.839);
+	--card: oklch(0.21 0.034 264.665);
+	--card-foreground: oklch(0.985 0.002 247.839);
+	--popover: oklch(0.21 0.034 264.665);
+	--popover-foreground: oklch(0.985 0.002 247.839);
+	--primary: oklch(0.928 0.006 264.531);
+	--primary-foreground: oklch(0.21 0.034 264.665);
+	--secondary: oklch(0.278 0.033 256.848);
+	--secondary-foreground: oklch(0.985 0.002 247.839);
+	--muted: oklch(0.278 0.033 256.848);
+	--muted-foreground: oklch(0.707 0.022 261.325);
+	--accent: oklch(0.278 0.033 256.848);
+	--accent-foreground: oklch(0.985 0.002 247.839);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.551 0.027 264.364);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.21 0.034 264.665);
+	--sidebar-foreground: oklch(0.985 0.002 247.839);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+	--sidebar-accent: oklch(0.278 0.033 256.848);
+	--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.551 0.027 264.364);
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}