Add MCP Server card and reorganize the Agents page

src/lib/components/agents/copy-prompt-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Button from '$lib/holocene/button.svelte';
+  import { IconCheckmark, IconCopy } from '$lib/io/icon';
+  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
+
+  let {
+    label,
+    prompt,
+    title,
+  }: { label: string; prompt: string; title: string } = $props();
+
+  const { copy, copied } = copyToClipboard();
+</script>
+
+<span class="inline-flex min-w-0 max-w-full rounded bg-surface-primary">
+  <Button
+    class="h-auto min-h-9 min-w-0 max-w-full whitespace-normal text-left"
+    variant="secondary"
+    size="sm"
+    aria-label={$copied ? label + ', copied' : undefined}
+    title={$copied ? 'Copied' : title}
+    onclick={(event) => copy(event, prompt)}
+  >
+    {label}
+    {#if $copied}
+      <IconCheckmark class="size-3" />
+    {:else}
+      <IconCopy class="size-3" />
+    {/if}
+  </Button>
+</span>

src/lib/components/agents/feature-card-background.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  type ReleaseStage = 'experimental' | 'pre-release';
+
+  let { stage }: { stage?: ReleaseStage } = $props();
+
+  const glowColor: Record<ReleaseStage, string> = {
+    experimental: 'text-amber-9',
+    'pre-release': 'text-blue-9',
+  };
+</script>
+
+{#if stage}
+  <div
+    class={[
+      'pointer-events-none absolute inset-0 -z-10 rounded-[inherit] opacity-[0.06] [background-image:radial-gradient(ellipse_at_top_left,currentColor,transparent_45%)]',
+      glowColor[stage],
+    ]}
+    aria-hidden="true"
+  ></div>
+{/if}
+<div
+  class="pointer-events-none absolute inset-0 -z-10 text-secondary opacity-40 [background-image:radial-gradient(circle,currentColor_0.5px,transparent_1px)] [background-repeat:round] [background-size:16px_16px] [mask-image:linear-gradient(to_bottom,transparent_40%,black)]"
+  aria-hidden="true"
+></div>

src/lib/components/agents/mcp-example-question.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Button } from '$lib/io/button';
+  import { IconCheckmark, IconCopy } from '$lib/io/icon';
+  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
+
+  let { question }: { question: string } = $props();
+
+  const { copy, copied } = copyToClipboard();
+</script>
+
+<li class="rounded-lg rounded-bl-none bg-surface-tertiary">
+  <Button
+    class="w-full justify-between gap-3 whitespace-normal rounded-lg rounded-bl-none px-[11px] py-[7px] text-left text-sm leading-5"
+    colorScheme="ghost"
+    size="sm"
+    aria-label={$copied ? question + ', copied' : question + ', copy question'}
+    onclick={(event) => copy(event, question)}
+  >
+    <span class="min-w-0">{question}</span>
+    {#if $copied}
+      <IconCheckmark class="size-3 shrink-0" />
+    {:else}
+      <IconCopy class="size-3 shrink-0 text-secondary" />
+    {/if}
+  </Button>
+</li>

src/lib/components/agents/mcp-example-questions.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { IconArrowUp } from '$lib/io/icon';
+
+  import McpExampleQuestion from './mcp-example-question.svelte';
+
+  let { questions }: { questions: string[] } = $props();
+
+  const label = 'After you connect it, ask your agent';
+</script>
+
+<div class="flex min-w-0 flex-col gap-2">
+  <h3 class="sr-only">{label}</h3>
+  <div
+    class="flex items-center justify-between gap-3 rounded-lg border bg-surface-primary px-[11px] py-[7px] text-sm font-medium leading-5"
+    aria-hidden="true"
+  >
+    <span class="min-w-0"
+      ><span class="text-secondary">{label}…</span><span
+        class="ml-0.5 border-l border-current"
+      ></span></span
+    >
+    <IconArrowUp class="size-3 shrink-0 text-secondary" />
+  </div>
+  <ul class="space-y-2">
+    {#each questions as question (question)}
+      <McpExampleQuestion {question} />
+    {/each}
+  </ul>
+</div>

src/lib/components/agents/skills-terminal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+  export type AgentSkill = {
+    slug: string;
+    repository: string;
+    preview: boolean;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    skills,
+    class: className = '',
+  }: { skills: AgentSkill[]; class?: string } = $props();
+</script>
+
+<figure
+  class={['body-small-mono space-y-3 p-4 leading-5 text-primary', className]}
+>
+  {#each skills as skill (skill.slug)}
+    <div>
+      <p class="break-words pl-4 -indent-4">
+        <span class="text-secondary" aria-hidden="true">$</span>
+        <code
+          >npx skills add <span class="inline-block max-w-full indent-0"
+            >{skill.repository}</span
+          ></code
+        >
+      </p>
+      <p class="pl-4">
+        <span class="text-success" aria-hidden="true">✓</span>
+        <span class="sr-only">Installed</span>
+        {skill.slug}
+        {#if skill.preview}
+          <span class="text-secondary">· Public Preview</span>
+        {/if}
+      </p>
+    </div>
+  {/each}
+  <p aria-hidden="true">
+    <span class="text-secondary">$</span><span
+      class="ml-2 border-l border-current"
+    ></span>
+  </p>
+  <figcaption class="sr-only">
+    Example: installing the skills with the skills CLI
+  </figcaption>
+</figure>