Agent Workspace

BackAgent WorkspaceAI

100%

import { AgentAvatar } from "@/components/ai/agent-avatar";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai/message";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { PromptInputAgent } from "@/components/ai/prompt-input-agent";
import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@/components/ai/reasoning";
import { Suggestion } from "@/components/ai/suggestion";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ElevationProvider } from "@/components/ui/elevation";
import {
  InsetPanel,
  InsetPanelBody,
  InsetPanelHeader,
} from "@/components/ui/inset-panel";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  agent,
  agentReply,
  composerPlaceholder,
  index,
  reasoning,
  reply,
  suggestions,
  tabs,
  userMessage,
} from "./data";

const setupIcon = {
  domain: (
    <IconPlaceholder
      lucide="GlobeIcon"
      tabler="IconWorld"
      hugeicons="Globe02Icon"
      phosphor="GlobeIcon"
      remixicon="RiGlobalLine"
    />
  ),
  email: (
    <IconPlaceholder
      lucide="MailIcon"
      tabler="IconMail"
      hugeicons="Mail01Icon"
      phosphor="EnvelopeSimpleIcon"
      remixicon="RiMailLine"
    />
  ),
  fees: (
    <IconPlaceholder
      lucide="CreditCardIcon"
      tabler="IconCreditCard"
      hugeicons="CreditCardIcon"
      phosphor="CreditCardIcon"
      remixicon="RiBankCardLine"
    />
  ),
  rpc: (
    <IconPlaceholder
      lucide="ServerIcon"
      tabler="IconServer"
      hugeicons="ServerStackIcon"
      phosphor="HardDrivesIcon"
      remixicon="RiHardDriveLine"
    />
  ),
};

const sectionLabel = "mt-[22px] mb-2.5 text-[15px] text-foreground-2";

function AgentTab() {
  return (
    <>
      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
        <div className="flex items-center justify-between gap-2">
          <Reasoning
            defaultOpen={false}
            duration={4}
            className="min-w-0 flex-1"
          >
            <ReasoningTrigger getThinkingMessage={() => reasoning.label} />
            <ReasoningContent>{reasoning.text}</ReasoningContent>
          </Reasoning>
          <Button
            aria-label="More"
            size="icon-xs"
            type="button"
            variant="ghost"
          >
            <IconPlaceholder
              lucide="MoreHorizontalIcon"
              tabler="IconDots"
              hugeicons="MoreHorizontalCircle01Icon"
              phosphor="DotsThreeOutlineIcon"
              remixicon="RiMoreLine"
              className="size-4"
            />
          </Button>
        </div>
        <div className="mt-3 flex flex-col gap-[18px]">
          <Message from="assistant">
            <MessageContent>
              <MessageResponse>{reply}</MessageResponse>
            </MessageContent>
          </Message>
          <Message from="user">
            <MessageContent>{userMessage}</MessageContent>
          </Message>
          <Message from="assistant">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <AgentAvatar
                seed={agent.id}
                color={agent.color}
                size={19}
                tile={false}
              />
              {agent.name}
            </div>
            <MessageContent>{agentReply}</MessageContent>
          </Message>
          <div className="flex flex-col gap-2">
            {suggestions.map((s) => (
              <Suggestion
                key={s.title}
                suggestion={s.title}
                variant="card"
                className="w-full bg-card"
              >
                {s.note}
              </Suggestion>
            ))}
          </div>
        </div>
      </div>
      <div className="px-2.5 pb-2.5">
        <PromptInput
          onSubmit={() => {}}
          className="[&_[data-slot=input-group]]:bg-muted"
        >
          <PromptInputHeader>
            <PromptInputAgent agent={agent} />
          </PromptInputHeader>
          <PromptInputBody>
            <PromptInputTextarea placeholder={composerPlaceholder} />
          </PromptInputBody>
          <PromptInputFooter>
            <PromptInputTools />
            <PromptInputSubmit
              size="icon-sm"
              className="size-10"
              variant="secondary"
            />
          </PromptInputFooter>
        </PromptInput>
      </div>
    </>
  );
}

function IndexTab() {
  return (
    <div className="min-h-0 flex-1 overflow-y-auto px-[18px] pt-[18px] pb-6">
      <div className="flex items-center justify-between">
        <span className="text-xl font-medium">{index.name}</span>
        <Button
          aria-label="Edit"
          size="icon-sm"
          type="button"
          variant="outline"
          className="rounded-full"
        >
          <IconPlaceholder
            lucide="PencilIcon"
            tabler="IconPencil"
            hugeicons="PencilEdit01Icon"
            phosphor="PencilSimpleIcon"
            remixicon="RiPencilLine"
            className="size-4"
          />
        </Button>
      </div>

      <div className={sectionLabel}>Stack</div>
      <Card className="gap-0 py-0">
        <ItemGroup>
          {index.stack.map((row, i) => (
            <div key={row.title}>
              {i > 0 && <ItemSeparator className="my-0" />}
              <Item>
                <ItemMedia variant="icon">{setupIcon[row.icon]}</ItemMedia>
                <ItemContent>
                  <ItemTitle>{row.title}</ItemTitle>
                  <ItemDescription>{row.note}</ItemDescription>
                </ItemContent>
                <ItemActions>
                  <Button
                    elevation="raised"
                    size="sm"
                    type="button"
                    variant="outline"
                  >
                    {row.action}
                  </Button>
                </ItemActions>
              </Item>
            </div>
          ))}
        </ItemGroup>
      </Card>

      <div className={sectionLabel}>Important links</div>
      <Card className="gap-0 py-0">
        <ItemGroup>
          {index.links.map((row, i) => (
            <div key={row.title}>
              {i > 0 && <ItemSeparator className="my-0" />}
              <Item size="sm">
                <ItemContent>
                  <ItemTitle>{row.title}</ItemTitle>
                  <ItemDescription>{row.note}</ItemDescription>
                </ItemContent>
                <IconPlaceholder
                  lucide="ChevronRightIcon"
                  tabler="IconChevronRight"
                  hugeicons="ArrowRight01Icon"
                  phosphor="CaretRightIcon"
                  remixicon="RiArrowRightSLine"
                  className="size-4 text-muted-foreground"
                />
              </Item>
            </div>
          ))}
        </ItemGroup>
      </Card>

      <div className={sectionLabel}>Agents</div>
      <Card className="gap-0 py-0">
        <ItemGroup>
          {index.agents.map((row, i) => (
            <div key={row.id}>
              {i > 0 && <ItemSeparator className="my-0" />}
              <Item>
                <ItemMedia>
                  <AgentAvatar seed={row.id} color={row.color} size={40} />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle>{row.name}</ItemTitle>
                  <ItemDescription>{row.note}</ItemDescription>
                </ItemContent>
              </Item>
            </div>
          ))}
        </ItemGroup>
      </Card>
    </div>
  );
}

function Panel({ value }: { value: string }) {
  return (
    <Tabs
      defaultValue={value}
      className="h-[calc(100svh-3rem)] max-h-[900px] w-full max-w-[440px] gap-0"
    >
      <InsetPanel className="h-full">
        <InsetPanelHeader className="px-3.5">
          <TabsList variant="pills">
            {tabs.map((t) => (
              <TabsTrigger key={t} value={t.toLowerCase()}>
                {t}
              </TabsTrigger>
            ))}
          </TabsList>
        </InsetPanelHeader>
        <InsetPanelBody className="flex flex-col">
          <TabsContent value="agent" className="flex min-h-0 flex-1 flex-col">
            <AgentTab />
          </TabsContent>
          <TabsContent value="index" className="flex min-h-0 flex-1 flex-col">
            <IndexTab />
          </TabsContent>
          {["tasks", "library"].map((v) => (
            <TabsContent
              key={v}
              value={v}
              className="p-5 text-sm text-muted-foreground"
            >
              Nothing here yet.
            </TabsContent>
          ))}
        </InsetPanelBody>
      </InsetPanel>
    </Tabs>
  );
}

export default function AgentWorkspaceExample() {
  return (
    <ElevationProvider mode="layered">
      <div className="flex min-h-svh items-start justify-center gap-6 bg-background p-6 text-foreground">
        <Panel value="agent" />
        <div className="hidden w-full max-w-[440px] min-[960px]:block">
          <Panel value="index" />
        </div>
      </div>
    </ElevationProvider>
  );
}

// Sample data for the Agent workspace example (Keeper = the sample agent). Shared by all three ports.

export const tabs = ["Agent", "Tasks", "Index", "Library"] as const;

export const reasoning = {
  label: "Thought through the next step",
  text: "MAG4 has no mandate or launch plan yet. The index brief is updated, so the two missing inputs are the next blockers.",
};

export const reply = `**Index brief updated.** Model now: **open weights + hosted keeper**.

Two things still need you:

1. **Mandate** — one sentence on who MAG4 is for
2. **Launch** — how the first 100 holders find it`;

export const userMessage = "What should I do next?";

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

export const agentReply =
  "Based on what we set up for MAG4, start with one of these:";

export const suggestions = [
  { title: "Build the join page", note: "Engineering" },
  { title: "Set the drift limit", note: "Operations" },
  { title: "Invite first holders", note: "Growth" },
];

export const composerPlaceholder = "Ask Keeper anything about your index…";

export type SetupIcon = "domain" | "email" | "fees" | "rpc";

export const index = {
  name: "MAG4",
  stack: [
    {
      icon: "domain",
      title: "Domain",
      note: "Connect your index page domain",
      action: "Setup",
    },
    {
      icon: "email",
      title: "Email",
      note: "Holder notifications",
      action: "Setup",
    },
    {
      icon: "fees",
      title: "Fees",
      note: "Connect a fee wallet",
      action: "Setup",
    },
    { icon: "rpc", title: "RPC", note: "Network provider", action: "Helius" },
  ] as { icon: SetupIcon; title: string; note: string; action: string }[],
  links: [
    { title: "Index page", note: "Public page, source and deploy links." },
    { title: "Feed", note: "Posts, replies and Blinks." },
  ],
  agents: [
    {
      id: "keeper",
      name: "Keeper",
      note: "Rebalances within limits.",
      color: "chart-3",
    },
    {
      id: "writer",
      name: "Writer",
      note: "Drafts feed posts.",
      color: "chart-2",
    },
  ],
};

<script setup lang="ts">
import { ElevationProvider } from "@/components/ui/elevation"
import {
  CreditCardIcon,
  GlobeIcon,
  MailIcon,
  MoreHorizontalIcon,
  PencilIcon,
  ServerIcon,
  ChevronRightIcon,
} from "@lucide/vue";
import { AgentAvatar } from "@/components/ai/agent-avatar";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai/message";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { PromptInputAgent } from "@/components/ai/prompt-input-agent";
import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai/reasoning";
import { Suggestion } from "@/components/ai/suggestion";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { InsetPanel, InsetPanelBody, InsetPanelHeader } from "@/components/ui/inset-panel";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  agent,
  agentReply,
  composerPlaceholder,
  index,
  reasoning,
  reply,
  suggestions,
  tabs,
  userMessage,
} from "./data";

const setupIcon = { domain: GlobeIcon, email: MailIcon, fees: CreditCardIcon, rpc: ServerIcon };
const sectionLabel = "mt-[22px] mb-2.5 text-[15px] text-foreground-2";
const panels = ["agent", "index"];
</script>

<template>
  <ElevationProvider mode="layered">
  <div class="flex min-h-svh items-start justify-center gap-6 bg-background p-6 text-foreground">
    <div
      v-for="(value, n) in panels"
      :key="value"
      :class="
        n === 0
          ? 'w-full max-w-[440px]'
          : 'hidden w-full max-w-[440px] min-[960px]:block'
      "
    >
      <Tabs
        :default-value="value"
        class="h-[calc(100svh-3rem)] max-h-[900px] w-full max-w-[440px] gap-0"
      >
        <InsetPanel class="h-full">
          <InsetPanelHeader class="px-3.5">
            <TabsList variant="pills">
              <TabsTrigger v-for="t in tabs" :key="t" :value="t.toLowerCase()">{{ t }}</TabsTrigger>
            </TabsList>
          </InsetPanelHeader>
          <InsetPanelBody class="flex flex-col">
            <TabsContent value="agent" class="flex min-h-0 flex-1 flex-col">
              <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
                <div class="flex items-center justify-between gap-2">
                  <Reasoning :default-open="false" :duration="4" class="min-w-0 flex-1">
                    <ReasoningTrigger :get-thinking-message="() => reasoning.label" />
                    <ReasoningContent :content="reasoning.text" />
                  </Reasoning>
                  <Button aria-label="More" size="icon-xs" type="button" variant="ghost">
                    <MoreHorizontalIcon class="size-4" />
                  </Button>
                </div>
                <div class="mt-3 flex flex-col gap-[18px]">
                  <Message from="assistant">
                    <MessageContent>
                      <MessageResponse :content="reply" />
                    </MessageContent>
                  </Message>
                  <Message from="user">
                    <MessageContent>{{ userMessage }}</MessageContent>
                  </Message>
                  <Message from="assistant">
                    <div class="flex items-center gap-2 text-sm text-muted-foreground">
                      <AgentAvatar :seed="agent.id" :color="agent.color" :size="19" :tile="false" />
                      {{ agent.name }}
                    </div>
                    <MessageContent>{{ agentReply }}</MessageContent>
                  </Message>
                  <div class="flex flex-col gap-2">
                    <Suggestion
                      v-for="s in suggestions"
                      :key="s.title"
                      :suggestion="s.title"
                      variant="card"
                      class="w-full bg-card"
                    >
                      {{ s.note }}
                    </Suggestion>
                  </div>
                </div>
              </div>
              <div class="px-2.5 pb-2.5">
                <PromptInput class="[&_[data-slot=input-group]]:bg-muted">
                  <PromptInputHeader>
                    <PromptInputAgent :agent="agent" />
                  </PromptInputHeader>
                  <PromptInputBody>
                    <PromptInputTextarea :placeholder="composerPlaceholder" />
                  </PromptInputBody>
                  <PromptInputFooter>
                    <PromptInputTools />
                    <PromptInputSubmit class="size-10" size="icon-sm" variant="secondary" />
                  </PromptInputFooter>
                </PromptInput>
              </div>
            </TabsContent>

            <TabsContent value="index" class="flex min-h-0 flex-1 flex-col">
              <div class="min-h-0 flex-1 overflow-y-auto px-[18px] pt-[18px] pb-6">
                <div class="flex items-center justify-between">
                  <span class="text-xl font-medium">{{ index.name }}</span>
                  <Button
                    aria-label="Edit"
                    size="icon-sm"
                    type="button"
                    variant="outline"
                    class="rounded-full"
                  >
                    <PencilIcon class="size-4" />
                  </Button>
                </div>

                <div :class="sectionLabel">Stack</div>
                <Card class="gap-0 py-0">
                  <ItemGroup>
                    <div v-for="(row, i) in index.stack" :key="row.title">
                      <ItemSeparator v-if="i > 0" class="my-0" />
                      <Item>
                        <ItemMedia variant="icon"><component :is="setupIcon[row.icon]" /></ItemMedia>
                        <ItemContent>
                          <ItemTitle>{{ row.title }}</ItemTitle>
                          <ItemDescription>{{ row.note }}</ItemDescription>
                        </ItemContent>
                        <ItemActions>
                          <Button elevation="raised" size="sm" type="button" variant="outline">
                            {{ row.action }}
                          </Button>
                        </ItemActions>
                      </Item>
                    </div>
                  </ItemGroup>
                </Card>

                <div :class="sectionLabel">Important links</div>
                <Card class="gap-0 py-0">
                  <ItemGroup>
                    <div v-for="(row, i) in index.links" :key="row.title">
                      <ItemSeparator v-if="i > 0" class="my-0" />
                      <Item size="sm">
                        <ItemContent>
                          <ItemTitle>{{ row.title }}</ItemTitle>
                          <ItemDescription>{{ row.note }}</ItemDescription>
                        </ItemContent>
                        <ChevronRightIcon class="size-4 text-muted-foreground" />
                      </Item>
                    </div>
                  </ItemGroup>
                </Card>

                <div :class="sectionLabel">Agents</div>
                <Card class="gap-0 py-0">
                  <ItemGroup>
                    <div v-for="(row, i) in index.agents" :key="row.id">
                      <ItemSeparator v-if="i > 0" class="my-0" />
                      <Item>
                        <ItemMedia>
                          <AgentAvatar :seed="row.id" :color="row.color" :size="40" />
                        </ItemMedia>
                        <ItemContent>
                          <ItemTitle>{{ row.name }}</ItemTitle>
                          <ItemDescription>{{ row.note }}</ItemDescription>
                        </ItemContent>
                      </Item>
                    </div>
                  </ItemGroup>
                </Card>
              </div>
            </TabsContent>

            <TabsContent
              v-for="v in ['tasks', 'library']"
              :key="v"
              :value="v"
              class="p-5 text-sm text-muted-foreground"
            >
              Nothing here yet.
            </TabsContent>
          </InsetPanelBody>
        </InsetPanel>
      </Tabs>
    </div>
  </div>
  </ElevationProvider>
</template>

// Sample data for the Agent workspace example (Keeper = the sample agent). Shared by all three ports.

export const tabs = ["Agent", "Tasks", "Index", "Library"] as const;

export const reasoning = {
  label: "Thought through the next step",
  text: "MAG4 has no mandate or launch plan yet. The index brief is updated, so the two missing inputs are the next blockers.",
};

export const reply = `**Index brief updated.** Model now: **open weights + hosted keeper**.

Two things still need you:

1. **Mandate** — one sentence on who MAG4 is for
2. **Launch** — how the first 100 holders find it`;

export const userMessage = "What should I do next?";

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

export const agentReply =
  "Based on what we set up for MAG4, start with one of these:";

export const suggestions = [
  { title: "Build the join page", note: "Engineering" },
  { title: "Set the drift limit", note: "Operations" },
  { title: "Invite first holders", note: "Growth" },
];

export const composerPlaceholder = "Ask Keeper anything about your index…";

export type SetupIcon = "domain" | "email" | "fees" | "rpc";

export const index = {
  name: "MAG4",
  stack: [
    {
      icon: "domain",
      title: "Domain",
      note: "Connect your index page domain",
      action: "Setup",
    },
    {
      icon: "email",
      title: "Email",
      note: "Holder notifications",
      action: "Setup",
    },
    {
      icon: "fees",
      title: "Fees",
      note: "Connect a fee wallet",
      action: "Setup",
    },
    { icon: "rpc", title: "RPC", note: "Network provider", action: "Helius" },
  ] as { icon: SetupIcon; title: string; note: string; action: string }[],
  links: [
    { title: "Index page", note: "Public page, source and deploy links." },
    { title: "Feed", note: "Posts, replies and Blinks." },
  ],
  agents: [
    {
      id: "keeper",
      name: "Keeper",
      note: "Rebalances within limits.",
      color: "chart-3",
    },
    {
      id: "writer",
      name: "Writer",
      note: "Drafts feed posts.",
      color: "chart-2",
    },
  ],
};

<script lang="ts">
  import { ElevationProvider } from "$lib/components/ui/elevation";
  import { AgentAvatar } from "$lib/components/ai/agent-avatar";
  import {
    Message,
    MessageContent,
    MessageResponse,
  } from "$lib/components/ai/message";
  import {
    PromptInput,
    PromptInputBody,
    PromptInputFooter,
    PromptInputHeader,
    PromptInputSubmit,
    PromptInputTextarea,
    PromptInputTools,
  } from "$lib/components/ai/prompt-input";
  import { PromptInputAgent } from "$lib/components/ai/prompt-input-agent";
  import { Reasoning, ReasoningContent, ReasoningTrigger } from "$lib/components/ai/reasoning";
  import { Suggestion } from "$lib/components/ai/suggestion";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as InsetPanel from "$lib/components/ui/inset-panel";
  import * as Item from "$lib/components/ui/item";
  import * as Tabs from "$lib/components/ui/tabs";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import {
    agent,
    agentReply,
    composerPlaceholder,
    index,
    reasoning,
    reply,
    suggestions,
    tabs,
    userMessage,
  } from "./data";

  const sectionLabel = "mt-[22px] mb-2.5 text-[15px] text-foreground-2";
  const panels = ["agent", "index"];
</script>

<ElevationProvider mode="layered">
<div class="flex min-h-svh items-start justify-center gap-6 bg-background p-6 text-foreground">
  {#each panels as value, n (value)}
    <div class={n === 0 ? "w-full max-w-[440px]" : "hidden w-full max-w-[440px] min-[960px]:block"}>
      <Tabs.Root {value} class="h-[calc(100svh-3rem)] max-h-[900px] w-full max-w-[440px] gap-0">
        <InsetPanel.Root class="h-full">
          <InsetPanel.Header class="px-3.5">
            <Tabs.List variant="pills">
              {#each tabs as t (t)}
                <Tabs.Trigger value={t.toLowerCase()}>{t}</Tabs.Trigger>
              {/each}
            </Tabs.List>
          </InsetPanel.Header>
          <InsetPanel.Body class="flex flex-col">
            <Tabs.Content value="agent" class="flex min-h-0 flex-1 flex-col">
              <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
                <div class="flex items-center justify-between gap-2">
                  <Reasoning defaultOpen={false} duration={4} class="min-w-0 flex-1">
                    <ReasoningTrigger getThinkingMessage={() => reasoning.label} />
                    <ReasoningContent content={reasoning.text} />
                  </Reasoning>
                  <Button aria-label="More" size="icon-xs" type="button" variant="ghost">
                    <IconPlaceholder
                      lucide="MoreHorizontalIcon"
                      tabler="IconDots"
                      hugeicons="MoreHorizontalCircle01Icon"
                      phosphor="DotsThreeOutlineIcon"
                      remixicon="RiMoreLine"
                      class="size-4"
                    />
                  </Button>
                </div>
                <div class="mt-3 flex flex-col gap-[18px]">
                  <Message from="assistant">
                    <MessageContent>
                      <MessageResponse content={reply} />
                    </MessageContent>
                  </Message>
                  <Message from="user">
                    <MessageContent>{userMessage}</MessageContent>
                  </Message>
                  <Message from="assistant">
                    <div class="flex items-center gap-2 text-sm text-muted-foreground">
                      <AgentAvatar seed={agent.id} color={agent.color} size={19} tile={false} />
                      {agent.name}
                    </div>
                    <MessageContent>{agentReply}</MessageContent>
                  </Message>
                  <div class="flex flex-col gap-2">
                    {#each suggestions as s (s.title)}
                      <Suggestion suggestion={s.title} variant="card" class="w-full bg-card">
                        {s.note}
                      </Suggestion>
                    {/each}
                  </div>
                </div>
              </div>
              <div class="px-2.5 pb-2.5">
                <PromptInput onSubmit={() => {}} class="[&_[data-slot=input-group]]:bg-muted">
                  <PromptInputHeader>
                    <PromptInputAgent {agent} />
                  </PromptInputHeader>
                  <PromptInputBody>
                    <PromptInputTextarea placeholder={composerPlaceholder} />
                  </PromptInputBody>
                  <PromptInputFooter>
                    <PromptInputTools />
                    <PromptInputSubmit class="size-10" size="icon-sm" variant="secondary" />
                  </PromptInputFooter>
                </PromptInput>
              </div>
            </Tabs.Content>

            <Tabs.Content value="index" class="flex min-h-0 flex-1 flex-col">
              <div class="min-h-0 flex-1 overflow-y-auto px-[18px] pt-[18px] pb-6">
                <div class="flex items-center justify-between">
                  <span class="text-xl font-medium">{index.name}</span>
                  <Button
                    aria-label="Edit"
                    size="icon-sm"
                    type="button"
                    variant="outline"
                    class="rounded-full"
                  >
                    <IconPlaceholder
                      lucide="PencilIcon"
                      tabler="IconPencil"
                      hugeicons="PencilEdit01Icon"
                      phosphor="PencilSimpleIcon"
                      remixicon="RiPencilLine"
                      class="size-4"
                    />
                  </Button>
                </div>

                <div class={sectionLabel}>Stack</div>
                <Card class="gap-0 py-0">
                  <Item.Group>
                    {#each index.stack as row, i (row.title)}
                      <div>
                        {#if i > 0}<Item.Separator class="my-0" />{/if}
                        <Item.Root>
                          <Item.Media variant="icon">
                            {#if row.icon === "domain"}
                              <IconPlaceholder
                                lucide="GlobeIcon"
                                tabler="IconWorld"
                                hugeicons="Globe02Icon"
                                phosphor="GlobeIcon"
                                remixicon="RiGlobalLine"
                              />
                            {:else if row.icon === "email"}
                              <IconPlaceholder
                                lucide="MailIcon"
                                tabler="IconMail"
                                hugeicons="Mail01Icon"
                                phosphor="EnvelopeSimpleIcon"
                                remixicon="RiMailLine"
                              />
                            {:else if row.icon === "fees"}
                              <IconPlaceholder
                                lucide="CreditCardIcon"
                                tabler="IconCreditCard"
                                hugeicons="CreditCardIcon"
                                phosphor="CreditCardIcon"
                                remixicon="RiBankCardLine"
                              />
                            {:else}
                              <IconPlaceholder
                                lucide="ServerIcon"
                                tabler="IconServer"
                                hugeicons="ServerStackIcon"
                                phosphor="HardDrivesIcon"
                                remixicon="RiHardDriveLine"
                              />
                            {/if}
                          </Item.Media>
                          <Item.Content>
                            <Item.Title>{row.title}</Item.Title>
                            <Item.Description>{row.note}</Item.Description>
                          </Item.Content>
                          <Item.Actions>
                            <Button elevation="raised" size="sm" type="button" variant="outline">{row.action}</Button>
                          </Item.Actions>
                        </Item.Root>
                      </div>
                    {/each}
                  </Item.Group>
                </Card>

                <div class={sectionLabel}>Important links</div>
                <Card class="gap-0 py-0">
                  <Item.Group>
                    {#each index.links as row, i (row.title)}
                      <div>
                        {#if i > 0}<Item.Separator class="my-0" />{/if}
                        <Item.Root size="sm">
                          <Item.Content>
                            <Item.Title>{row.title}</Item.Title>
                            <Item.Description>{row.note}</Item.Description>
                          </Item.Content>
                          <IconPlaceholder
                            lucide="ChevronRightIcon"
                            tabler="IconChevronRight"
                            hugeicons="ArrowRight01Icon"
                            phosphor="CaretRightIcon"
                            remixicon="RiArrowRightSLine"
                            class="size-4 text-muted-foreground"
                          />
                        </Item.Root>
                      </div>
                    {/each}
                  </Item.Group>
                </Card>

                <div class={sectionLabel}>Agents</div>
                <Card class="gap-0 py-0">
                  <Item.Group>
                    {#each index.agents as row, i (row.id)}
                      <div>
                        {#if i > 0}<Item.Separator class="my-0" />{/if}
                        <Item.Root>
                          <Item.Media>
                            <AgentAvatar seed={row.id} color={row.color} size={40} />
                          </Item.Media>
                          <Item.Content>
                            <Item.Title>{row.name}</Item.Title>
                            <Item.Description>{row.note}</Item.Description>
                          </Item.Content>
                        </Item.Root>
                      </div>
                    {/each}
                  </Item.Group>
                </Card>
              </div>
            </Tabs.Content>

            {#each ["tasks", "library"] as v (v)}
              <Tabs.Content value={v} class="p-5 text-sm text-muted-foreground">
                Nothing here yet.
              </Tabs.Content>
            {/each}
          </InsetPanel.Body>
        </InsetPanel.Root>
      </Tabs.Root>
    </div>
  {/each}
</div>
</ElevationProvider>

// Sample data for the Agent workspace example (Keeper = the sample agent). Shared by all three ports.

export const tabs = ["Agent", "Tasks", "Index", "Library"] as const;

export const reasoning = {
  label: "Thought through the next step",
  text: "MAG4 has no mandate or launch plan yet. The index brief is updated, so the two missing inputs are the next blockers.",
};

export const reply = `**Index brief updated.** Model now: **open weights + hosted keeper**.

Two things still need you:

1. **Mandate** — one sentence on who MAG4 is for
2. **Launch** — how the first 100 holders find it`;

export const userMessage = "What should I do next?";

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

export const agentReply =
  "Based on what we set up for MAG4, start with one of these:";

export const suggestions = [
  { title: "Build the join page", note: "Engineering" },
  { title: "Set the drift limit", note: "Operations" },
  { title: "Invite first holders", note: "Growth" },
];

export const composerPlaceholder = "Ask Keeper anything about your index…";

export type SetupIcon = "domain" | "email" | "fees" | "rpc";

export const index = {
  name: "MAG4",
  stack: [
    {
      icon: "domain",
      title: "Domain",
      note: "Connect your index page domain",
      action: "Setup",
    },
    {
      icon: "email",
      title: "Email",
      note: "Holder notifications",
      action: "Setup",
    },
    {
      icon: "fees",
      title: "Fees",
      note: "Connect a fee wallet",
      action: "Setup",
    },
    { icon: "rpc", title: "RPC", note: "Network provider", action: "Helius" },
  ] as { icon: SetupIcon; title: string; note: string; action: string }[],
  links: [
    { title: "Index page", note: "Public page, source and deploy links." },
    { title: "Feed", note: "Posts, replies and Blinks." },
  ],
  agents: [
    {
      id: "keeper",
      name: "Keeper",
      note: "Rebalances within limits.",
      color: "chart-3",
    },
    {
      id: "writer",
      name: "Writer",
      note: "Drafts feed posts.",
      color: "chart-2",
    },
  ],
};