Coding Agent IDE

BackCoding Agent IDEAI

100%

import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockCopyButton,
  CodeBlockFilename,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/ai/code-block";
import {
  Conversation,
  ConversationContent,
  ConversationItem,
  ConversationScrollButton,
} from "@/components/ai/conversation";
import {
  FileTree,
  FileTreeFile,
  FileTreeFolder,
} from "@/components/ai/file-tree";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai/message";
import {
  Plan,
  PlanAction,
  PlanContent,
  PlanDescription,
  PlanFooter,
  PlanHeader,
  PlanTitle,
  PlanTrigger,
} from "@/components/ai/plan";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { PromptInputAgent } from "@/components/ai/prompt-input-agent";
import {
  Queue,
  QueueItem,
  QueueItemContent,
  QueueItemIndicator,
  QueueList,
  QueueSection,
  QueueSectionContent,
  QueueSectionLabel,
  QueueSectionTrigger,
} from "@/components/ai/queue";
import {
  Terminal,
  TerminalActions,
  TerminalClearButton,
  TerminalContent,
  TerminalCopyButton,
  TerminalHeader,
  TerminalStatus,
  TerminalTitle,
} from "@/components/ai/terminal";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ElevationProvider } from "@/components/ui/elevation";
import { useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  agent,
  expandedFolders,
  files,
  initialPath,
  plan,
  queue,
  reply,
  request,
  terminalOutput,
} from "./data";

export default function IdeExample() {
  const [selected, setSelected] = useState(initialPath);
  const [output, setOutput] = useState(terminalOutput);
  const file = files[selected] ?? files[initialPath];

  return (
    <ElevationProvider mode="layered">
      <div className="flex min-h-svh flex-col gap-2 bg-background p-2 text-foreground lg:h-svh">
        <header className="flex h-10 shrink-0 items-center justify-between gap-2 px-2">
          <div className="flex items-center gap-2 text-sm font-medium">
            keeper
            <Badge variant="secondary" shape="pill">
              main
            </Badge>
          </div>
          <Button size="sm" variant="outline">
            <IconPlaceholder
              lucide="PlayIcon"
              tabler="IconPlayerPlay"
              hugeicons="PlayIcon"
              phosphor="PlayIcon"
              remixicon="RiPlayLine"
              className="size-3.5"
            />
            Run tests
          </Button>
        </header>

        <div className="grid min-h-0 flex-1 gap-2 lg:grid-cols-[220px_minmax(0,1fr)_380px]">
          <aside className="rounded-xl border border-border bg-card p-2">
            <FileTree
              defaultExpanded={new Set(expandedFolders)}
              onSelect={setSelected}
              selectedPath={selected}
            >
              <FileTreeFolder name="src" path="src">
                <FileTreeFolder name="lib" path="src/lib">
                  <FileTreeFile name="keeper.ts" path="src/lib/keeper.ts" />
                  <FileTreeFile name="drift.ts" path="src/lib/drift.ts" />
                </FileTreeFolder>
                <FileTreeFile name="app.tsx" path="src/app.tsx" />
              </FileTreeFolder>
              <FileTreeFolder name="tests" path="tests">
                <FileTreeFile
                  name="keeper.test.ts"
                  path="tests/keeper.test.ts"
                />
              </FileTreeFolder>
              <FileTreeFile name="package.json" path="package.json" />
            </FileTree>
          </aside>

          <section className="flex min-h-0 min-w-0 flex-col gap-2">
            <div className="min-h-0 flex-1 overflow-auto">
              <CodeBlock
                code={file.code}
                language={file.language}
                showLineNumbers
              >
                <CodeBlockHeader>
                  <CodeBlockTitle>
                    <IconPlaceholder
                      lucide="FileCodeIcon"
                      tabler="IconFileCode"
                      hugeicons="File01Icon"
                      phosphor="FileCodeIcon"
                      remixicon="RiFileCodeLine"
                      className="size-3.5"
                    />
                    <CodeBlockFilename>{file.name}</CodeBlockFilename>
                  </CodeBlockTitle>
                  <CodeBlockActions>
                    <CodeBlockCopyButton />
                  </CodeBlockActions>
                </CodeBlockHeader>
              </CodeBlock>
            </div>
            <Terminal
              className="shrink-0"
              onClear={() => setOutput("")}
              output={output}
            >
              <TerminalHeader>
                <div className="flex items-center">
                  <TerminalTitle />
                  <TerminalStatus />
                </div>
                <TerminalActions>
                  <TerminalCopyButton />
                  <TerminalClearButton />
                </TerminalActions>
              </TerminalHeader>
              <TerminalContent className="max-h-40" />
            </Terminal>
          </section>

          <aside className="flex h-[34rem] min-h-0 flex-col gap-2 rounded-xl border border-border bg-card p-2 lg:h-auto">
            <Conversation className="min-h-0">
              <ConversationContent className="gap-5 p-2">
                <ConversationItem messageId="u1">
                  <Message from="user">
                    <MessageContent>{request}</MessageContent>
                  </Message>
                </ConversationItem>
                <ConversationItem messageId="a1">
                  <Message from="assistant">
                    <MessageContent className="gap-3">
                      <MessageResponse>{reply}</MessageResponse>
                      <Plan defaultOpen className="w-full">
                        <PlanHeader>
                          <div>
                            <PlanTitle>{plan.title}</PlanTitle>
                            <PlanDescription>
                              {plan.description}
                            </PlanDescription>
                          </div>
                          <PlanAction>
                            <PlanTrigger />
                          </PlanAction>
                        </PlanHeader>
                        <PlanContent>
                          {plan.steps.map((s) => (
                            <p key={s}>{s}</p>
                          ))}
                        </PlanContent>
                        <PlanFooter>
                          <Button size="sm">Start</Button>
                          <Button size="sm" variant="ghost">
                            Edit plan
                          </Button>
                        </PlanFooter>
                      </Plan>
                      <Queue className="w-full">
                        <QueueSection>
                          <QueueSectionTrigger>
                            <QueueSectionLabel
                              label="Queued"
                              count={queue.queued.length}
                            />
                          </QueueSectionTrigger>
                          <QueueSectionContent>
                            <QueueList>
                              {queue.queued.map((t) => (
                                <QueueItem key={t.id}>
                                  <div className="flex items-start gap-2">
                                    <QueueItemIndicator />
                                    <QueueItemContent>
                                      {t.title}
                                    </QueueItemContent>
                                  </div>
                                </QueueItem>
                              ))}
                            </QueueList>
                          </QueueSectionContent>
                        </QueueSection>
                        <QueueSection defaultOpen={false}>
                          <QueueSectionTrigger>
                            <QueueSectionLabel
                              label="Completed"
                              count={queue.completed.length}
                            />
                          </QueueSectionTrigger>
                          <QueueSectionContent>
                            <QueueList>
                              {queue.completed.map((t) => (
                                <QueueItem key={t.id}>
                                  <div className="flex items-start gap-2">
                                    <QueueItemIndicator completed />
                                    <QueueItemContent completed>
                                      {t.title}
                                    </QueueItemContent>
                                  </div>
                                </QueueItem>
                              ))}
                            </QueueList>
                          </QueueSectionContent>
                        </QueueSection>
                      </Queue>
                    </MessageContent>
                  </Message>
                </ConversationItem>
              </ConversationContent>
              <ConversationScrollButton />
            </Conversation>

            <PromptInput onSubmit={() => {}}>
              <PromptInputHeader>
                <PromptInputAgent agent={agent} />
              </PromptInputHeader>
              <PromptInputBody>
                <PromptInputTextarea
                  placeholder={`Ask ${agent.name} to change the code…`}
                  className="min-h-16"
                />
              </PromptInputBody>
              <PromptInputFooter>
                <PromptInputTools>
                  <Button
                    aria-label="Attach"
                    size="icon-sm"
                    type="button"
                    variant="ghost"
                  >
                    <IconPlaceholder
                      lucide="PlusIcon"
                      tabler="IconPlus"
                      hugeicons="Add01Icon"
                      phosphor="PlusIcon"
                      remixicon="RiAddLine"
                      className="size-4"
                    />
                  </Button>
                </PromptInputTools>
                <PromptInputSubmit
                  size="icon-sm"
                  className="size-10"
                  variant="secondary"
                />
              </PromptInputFooter>
            </PromptInput>
          </aside>
        </div>
      </div>
    </ElevationProvider>
  );
}

// Sample data for the Coding agent IDE example. Shared by react.tsx, vue.vue and svelte.svelte.

export interface SourceFile {
  path: string;
  name: string;
  language: "typescript" | "json";
  code: string;
}

export const files: Record<string, SourceFile> = {
  "src/lib/keeper.ts": {
    path: "src/lib/keeper.ts",
    name: "keeper.ts",
    language: "typescript",
    code: `import { getDrift } from "./drift"
import { rebalance } from "./rebalance"

const LIMIT = 0.02

export async function run(index: string) {
  // only rebalance when drift is above the limit
  const drift = await getDrift(index)
  if (drift < LIMIT) return { status: "skipped", drift }
  const tx = await rebalance(index, { slippage: 0.01 })
  return { status: "ok", drift, tx }
}`,
  },
  "src/lib/drift.ts": {
    path: "src/lib/drift.ts",
    name: "drift.ts",
    language: "typescript",
    code: `import { quote } from "./quote"

export async function getDrift(index: string) {
  const legs = await quote(index)
  const target = 1 / legs.length
  // largest distance between a leg weight and its target
  return Math.max(...legs.map((leg) => Math.abs(leg.weight - target)))
}`,
  },
  "src/app.tsx": {
    path: "src/app.tsx",
    name: "app.tsx",
    language: "typescript",
    code: `import { Ticker } from "./components/ticker"

export function App() {
  return (
    <main>
      <Ticker symbols={["NVDAx", "MSFTx", "MAG4"]} />
    </main>
  )
}`,
  },
  "tests/keeper.test.ts": {
    path: "tests/keeper.test.ts",
    name: "keeper.test.ts",
    language: "typescript",
    code: `import { expect, test } from "vitest"
import { run } from "../src/lib/keeper"

test("skips when drift is under the limit", async () => {
  expect((await run("mag4")).status).toBe("skipped")
})

test("rebalances at exactly 2%", async () => {
  expect((await run("mag4-drifted")).status).toBe("ok")
})`,
  },
  "package.json": {
    path: "package.json",
    name: "package.json",
    language: "json",
    code: `{
  "name": "keeper",
  "private": true,
  "scripts": { "test": "vitest run" }
}`,
  },
};

export const initialPath = "src/lib/keeper.ts";
export const expandedFolders = ["src", "src/lib", "tests"];

export const terminalOutput = [
  "\u001b[90m$\u001b[0m bun run test",
  "",
  "\u001b[34mRUN\u001b[0m  v2.1.4 /app",
  "",
  " \u001b[32m✓\u001b[0m tests/drift.test.ts \u001b[90m(4)\u001b[0m",
  " \u001b[31m✗\u001b[0m tests/keeper.test.ts \u001b[90m(3)\u001b[0m",
  "   \u001b[31m→ expected 0.02 to be less than 0.02\u001b[0m",
  "",
  "\u001b[33mTest Files\u001b[0m  \u001b[31m1 failed\u001b[0m | \u001b[32m1 passed\u001b[0m",
].join("\n");

export const request =
  "Make the keeper skip rebalances when drift is under 2%, then fix the failing test.";

export const reply =
  "Done with the first part: `run()` now returns `skipped` below the limit. The boundary test still fails because **exactly 2%** should rebalance. Here is the plan:";

export const plan = {
  title: "Fix the boundary case",
  description: "3 steps · about 1 minute",
  steps: [
    "1. Compare with < instead of <= in keeper.ts",
    "2. Re-run tests/keeper.test.ts",
    "3. Commit the change",
  ],
};

export const queue = {
  queued: [
    { id: "q1", title: "Add a test for slippage above 1%" },
    { id: "q2", title: "Document the drift limit in README" },
  ],
  completed: [{ id: "c1", title: "Skip rebalance under the limit" }],
};

export const agent = {
  id: "keeper",
  name: "Keeper",
  scope: "coding",
  color: "chart-3",
};

<script setup lang="ts">
import { ElevationProvider } from "@/components/ui/elevation"
import { FileCodeIcon, PlayIcon, PlusIcon } from "@lucide/vue";
import { computed, ref } from "vue";
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockCopyButton,
  CodeBlockFilename,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/ai/code-block";
import {
  Conversation,
  ConversationContent,
  ConversationItem,
  ConversationScrollButton,
} from "@/components/ai/conversation";
import { FileTree, FileTreeFile, FileTreeFolder } from "@/components/ai/file-tree";
import { Message, MessageContent, MessageResponse } from "@/components/ai/message";
import {
  Plan,
  PlanAction,
  PlanContent,
  PlanDescription,
  PlanFooter,
  PlanHeader,
  PlanTitle,
  PlanTrigger,
} from "@/components/ai/plan";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { PromptInputAgent } from "@/components/ai/prompt-input-agent";
import {
  Queue,
  QueueItem,
  QueueItemContent,
  QueueItemIndicator,
  QueueList,
  QueueSection,
  QueueSectionContent,
  QueueSectionLabel,
  QueueSectionTrigger,
} from "@/components/ai/queue";
import {
  Terminal,
  TerminalActions,
  TerminalClearButton,
  TerminalContent,
  TerminalCopyButton,
  TerminalHeader,
  TerminalStatus,
  TerminalTitle,
} from "@/components/ai/terminal";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  agent,
  expandedFolders,
  files,
  initialPath,
  plan,
  queue,
  reply,
  request,
  terminalOutput,
} from "./data";

const selected = ref(initialPath);
const expanded = ref(new Set(expandedFolders));
const output = ref(terminalOutput);
const file = computed(() => files[selected.value] ?? files[initialPath]);
</script>

<template>
  <ElevationProvider mode="layered">
  <div class="flex min-h-svh flex-col gap-2 bg-background p-2 text-foreground lg:h-svh">
    <header class="flex h-10 shrink-0 items-center justify-between gap-2 px-2">
      <div class="flex items-center gap-2 text-sm font-medium">
        keeper
        <Badge variant="secondary" shape="pill">main</Badge>
      </div>
      <Button size="sm" variant="outline">
        <PlayIcon class="size-3.5" />
        Run tests
      </Button>
    </header>

    <div class="grid min-h-0 flex-1 gap-2 lg:grid-cols-[220px_minmax(0,1fr)_380px]">
      <aside class="rounded-xl border border-border bg-card p-2">
        <FileTree v-model:expanded="expanded" :selected-path="selected" @select="selected = $event">
          <FileTreeFolder name="src" path="src">
            <FileTreeFolder name="lib" path="src/lib">
              <FileTreeFile name="keeper.ts" path="src/lib/keeper.ts" />
              <FileTreeFile name="drift.ts" path="src/lib/drift.ts" />
            </FileTreeFolder>
            <FileTreeFile name="app.tsx" path="src/app.tsx" />
          </FileTreeFolder>
          <FileTreeFolder name="tests" path="tests">
            <FileTreeFile name="keeper.test.ts" path="tests/keeper.test.ts" />
          </FileTreeFolder>
          <FileTreeFile name="package.json" path="package.json" />
        </FileTree>
      </aside>

      <section class="flex min-h-0 min-w-0 flex-col gap-2">
        <div class="min-h-0 flex-1 overflow-auto">
          <CodeBlock :code="file.code" :language="file.language" show-line-numbers>
            <CodeBlockHeader>
              <CodeBlockTitle>
                <FileCodeIcon class="size-3.5" />
                <CodeBlockFilename>{{ file.name }}</CodeBlockFilename>
              </CodeBlockTitle>
              <CodeBlockActions>
                <CodeBlockCopyButton />
              </CodeBlockActions>
            </CodeBlockHeader>
          </CodeBlock>
        </div>
        <Terminal class="shrink-0" :output="output" @clear="output = ''">
          <TerminalHeader>
            <div class="flex items-center">
              <TerminalTitle />
              <TerminalStatus />
            </div>
            <TerminalActions>
              <TerminalCopyButton />
              <TerminalClearButton />
            </TerminalActions>
          </TerminalHeader>
          <TerminalContent class="max-h-40" />
        </Terminal>
      </section>

      <aside class="flex h-[34rem] min-h-0 flex-col gap-2 rounded-xl border border-border bg-card p-2 lg:h-auto">
        <Conversation class="min-h-0">
          <ConversationContent class="gap-5 p-2">
            <ConversationItem message-id="u1">
              <Message from="user">
                <MessageContent>{{ request }}</MessageContent>
              </Message>
            </ConversationItem>
            <ConversationItem message-id="a1">
              <Message from="assistant">
                <MessageContent class="gap-3">
                  <MessageResponse :content="reply" />
                  <Plan default-open class="w-full">
                    <PlanHeader>
                      <div>
                        <PlanTitle>{{ plan.title }}</PlanTitle>
                        <PlanDescription>{{ plan.description }}</PlanDescription>
                      </div>
                      <PlanAction>
                        <PlanTrigger />
                      </PlanAction>
                    </PlanHeader>
                    <PlanContent>
                      <p v-for="s in plan.steps" :key="s">{{ s }}</p>
                    </PlanContent>
                    <PlanFooter>
                      <Button size="sm">Start</Button>
                      <Button size="sm" variant="ghost">Edit plan</Button>
                    </PlanFooter>
                  </Plan>
                  <Queue class="w-full">
                    <QueueSection>
                      <QueueSectionTrigger>
                        <QueueSectionLabel label="Queued" :count="queue.queued.length" />
                      </QueueSectionTrigger>
                      <QueueSectionContent>
                        <QueueList>
                          <QueueItem v-for="t in queue.queued" :key="t.id">
                            <div class="flex items-start gap-2">
                              <QueueItemIndicator />
                              <QueueItemContent>{{ t.title }}</QueueItemContent>
                            </div>
                          </QueueItem>
                        </QueueList>
                      </QueueSectionContent>
                    </QueueSection>
                    <QueueSection :default-open="false">
                      <QueueSectionTrigger>
                        <QueueSectionLabel label="Completed" :count="queue.completed.length" />
                      </QueueSectionTrigger>
                      <QueueSectionContent>
                        <QueueList>
                          <QueueItem v-for="t in queue.completed" :key="t.id">
                            <div class="flex items-start gap-2">
                              <QueueItemIndicator completed />
                              <QueueItemContent completed>{{ t.title }}</QueueItemContent>
                            </div>
                          </QueueItem>
                        </QueueList>
                      </QueueSectionContent>
                    </QueueSection>
                  </Queue>
                </MessageContent>
              </Message>
            </ConversationItem>
          </ConversationContent>
          <ConversationScrollButton />
        </Conversation>

        <PromptInput>
          <PromptInputHeader>
            <PromptInputAgent :agent="agent" />
          </PromptInputHeader>
          <PromptInputBody>
            <PromptInputTextarea :placeholder="`Ask ${agent.name} to change the code…`" class="min-h-16" />
          </PromptInputBody>
          <PromptInputFooter>
            <PromptInputTools>
              <Button aria-label="Attach" size="icon-sm" type="button" variant="ghost">
                <PlusIcon class="size-4" />
              </Button>
            </PromptInputTools>
            <PromptInputSubmit class="size-10" size="icon-sm" variant="secondary" />
          </PromptInputFooter>
        </PromptInput>
      </aside>
    </div>
  </div>
  </ElevationProvider>
</template>

// Sample data for the Coding agent IDE example. Shared by react.tsx, vue.vue and svelte.svelte.

export interface SourceFile {
  path: string;
  name: string;
  language: "typescript" | "json";
  code: string;
}

export const files: Record<string, SourceFile> = {
  "src/lib/keeper.ts": {
    path: "src/lib/keeper.ts",
    name: "keeper.ts",
    language: "typescript",
    code: `import { getDrift } from "./drift"
import { rebalance } from "./rebalance"

const LIMIT = 0.02

export async function run(index: string) {
  // only rebalance when drift is above the limit
  const drift = await getDrift(index)
  if (drift < LIMIT) return { status: "skipped", drift }
  const tx = await rebalance(index, { slippage: 0.01 })
  return { status: "ok", drift, tx }
}`,
  },
  "src/lib/drift.ts": {
    path: "src/lib/drift.ts",
    name: "drift.ts",
    language: "typescript",
    code: `import { quote } from "./quote"

export async function getDrift(index: string) {
  const legs = await quote(index)
  const target = 1 / legs.length
  // largest distance between a leg weight and its target
  return Math.max(...legs.map((leg) => Math.abs(leg.weight - target)))
}`,
  },
  "src/app.tsx": {
    path: "src/app.tsx",
    name: "app.tsx",
    language: "typescript",
    code: `import { Ticker } from "./components/ticker"

export function App() {
  return (
    <main>
      <Ticker symbols={["NVDAx", "MSFTx", "MAG4"]} />
    </main>
  )
}`,
  },
  "tests/keeper.test.ts": {
    path: "tests/keeper.test.ts",
    name: "keeper.test.ts",
    language: "typescript",
    code: `import { expect, test } from "vitest"
import { run } from "../src/lib/keeper"

test("skips when drift is under the limit", async () => {
  expect((await run("mag4")).status).toBe("skipped")
})

test("rebalances at exactly 2%", async () => {
  expect((await run("mag4-drifted")).status).toBe("ok")
})`,
  },
  "package.json": {
    path: "package.json",
    name: "package.json",
    language: "json",
    code: `{
  "name": "keeper",
  "private": true,
  "scripts": { "test": "vitest run" }
}`,
  },
};

export const initialPath = "src/lib/keeper.ts";
export const expandedFolders = ["src", "src/lib", "tests"];

export const terminalOutput = [
  "\u001b[90m$\u001b[0m bun run test",
  "",
  "\u001b[34mRUN\u001b[0m  v2.1.4 /app",
  "",
  " \u001b[32m✓\u001b[0m tests/drift.test.ts \u001b[90m(4)\u001b[0m",
  " \u001b[31m✗\u001b[0m tests/keeper.test.ts \u001b[90m(3)\u001b[0m",
  "   \u001b[31m→ expected 0.02 to be less than 0.02\u001b[0m",
  "",
  "\u001b[33mTest Files\u001b[0m  \u001b[31m1 failed\u001b[0m | \u001b[32m1 passed\u001b[0m",
].join("\n");

export const request =
  "Make the keeper skip rebalances when drift is under 2%, then fix the failing test.";

export const reply =
  "Done with the first part: `run()` now returns `skipped` below the limit. The boundary test still fails because **exactly 2%** should rebalance. Here is the plan:";

export const plan = {
  title: "Fix the boundary case",
  description: "3 steps · about 1 minute",
  steps: [
    "1. Compare with < instead of <= in keeper.ts",
    "2. Re-run tests/keeper.test.ts",
    "3. Commit the change",
  ],
};

export const queue = {
  queued: [
    { id: "q1", title: "Add a test for slippage above 1%" },
    { id: "q2", title: "Document the drift limit in README" },
  ],
  completed: [{ id: "c1", title: "Skip rebalance under the limit" }],
};

export const agent = {
  id: "keeper",
  name: "Keeper",
  scope: "coding",
  color: "chart-3",
};

<script lang="ts">
  import { ElevationProvider } from "$lib/components/ui/elevation";
  import {
    CodeBlock,
    CodeBlockActions,
    CodeBlockCopyButton,
    CodeBlockFilename,
    CodeBlockHeader,
    CodeBlockTitle,
  } from "$lib/components/ai/code-block";
  import {
    Conversation,
    ConversationContent,
    ConversationItem,
    ConversationScrollButton,
  } from "$lib/components/ai/conversation";
  import { FileTree, FileTreeFile, FileTreeFolder } from "$lib/components/ai/file-tree";
  import { Message, MessageContent, MessageResponse } from "$lib/components/ai/message";
  import {
    Plan,
    PlanAction,
    PlanContent,
    PlanDescription,
    PlanFooter,
    PlanHeader,
    PlanTitle,
    PlanTrigger,
  } from "$lib/components/ai/plan";
  import {
    PromptInput,
    PromptInputBody,
    PromptInputFooter,
    PromptInputHeader,
    PromptInputSubmit,
    PromptInputTextarea,
    PromptInputTools,
  } from "$lib/components/ai/prompt-input";
  import { PromptInputAgent } from "$lib/components/ai/prompt-input-agent";
  import {
    Queue,
    QueueItem,
    QueueItemContent,
    QueueItemIndicator,
    QueueList,
    QueueSection,
    QueueSectionContent,
    QueueSectionLabel,
    QueueSectionTrigger,
  } from "$lib/components/ai/queue";
  import {
    Terminal,
    TerminalActions,
    TerminalClearButton,
    TerminalContent,
    TerminalCopyButton,
    TerminalHeader,
    TerminalStatus,
    TerminalTitle,
  } from "$lib/components/ai/terminal";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import {
    agent,
    expandedFolders,
    files,
    initialPath,
    plan,
    queue,
    reply,
    request,
    terminalOutput,
  } from "./data";

  let selected = $state(initialPath);
  let expanded = $state(new Set(expandedFolders));
  let output = $state(terminalOutput);
  const file = $derived(files[selected] ?? files[initialPath]);
</script>

<ElevationProvider mode="layered">
<div class="flex min-h-svh flex-col gap-2 bg-background p-2 text-foreground lg:h-svh">
  <header class="flex h-10 shrink-0 items-center justify-between gap-2 px-2">
    <div class="flex items-center gap-2 text-sm font-medium">
      keeper
      <Badge variant="secondary" shape="pill">main</Badge>
    </div>
    <Button size="sm" variant="outline">
      <IconPlaceholder
        lucide="PlayIcon"
        tabler="IconPlayerPlay"
        hugeicons="PlayIcon"
        phosphor="PlayIcon"
        remixicon="RiPlayLine"
        class="size-3.5"
      />
      Run tests
    </Button>
  </header>

  <div class="grid min-h-0 flex-1 gap-2 lg:grid-cols-[220px_minmax(0,1fr)_380px]">
    <aside class="rounded-xl border border-border bg-card p-2">
      <FileTree bind:expanded selectedPath={selected} onSelect={(p) => (selected = p)}>
        <FileTreeFolder name="src" path="src">
          <FileTreeFolder name="lib" path="src/lib">
            <FileTreeFile name="keeper.ts" path="src/lib/keeper.ts" />
            <FileTreeFile name="drift.ts" path="src/lib/drift.ts" />
          </FileTreeFolder>
          <FileTreeFile name="app.tsx" path="src/app.tsx" />
        </FileTreeFolder>
        <FileTreeFolder name="tests" path="tests">
          <FileTreeFile name="keeper.test.ts" path="tests/keeper.test.ts" />
        </FileTreeFolder>
        <FileTreeFile name="package.json" path="package.json" />
      </FileTree>
    </aside>

    <section class="flex min-h-0 min-w-0 flex-col gap-2">
      <div class="min-h-0 flex-1 overflow-auto">
        <CodeBlock code={file.code} language={file.language} showLineNumbers>
          <CodeBlockHeader>
            <CodeBlockTitle>
              <IconPlaceholder
                lucide="FileCodeIcon"
                tabler="IconFileCode"
                hugeicons="File01Icon"
                phosphor="FileCodeIcon"
                remixicon="RiFileCodeLine"
                class="size-3.5"
              />
              <CodeBlockFilename>{file.name}</CodeBlockFilename>
            </CodeBlockTitle>
            <CodeBlockActions>
              <CodeBlockCopyButton />
            </CodeBlockActions>
          </CodeBlockHeader>
        </CodeBlock>
      </div>
      <Terminal class="shrink-0" {output} onClear={() => (output = "")}>
        <TerminalHeader>
          <div class="flex items-center">
            <TerminalTitle />
            <TerminalStatus />
          </div>
          <TerminalActions>
            <TerminalCopyButton />
            <TerminalClearButton />
          </TerminalActions>
        </TerminalHeader>
        <TerminalContent class="max-h-40" />
      </Terminal>
    </section>

    <aside class="flex h-[34rem] min-h-0 flex-col gap-2 rounded-xl border border-border bg-card p-2 lg:h-auto">
      <Conversation class="min-h-0">
        <ConversationContent class="gap-5 p-2">
          <ConversationItem messageId="u1">
            <Message from="user">
              <MessageContent>{request}</MessageContent>
            </Message>
          </ConversationItem>
          <ConversationItem messageId="a1">
            <Message from="assistant">
              <MessageContent class="gap-3">
                <MessageResponse content={reply} />
                <Plan open class="w-full">
                  <PlanHeader>
                    <div>
                      <PlanTitle>{plan.title}</PlanTitle>
                      <PlanDescription>{plan.description}</PlanDescription>
                    </div>
                    <PlanAction>
                      <PlanTrigger />
                    </PlanAction>
                  </PlanHeader>
                  <PlanContent>
                    {#each plan.steps as s (s)}
                      <p>{s}</p>
                    {/each}
                  </PlanContent>
                  <PlanFooter>
                    <Button size="sm">Start</Button>
                    <Button size="sm" variant="ghost">Edit plan</Button>
                  </PlanFooter>
                </Plan>
                <Queue class="w-full">
                  <QueueSection>
                    <QueueSectionTrigger>
                      <QueueSectionLabel label="Queued" count={queue.queued.length} />
                    </QueueSectionTrigger>
                    <QueueSectionContent>
                      <QueueList>
                        {#each queue.queued as t (t.id)}
                          <QueueItem>
                            <div class="flex items-start gap-2">
                              <QueueItemIndicator />
                              <QueueItemContent>{t.title}</QueueItemContent>
                            </div>
                          </QueueItem>
                        {/each}
                      </QueueList>
                    </QueueSectionContent>
                  </QueueSection>
                  <QueueSection open={false}>
                    <QueueSectionTrigger>
                      <QueueSectionLabel label="Completed" count={queue.completed.length} />
                    </QueueSectionTrigger>
                    <QueueSectionContent>
                      <QueueList>
                        {#each queue.completed as t (t.id)}
                          <QueueItem>
                            <div class="flex items-start gap-2">
                              <QueueItemIndicator completed />
                              <QueueItemContent completed>{t.title}</QueueItemContent>
                            </div>
                          </QueueItem>
                        {/each}
                      </QueueList>
                    </QueueSectionContent>
                  </QueueSection>
                </Queue>
              </MessageContent>
            </Message>
          </ConversationItem>
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>

      <PromptInput onSubmit={() => {}}>
        <PromptInputHeader>
          <PromptInputAgent {agent} />
        </PromptInputHeader>
        <PromptInputBody>
          <PromptInputTextarea placeholder="Ask {agent.name} to change the code…" class="min-h-16" />
        </PromptInputBody>
        <PromptInputFooter>
          <PromptInputTools>
            <Button aria-label="Attach" size="icon-sm" type="button" variant="ghost">
              <IconPlaceholder
                lucide="PlusIcon"
                tabler="IconPlus"
                hugeicons="Add01Icon"
                phosphor="PlusIcon"
                remixicon="RiAddLine"
                class="size-4"
              />
            </Button>
          </PromptInputTools>
          <PromptInputSubmit class="size-10" size="icon-sm" variant="secondary" />
        </PromptInputFooter>
      </PromptInput>
    </aside>
  </div>
</div>
</ElevationProvider>

// Sample data for the Coding agent IDE example. Shared by react.tsx, vue.vue and svelte.svelte.

export interface SourceFile {
  path: string;
  name: string;
  language: "typescript" | "json";
  code: string;
}

export const files: Record<string, SourceFile> = {
  "src/lib/keeper.ts": {
    path: "src/lib/keeper.ts",
    name: "keeper.ts",
    language: "typescript",
    code: `import { getDrift } from "./drift"
import { rebalance } from "./rebalance"

const LIMIT = 0.02

export async function run(index: string) {
  // only rebalance when drift is above the limit
  const drift = await getDrift(index)
  if (drift < LIMIT) return { status: "skipped", drift }
  const tx = await rebalance(index, { slippage: 0.01 })
  return { status: "ok", drift, tx }
}`,
  },
  "src/lib/drift.ts": {
    path: "src/lib/drift.ts",
    name: "drift.ts",
    language: "typescript",
    code: `import { quote } from "./quote"

export async function getDrift(index: string) {
  const legs = await quote(index)
  const target = 1 / legs.length
  // largest distance between a leg weight and its target
  return Math.max(...legs.map((leg) => Math.abs(leg.weight - target)))
}`,
  },
  "src/app.tsx": {
    path: "src/app.tsx",
    name: "app.tsx",
    language: "typescript",
    code: `import { Ticker } from "./components/ticker"

export function App() {
  return (
    <main>
      <Ticker symbols={["NVDAx", "MSFTx", "MAG4"]} />
    </main>
  )
}`,
  },
  "tests/keeper.test.ts": {
    path: "tests/keeper.test.ts",
    name: "keeper.test.ts",
    language: "typescript",
    code: `import { expect, test } from "vitest"
import { run } from "../src/lib/keeper"

test("skips when drift is under the limit", async () => {
  expect((await run("mag4")).status).toBe("skipped")
})

test("rebalances at exactly 2%", async () => {
  expect((await run("mag4-drifted")).status).toBe("ok")
})`,
  },
  "package.json": {
    path: "package.json",
    name: "package.json",
    language: "json",
    code: `{
  "name": "keeper",
  "private": true,
  "scripts": { "test": "vitest run" }
}`,
  },
};

export const initialPath = "src/lib/keeper.ts";
export const expandedFolders = ["src", "src/lib", "tests"];

export const terminalOutput = [
  "\u001b[90m$\u001b[0m bun run test",
  "",
  "\u001b[34mRUN\u001b[0m  v2.1.4 /app",
  "",
  " \u001b[32m✓\u001b[0m tests/drift.test.ts \u001b[90m(4)\u001b[0m",
  " \u001b[31m✗\u001b[0m tests/keeper.test.ts \u001b[90m(3)\u001b[0m",
  "   \u001b[31m→ expected 0.02 to be less than 0.02\u001b[0m",
  "",
  "\u001b[33mTest Files\u001b[0m  \u001b[31m1 failed\u001b[0m | \u001b[32m1 passed\u001b[0m",
].join("\n");

export const request =
  "Make the keeper skip rebalances when drift is under 2%, then fix the failing test.";

export const reply =
  "Done with the first part: `run()` now returns `skipped` below the limit. The boundary test still fails because **exactly 2%** should rebalance. Here is the plan:";

export const plan = {
  title: "Fix the boundary case",
  description: "3 steps · about 1 minute",
  steps: [
    "1. Compare with < instead of <= in keeper.ts",
    "2. Re-run tests/keeper.test.ts",
    "3. Commit the change",
  ],
};

export const queue = {
  queued: [
    { id: "q1", title: "Add a test for slippage above 1%" },
    { id: "q2", title: "Document the drift limit in README" },
  ],
  completed: [{ id: "c1", title: "Skip rebalance under the limit" }],
};

export const agent = {
  id: "keeper",
  name: "Keeper",
  scope: "coding",
  color: "chart-3",
};