Agent Canvas

BackAgent CanvasAI

100%

import { Button } from "@/components/ui/button";
import { ElevationProvider } from "@/components/ui/elevation";
import { useState } from "react";
import {
  type ChatMessage,
  tasks as seed,
  type TabId,
  type TaskRow,
} from "./data";
import { Canvas } from "./react/canvas";
import { Icon } from "./react/icons";
import { Panel } from "./react/panel";

export default function AgentCanvasExample() {
  const [tab, setTab] = useState<TabId>("atlas");
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [tasks, setTasks] = useState<TaskRow[]>(seed);
  const [open, setOpen] = useState(false);

  return (
    <ElevationProvider mode="layered">
      <div className="relative h-svh min-h-[560px] overflow-hidden bg-background text-foreground">
        <Canvas
          onNewTask={(name) => {
            setTasks((t) => [
              {
                id: `t${t.length + 1}-${name}`,
                name,
                agent: "atlas",
                color: "var(--warning)",
                age: "now",
                status: "running",
              },
              ...t,
            ]);
            setTab("tasks");
            setOpen(true);
          }}
          onOpenPanel={() => setOpen(true)}
        />
        <aside
          className={`absolute top-2 right-2 bottom-2 z-20 w-[460px] max-w-[calc(100%-1rem)] lg:block ${open ? "block" : "hidden"}`}
        >
          <Panel
            tab={tab}
            setTab={setTab}
            messages={messages}
            setMessages={setMessages}
            tasks={tasks}
          />
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            aria-label="Close panel"
            onClick={() => setOpen(false)}
            className="absolute top-3 right-3 z-30 lg:hidden"
          >
            <Icon name="close" />
          </Button>
        </aside>
      </div>
    </ElevationProvider>
  );
}

import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { TooltipProvider } from "@/components/ui/tooltip";
import { type PointerEvent, useEffect, useRef, useState } from "react";
import { depts, plant, plantHead, RING, TILE } from "../data";
import { Icon } from "./icons";
import {
  NewTaskDialog,
  NotificationsPopover,
  OrgMenu,
  RoadmapPopover,
  SearchPalette,
  ShortcutsDialog,
  ThemeTip,
} from "./overlays";
import { Pixels } from "./pixel";

const grid =
  "[background-image:linear-gradient(to_right,color-mix(in_srgb,var(--foreground)_5%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--foreground)_5%,transparent)_1px,transparent_1px)] [background-size:48px_48px]";

function Thumb({ x, y }: { x: number; y: number }) {
  return (
    <span
      className="pointer-events-none absolute overflow-hidden rounded-[3px] border border-border bg-muted"
      style={{ left: x, top: y, width: TILE.w, height: TILE.h }}
    >
      <i className="absolute top-2 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full bg-border" />
      <i className="absolute top-3.5 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full bg-border" />
    </span>
  );
}

export function Canvas({
  onNewTask,
  onOpenPanel,
}: {
  onNewTask: (name: string) => void;
  onOpenPanel: () => void;
}) {
  const [zoom, setZoom] = useState(100);
  const [pan, setPan] = useState({ x: 0, y: 0 });
  const [dragging, setDragging] = useState(false);
  const drag = useRef<{ id: number; x: number; y: number } | null>(null);
  const [hub, setHub] = useState(true);
  const [active, setActive] = useState<string | null>(null);
  const [palette, setPalette] = useState(false);
  const [shortcuts, setShortcuts] = useState(false);
  const [taskDialog, setTaskDialog] = useState(false);
  const pick = (id: string) => setActive((a) => (a === id ? null : id));
  const step = (d: number) =>
    setZoom((z) => Math.min(160, Math.max(60, z + d)));
  const reset = () => {
    setZoom(100);
    setPan({ x: 0, y: 0 });
  };

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setPalette((p) => !p);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const down = (e: PointerEvent<HTMLDivElement>) => {
    const t = e.target as HTMLElement;
    // portalled overlays bubble through the React tree: only pan from the canvas itself
    if (!e.currentTarget.contains(t) || t.closest("button,[data-nopan]"))
      return;
    drag.current = { id: e.pointerId, x: e.clientX, y: e.clientY };
    e.currentTarget.setPointerCapture(e.pointerId);
    setDragging(true);
  };
  const move = (e: PointerEvent<HTMLDivElement>) => {
    const d = drag.current;
    if (!d || d.id !== e.pointerId) return;
    const dx = e.clientX - d.x;
    const dy = e.clientY - d.y;
    d.x = e.clientX;
    d.y = e.clientY;
    setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
  };
  const up = (e: PointerEvent<HTMLDivElement>) => {
    if (drag.current?.id !== e.pointerId) return;
    drag.current = null;
    setDragging(false);
  };

  return (
    <TooltipProvider>
      <div
        className={`absolute inset-0 touch-none overflow-hidden bg-card select-none ${grid} ${dragging ? "cursor-grabbing" : "cursor-grab"}`}
        style={{ backgroundPosition: `${pan.x}px ${pan.y}px` }}
        onPointerDown={down}
        onPointerMove={move}
        onPointerUp={up}
        onPointerCancel={up}
      >
        <div
          className="absolute top-[46.5%] left-1/2 size-0 origin-top-left lg:left-[calc((100%-438px)*0.58)]"
          style={{
            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100})`,
          }}
        >
          <svg
            className="pointer-events-none absolute overflow-visible"
            width="1"
            height="1"
            aria-hidden="true"
          >
            <circle
              r={RING}
              fill="none"
              stroke="var(--foreground)"
              strokeOpacity="0.12"
              strokeWidth="1.5"
            />
            {depts.map((d) => (
              <line
                key={`s-${d.id}`}
                x1="0"
                y1="0"
                x2={d.node[0]}
                y2={d.node[1]}
                stroke="var(--foreground)"
                strokeOpacity="0.2"
                strokeDasharray="4 4"
              />
            ))}
            {depts.map((d) => (
              <g key={`c-${d.id}`}>
                <path
                  d={d.path}
                  fill="none"
                  stroke="var(--foreground)"
                  strokeOpacity={active === d.id ? 0.9 : 0.35}
                  strokeWidth={active === d.id ? 1.5 : 1}
                  strokeDasharray="4 4"
                />
                <circle
                  cx={d.end[0]}
                  cy={d.end[1]}
                  r="3"
                  fill="var(--border)"
                />
              </g>
            ))}
          </svg>

          {depts.map((d) => (
            <div key={d.id}>
              {d.thumbs.map((t) => (
                <Thumb key={`${t.x}-${t.y}`} x={t.x} y={t.y} />
              ))}
              <Button
                type="button"
                variant={active === d.id ? "secondary" : "outline"}
                size="sm"
                onClick={() => pick(d.id)}
                aria-pressed={active === d.id}
                className="absolute"
                style={{
                  left: d.plate.x,
                  top: d.plate.y,
                  width: d.plate.w,
                  height: d.grid ? 32 : d.plate.h,
                }}
              >
                {d.label}
              </Button>
              {d.grid && (
                <span
                  className="pointer-events-none absolute grid grid-cols-3 gap-px overflow-hidden p-0.5"
                  style={{
                    left: d.plate.x,
                    top: d.plate.y + 32,
                    width: d.plate.w,
                    height: d.plate.h - 32,
                  }}
                >
                  {[0, 1, 2, 3, 4, 5].map((n) => (
                    <span
                      key={n}
                      className="relative overflow-hidden rounded-[3px] border border-border bg-muted"
                    >
                      <i className="absolute top-2 left-1/2 h-0.5 w-5 -translate-x-1/2 rounded-full bg-border" />
                    </span>
                  ))}
                </span>
              )}
            </div>
          ))}

          <Pixels
            w={plant.w}
            h={plant.h}
            rects={plant.rects}
            className="pointer-events-none absolute top-[-78px] left-[-18px] w-9 opacity-80"
          />
          <button
            type="button"
            aria-label="Atlas"
            aria-pressed={hub}
            onClick={() => setHub((h) => !h)}
            className={`absolute top-[-29px] left-[-49px] h-[58px] w-[98px] rounded-xl p-0.5 outline-none ${hub ? "ring-2 ring-ring" : ""}`}
          >
            <Card
              elevation={hub ? "floating" : "raised"}
              className="size-full items-center justify-center gap-0 py-0"
            >
              <span className="font-serif text-[19px] leading-none tracking-tight">
                Atlas
              </span>
            </Card>
          </button>

          {depts.map((d) => (
            <Button
              key={`n-${d.id}`}
              type="button"
              variant={active === d.id ? "secondary" : "outline"}
              size="icon-sm"
              elevation="raised"
              aria-label={d.label}
              onClick={() => pick(d.id)}
              className="absolute z-10 -translate-x-1/2 -translate-y-1/2"
              style={{ left: d.node[0], top: d.node[1] }}
            >
              <AgentAvatar seed={d.id} color={d.color} size={13} tile={false} />
            </Button>
          ))}
        </div>

        <div className="absolute top-4 left-4 flex items-center gap-2">
          <OrgMenu onShortcuts={() => setShortcuts(true)} />
          <Button variant="secondary" size="sm" elevation="raised">
            <Pixels
              w={plantHead.w}
              h={plantHead.h}
              rects={plantHead.rects}
              className="h-3 w-3.5"
            />
            Upgrade
          </Button>
        </div>

        <div className="absolute top-4 right-3 flex items-center gap-1.5 lg:right-[485px]">
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Search"
            onClick={() => setPalette(true)}
          >
            <Icon name="search" />
          </Button>
          <RoadmapPopover />
          <ThemeTip />
          <Button
            variant="outline"
            size="sm"
            onClick={() => setTaskDialog(true)}
          >
            <Icon name="plus" />
            New task
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            className="lg:hidden"
            aria-label="Open panel"
            onClick={onOpenPanel}
          >
            <Icon name="message" />
          </Button>
        </div>

        <NotificationsPopover />

        <Card
          data-nopan
          elevation="raised"
          className="absolute right-3 bottom-4 flex-row items-center gap-0.5 p-1 py-1 lg:right-[485px]"
        >
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Reset view"
            onClick={reset}
          >
            <Icon name="home" />
          </Button>
          <span className="w-12 text-center font-mono text-xs">{zoom}%</span>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Zoom in"
            onClick={() => step(10)}
            disabled={zoom >= 160}
          >
            <Icon name="plus" />
          </Button>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Zoom out"
            onClick={() => step(-10)}
            disabled={zoom <= 60}
          >
            <Icon name="minus" />
          </Button>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Shortcuts"
            onClick={() => setShortcuts(true)}
          >
            <Icon name="keyboard" />
          </Button>
        </Card>

        <SearchPalette
          open={palette}
          onOpenChange={setPalette}
          onNewTask={() => setTaskDialog(true)}
          onRoadmap={() => {}}
          onDepartment={(id) => setActive(id)}
        />
        <ShortcutsDialog open={shortcuts} onOpenChange={setShortcuts} />
        <NewTaskDialog
          open={taskDialog}
          onOpenChange={setTaskDialog}
          onCreate={onNewTask}
        />
      </div>
    </TooltipProvider>
  );
}

import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item";
import { company, org } from "../data";
import { Icon, type IconName } from "./icons";

const icons: Record<string, IconName> = {
  domain: "globe",
  email: "mail",
  revenue: "card",
  hosting: "server",
};
const label = "mt-6 mb-2 text-[13px] text-muted-foreground";

export function CompanyTab() {
  return (
    <div className="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-medium">{org.name}</h2>
        <Button type="button" variant="ghost" size="icon-xs" aria-label="Edit">
          <Icon name="pencil" className="size-4" />
        </Button>
      </div>
      <div className={label}>Stack</div>
      <Card className="gap-0 py-0">
        <ItemGroup>
          {company.stack.map((row, i) => (
            <div key={row.title}>
              {i > 0 && <ItemSeparator className="my-0" />}
              <Item>
                <ItemMedia variant="icon">
                  <Icon name={icons[row.icon] ?? "globe"} />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle>{row.title}</ItemTitle>
                  <ItemDescription>{row.note}</ItemDescription>
                </ItemContent>
                <Icon
                  name="chevronRight"
                  className="size-4 text-muted-foreground"
                />
              </Item>
            </div>
          ))}
        </ItemGroup>
      </Card>
      <div className={label}>Important links</div>
      <Card className="gap-0 py-0">
        <ItemGroup>
          {company.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>
                <Icon
                  name="chevronRight"
                  className="size-4 text-muted-foreground"
                />
              </Item>
            </div>
          ))}
        </ItemGroup>
      </Card>
      <div className={label}>Agents</div>
      <Card className="gap-0 py-0">
        <ItemGroup>
          {company.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>
  );
}

import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  atlasAgent,
  composerMenu,
  composerPlaceholder,
  plantHead,
} from "../data";
import { Icon } from "./icons";
import { Pixels } from "./pixel";

export function Composer({
  onSend,
  onClear,
}: {
  onSend: (text: string) => void;
  onClear: () => void;
}) {
  return (
    <div className="px-2 pb-2">
      <PromptInput
        onSubmit={(m) => {
          if (m.text.trim()) onSend(m.text.trim());
        }}
      >
        <PromptInputHeader>
          <Tooltip>
            <TooltipTrigger
              render={<Button type="button" variant="outline" size="sm" />}
            >
              <Pixels
                w={plantHead.w}
                h={plantHead.h}
                rects={plantHead.rects}
                className="h-3 w-3.5"
              />
              {atlasAgent.name}
            </TooltipTrigger>
            <TooltipContent>Atlas agent</TooltipContent>
          </Tooltip>
        </PromptInputHeader>
        <PromptInputBody>
          <PromptInputTextarea placeholder={composerPlaceholder} />
        </PromptInputBody>
        <PromptInputFooter>
          <PromptInputTools>
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon-xs"
                    aria-label="Add"
                  />
                }
              >
                <Icon name="plus" />
              </DropdownMenuTrigger>
              <DropdownMenuContent
                side="top"
                align="start"
                elevation="floating"
              >
                {composerMenu.map((m) => (
                  <DropdownMenuItem
                    key={m.id}
                    onClick={m.id === "clear" ? onClear : undefined}
                  >
                    <Icon name={m.icon} />
                    {m.label}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </PromptInputTools>
          <PromptInputSubmit
            size="icon-sm"
            variant="secondary"
            elevation="raised"
          >
            <Icon name="arrowUp" />
          </PromptInputSubmit>
        </PromptInputFooter>
      </PromptInput>
    </div>
  );
}

import { AgentAvatar } from "@/components/ai/agent-avatar";
import {
  Message,
  MessageContent,
  MessageHeader,
} from "@/components/ai/message";
import { Suggestion, Suggestions } from "@/components/ai/suggestion";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import {
  type ChatMessage,
  org,
  plantHead,
  suggested,
  type TaskRow,
  thread,
} from "../data";
import { Icon } from "./icons";
import { Pixels, Status } from "./pixel";

export function HomeTab({
  view,
  setView,
  messages,
  tasks,
  onSend,
  onReset,
}: {
  view: "chat" | "home" | "thread";
  setView: (v: "chat" | "home" | "thread") => void;
  messages: ChatMessage[];
  tasks: TaskRow[];
  onSend: (text: string) => void;
  onReset: () => void;
}) {
  if (view === "home")
    return (
      <div className="flex min-h-0 flex-1 flex-col px-5 pb-3">
        <div className="mt-3 [mask-image:linear-gradient(to_bottom,black,transparent)]">
          <Item variant="outline" size="sm">
            <ItemMedia variant="icon">
              <Icon name="map" />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Open the company roadmap</ItemTitle>
              <ItemDescription>General</ItemDescription>
            </ItemContent>
          </Item>
        </div>
        <div className="flex justify-center py-3">
          <Button
            type="button"
            variant="ghost"
            size="xs"
            onClick={() => setView("chat")}
          >
            <Icon name="arrowUp" className="size-3.5" />
            Back to chat
          </Button>
        </div>
        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
          <h2 className="text-2xl font-normal">Good evening, {org.user}</h2>
          <Button type="button" variant="ghost" size="xs">
            <Icon name="map" className="size-3.5" />
            Roadmap
          </Button>
        </div>
        <div className="mb-2 text-xs text-muted-foreground">Tasks</div>
        <div className="flex flex-col">
          {tasks.map((t) => (
            <div
              key={t.id}
              className="flex items-center gap-3 border-b border-border py-3 last:border-b-0"
            >
              <AgentAvatar
                seed={t.agent}
                color={t.color}
                size={20}
                tile={false}
              />
              <span className="text-[15px]">{t.name}</span>
              <span className="ml-auto font-mono text-xs text-muted-foreground">
                {t.age}
              </span>
              <Status status={t.status} />
            </div>
          ))}
        </div>
        <div className="mt-3 flex items-center gap-2">
          <span className="text-xs text-muted-foreground">Suggested</span>
          <Suggestions className="min-w-0">
            {suggested.map((s) => (
              <Suggestion key={s} suggestion={s} onClick={onSend} />
            ))}
          </Suggestions>
        </div>
      </div>
    );

  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <div className="flex justify-end px-3 pt-3">
        <Button
          type="button"
          variant="ghost"
          size="icon-xs"
          aria-label="Toggle thread"
          onClick={() => setView(view === "thread" ? "chat" : "thread")}
        >
          <Icon name="more" />
        </Button>
      </div>
      {view === "thread" ? (
        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pb-3">
          <Message from="assistant">
            <MessageContent>
              <p>{thread.intro[0]}</p>
              <ol className="my-2 list-decimal pl-5">
                <li>{thread.intro[1]}</li>
                <li>{thread.intro[2]}</li>
              </ol>
              <p>{thread.intro[3]}</p>
            </MessageContent>
          </Message>
          <Message from="user">
            <MessageContent>{thread.question}</MessageContent>
          </Message>
          <Message from="assistant">
            <MessageHeader>
              <Pixels
                w={plantHead.w}
                h={plantHead.h}
                rects={plantHead.rects}
                className="h-3 w-3.5"
              />
              Atlas
            </MessageHeader>
            <MessageContent>{thread.answer}</MessageContent>
          </Message>
          <div className="flex flex-col gap-2">
            {thread.actions.map((a) => (
              <Item key={a.id} variant="outline" size="sm">
                <ItemMedia>
                  <AgentAvatar
                    seed={a.agent}
                    color={a.color}
                    size={20}
                    tile={false}
                  />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle>{a.title}</ItemTitle>
                  <ItemDescription>{a.dept}</ItemDescription>
                </ItemContent>
              </Item>
            ))}
          </div>
          <div className="flex justify-center">
            <Button
              type="button"
              variant="outline"
              size="icon-xs"
              aria-label="Scroll to latest"
            >
              <Icon name="chevronDown" />
            </Button>
          </div>
        </div>
      ) : messages.length === 0 ? (
        <div className="flex flex-1 flex-col items-center justify-center gap-2 px-10 text-center">
          <svg
            viewBox="0 0 24 24"
            className="mb-2 size-7 text-muted-foreground"
            fill="currentColor"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="1.4" />
            <circle cx="12" cy="6" r="1" />
            <circle cx="12" cy="18" r="1" />
            <circle cx="6" cy="12" r="1" />
            <circle cx="18" cy="12" r="1" />
          </svg>
          <h2 className="text-[15px] font-semibold">What should we work on?</h2>
          <p className="text-sm text-muted-foreground">
            Bring me an idea, a problem, or a goal. I'll help turn it into the
            next useful step.
          </p>
        </div>
      ) : (
        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pb-3">
          {messages.map((m) => (
            <Message key={m.id} from={m.from}>
              <MessageContent>{m.text}</MessageContent>
            </Message>
          ))}
          <div>
            <Button type="button" variant="ghost" size="xs" onClick={onReset}>
              <Icon name="home" className="size-3.5" />
              Back to home
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

import { IconPlaceholder } from "@/edmi/icon-placeholder";

export type IconName =
  | "search"
  | "map"
  | "sun"
  | "plus"
  | "chevronDown"
  | "chevronRight"
  | "home"
  | "minus"
  | "keyboard"
  | "bell"
  | "more"
  | "arrowUp"
  | "upload"
  | "grid"
  | "list"
  | "info"
  | "close"
  | "pencil"
  | "globe"
  | "mail"
  | "card"
  | "server"
  | "message"
  | "settings"
  | "lightbulb"
  | "plug"
  | "gift"
  | "database"
  | "coins"
  | "book"
  | "users"
  | "lifebuoy"
  | "archive"
  | "paperclip"
  | "listChecks"
  | "trash"
  | "check";

const extra: Partial<
  Record<
    IconName,
    {
      lucide: string;
      tabler: string;
      hugeicons: string;
      phosphor: string;
      remixicon: string;
    }
  >
> = {
  settings: {
    lucide: "SettingsIcon",
    tabler: "IconSettings",
    hugeicons: "Settings01Icon",
    phosphor: "GearIcon",
    remixicon: "RiSettingsLine",
  },
  lightbulb: {
    lucide: "LightbulbIcon",
    tabler: "IconBulb",
    hugeicons: "BulbIcon",
    phosphor: "LightbulbIcon",
    remixicon: "RiLightbulbLine",
  },
  plug: {
    lucide: "PlugIcon",
    tabler: "IconPlug",
    hugeicons: "PlugSocketIcon",
    phosphor: "PlugsConnectedIcon",
    remixicon: "RiPlugLine",
  },
  gift: {
    lucide: "GiftIcon",
    tabler: "IconGift",
    hugeicons: "GiftIcon",
    phosphor: "GiftIcon",
    remixicon: "RiGiftLine",
  },
  database: {
    lucide: "DatabaseIcon",
    tabler: "IconDatabase",
    hugeicons: "Database01Icon",
    phosphor: "DatabaseIcon",
    remixicon: "RiDatabase2Line",
  },
  coins: {
    lucide: "CoinsIcon",
    tabler: "IconCoins",
    hugeicons: "Coins01Icon",
    phosphor: "CoinsIcon",
    remixicon: "RiCoinsLine",
  },
  book: {
    lucide: "BookOpenIcon",
    tabler: "IconBook",
    hugeicons: "BookOpen02Icon",
    phosphor: "BookOpenIcon",
    remixicon: "RiBookOpenLine",
  },
  users: {
    lucide: "UsersIcon",
    tabler: "IconUsers",
    hugeicons: "UserGroupIcon",
    phosphor: "UsersThreeIcon",
    remixicon: "RiGroupLine",
  },
  lifebuoy: {
    lucide: "LifeBuoyIcon",
    tabler: "IconLifebuoy",
    hugeicons: "ChartRingIcon",
    phosphor: "LifebuoyIcon",
    remixicon: "RiLifebuoyLine",
  },
  archive: {
    lucide: "ArchiveIcon",
    tabler: "IconArchive",
    hugeicons: "Archive02Icon",
    phosphor: "ArchiveIcon",
    remixicon: "RiArchiveLine",
  },
  paperclip: {
    lucide: "PaperclipIcon",
    tabler: "IconPaperclip",
    hugeicons: "AttachmentIcon",
    phosphor: "PaperclipIcon",
    remixicon: "RiAttachmentLine",
  },
  listChecks: {
    lucide: "ListChecksIcon",
    tabler: "IconListCheck",
    hugeicons: "TaskDone01Icon",
    phosphor: "ListChecksIcon",
    remixicon: "RiListCheck2",
  },
  trash: {
    lucide: "Trash2Icon",
    tabler: "IconTrash",
    hugeicons: "Delete02Icon",
    phosphor: "TrashIcon",
    remixicon: "RiDeleteBinLine",
  },
  check: {
    lucide: "CheckIcon",
    tabler: "IconCheck",
    hugeicons: "Tick02Icon",
    phosphor: "CheckIcon",
    remixicon: "RiCheckLine",
  },
};

export function Icon({
  name,
  className,
}: {
  name: IconName;
  className?: string;
}) {
  const x = extra[name];
  if (x) return <IconPlaceholder {...x} className={className} />;
  switch (name) {
    case "search":
      return (
        <IconPlaceholder
          lucide="SearchIcon"
          tabler="IconSearch"
          hugeicons="Search01Icon"
          phosphor="MagnifyingGlassIcon"
          remixicon="RiSearchLine"
          className={className}
        />
      );
    case "map":
      return (
        <IconPlaceholder
          lucide="MapIcon"
          tabler="IconMap"
          hugeicons="MapsIcon"
          phosphor="MapTrifoldIcon"
          remixicon="RiMapLine"
          className={className}
        />
      );
    case "sun":
      return (
        <IconPlaceholder
          lucide="SunIcon"
          tabler="IconSun"
          hugeicons="Sun01Icon"
          phosphor="SunIcon"
          remixicon="RiSunLine"
          className={className}
        />
      );
    case "plus":
      return (
        <IconPlaceholder
          lucide="PlusIcon"
          tabler="IconPlus"
          hugeicons="Add01Icon"
          phosphor="PlusIcon"
          remixicon="RiAddLine"
          className={className}
        />
      );
    case "chevronDown":
      return (
        <IconPlaceholder
          lucide="ChevronDownIcon"
          tabler="IconChevronDown"
          hugeicons="ArrowDown01Icon"
          phosphor="CaretDownIcon"
          remixicon="RiArrowDownSLine"
          className={className}
        />
      );
    case "chevronRight":
      return (
        <IconPlaceholder
          lucide="ChevronRightIcon"
          tabler="IconChevronRight"
          hugeicons="ArrowRight01Icon"
          phosphor="CaretRightIcon"
          remixicon="RiArrowRightSLine"
          className={className}
        />
      );
    case "home":
      return (
        <IconPlaceholder
          lucide="HomeIcon"
          tabler="IconHome"
          hugeicons="Home01Icon"
          phosphor="HouseIcon"
          remixicon="RiHomeLine"
          className={className}
        />
      );
    case "minus":
      return (
        <IconPlaceholder
          lucide="MinusIcon"
          tabler="IconMinus"
          hugeicons="MinusSignIcon"
          phosphor="MinusIcon"
          remixicon="RiSubtractLine"
          className={className}
        />
      );
    case "keyboard":
      return (
        <IconPlaceholder
          lucide="KeyboardIcon"
          tabler="IconKeyboard"
          hugeicons="KeyboardIcon"
          phosphor="KeyboardIcon"
          remixicon="RiKeyboardLine"
          className={className}
        />
      );
    case "bell":
      return (
        <IconPlaceholder
          lucide="BellIcon"
          tabler="IconBell"
          hugeicons="Notification01Icon"
          phosphor="BellIcon"
          remixicon="RiNotificationLine"
          className={className}
        />
      );
    case "more":
      return (
        <IconPlaceholder
          lucide="MoreHorizontalIcon"
          tabler="IconDots"
          hugeicons="MoreHorizontalCircle01Icon"
          phosphor="DotsThreeIcon"
          remixicon="RiMoreLine"
          className={className}
        />
      );
    case "arrowUp":
      return (
        <IconPlaceholder
          lucide="ArrowUpIcon"
          tabler="IconArrowUp"
          hugeicons="ArrowUp01Icon"
          phosphor="ArrowUpIcon"
          remixicon="RiArrowUpLine"
          className={className}
        />
      );
    case "upload":
      return (
        <IconPlaceholder
          lucide="UploadIcon"
          tabler="IconUpload"
          hugeicons="Upload01Icon"
          phosphor="UploadSimpleIcon"
          remixicon="RiUploadLine"
          className={className}
        />
      );
    case "grid":
      return (
        <IconPlaceholder
          lucide="LayoutGridIcon"
          tabler="IconLayoutGrid"
          hugeicons="GridViewIcon"
          phosphor="SquaresFourIcon"
          remixicon="RiLayoutGridLine"
          className={className}
        />
      );
    case "list":
      return (
        <IconPlaceholder
          lucide="ListIcon"
          tabler="IconList"
          hugeicons="ListViewIcon"
          phosphor="ListIcon"
          remixicon="RiListUnordered"
          className={className}
        />
      );
    case "info":
      return (
        <IconPlaceholder
          lucide="InfoIcon"
          tabler="IconInfoCircle"
          hugeicons="InformationCircleIcon"
          phosphor="InfoIcon"
          remixicon="RiInformationLine"
          className={className}
        />
      );
    case "close":
      return (
        <IconPlaceholder
          lucide="XIcon"
          tabler="IconX"
          hugeicons="Cancel01Icon"
          phosphor="XIcon"
          remixicon="RiCloseLine"
          className={className}
        />
      );
    case "pencil":
      return (
        <IconPlaceholder
          lucide="PencilIcon"
          tabler="IconPencil"
          hugeicons="PencilEdit01Icon"
          phosphor="PencilSimpleIcon"
          remixicon="RiPencilLine"
          className={className}
        />
      );
    case "globe":
      return (
        <IconPlaceholder
          lucide="GlobeIcon"
          tabler="IconWorld"
          hugeicons="Globe02Icon"
          phosphor="GlobeIcon"
          remixicon="RiGlobalLine"
          className={className}
        />
      );
    case "mail":
      return (
        <IconPlaceholder
          lucide="MailIcon"
          tabler="IconMail"
          hugeicons="Mail01Icon"
          phosphor="EnvelopeSimpleIcon"
          remixicon="RiMailLine"
          className={className}
        />
      );
    case "card":
      return (
        <IconPlaceholder
          lucide="CreditCardIcon"
          tabler="IconCreditCard"
          hugeicons="CreditCardIcon"
          phosphor="CreditCardIcon"
          remixicon="RiBankCardLine"
          className={className}
        />
      );
    case "server":
      return (
        <IconPlaceholder
          lucide="ServerIcon"
          tabler="IconServer"
          hugeicons="ServerStackIcon"
          phosphor="HardDrivesIcon"
          remixicon="RiHardDriveLine"
          className={className}
        />
      );
    case "message":
      return (
        <IconPlaceholder
          lucide="MessageCircleIcon"
          tabler="IconMessageCircle"
          hugeicons="Message01Icon"
          phosphor="ChatCircleIcon"
          remixicon="RiMessageLine"
          className={className}
        />
      );
  }
}

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useState } from "react";
import { type Folder, library } from "../data";
import { Icon } from "./icons";
import { Pixels } from "./pixel";

const count = (n: number) => `${n} ${n === 1 ? "file" : "files"}`;

function Cover({ f }: { f: Folder }) {
  if (f.kind === "scene" && f.rects)
    return <Pixels w={80} h={60} rects={f.rects} className="size-full" />;
  return (
    <div className="grid size-full grid-cols-2 gap-2 bg-muted p-2">
      {[0, 1, 2, 3].map((n) => (
        <div
          key={n}
          className="grid place-items-center rounded-md border border-border bg-card"
        >
          {n === 1 && (
            <span className="h-4 w-3 rounded-[2px] bg-muted-foreground" />
          )}
        </div>
      ))}
    </div>
  );
}

export function LibraryTab() {
  const [banner, setBanner] = useState(true);
  const [view, setView] = useState("grid");
  return (
    <div className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-4">
      <div className="flex items-center justify-between">
        <h2 className="flex items-center gap-2 text-lg font-medium">
          Library
          <Icon name="info" className="size-3.5 text-muted-foreground" />
        </h2>
        <div className="flex items-center gap-2">
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            aria-label="Upload"
          >
            <Icon name="upload" className="size-4" />
          </Button>
          <ToggleGroup
            variant="segmented"
            value={[view]}
            onValueChange={(v) => v[0] && setView(v[0] as string)}
          >
            <ToggleGroupItem value="grid" aria-label="Grid">
              <Icon name="grid" className="size-3.5" />
            </ToggleGroupItem>
            <ToggleGroupItem value="list" aria-label="List">
              <Icon name="list" className="size-3.5" />
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
      </div>
      <InputGroup className="mt-3">
        <InputGroupAddon>
          <Icon name="search" />
        </InputGroupAddon>
        <InputGroupInput placeholder="Search files" />
      </InputGroup>
      {banner && (
        <Item variant="muted" size="sm" className="mt-3 items-start">
          <ItemMedia variant="icon">
            <Icon name="message" />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{library.banner.title}</ItemTitle>
            <ItemDescription className="line-clamp-none">
              {library.banner.body}
            </ItemDescription>
            <div className="pt-2">
              <Button
                type="button"
                variant="outline"
                size="xs"
                elevation="raised"
              >
                {library.banner.action}
              </Button>
            </div>
          </ItemContent>
          <ItemActions>
            <Button
              type="button"
              variant="ghost"
              size="icon-xs"
              aria-label="Dismiss"
              onClick={() => setBanner(false)}
            >
              <Icon name="close" className="size-3.5" />
            </Button>
          </ItemActions>
        </Item>
      )}
      {view === "grid" ? (
        <div className="mt-3 grid grid-cols-2 gap-3">
          {library.folders.map((f) => (
            <Card key={f.id} className="gap-0 overflow-hidden py-0">
              <div className="aspect-[4/3] overflow-hidden border-b border-border">
                <Cover f={f} />
              </div>
              <div className="px-3 py-2.5">
                <div className="text-[13px] font-medium">{f.name}</div>
                <div className="text-xs text-muted-foreground">
                  {count(f.files)}
                </div>
              </div>
            </Card>
          ))}
        </div>
      ) : (
        <Card className="mt-3 gap-0 py-0">
          {library.folders.map((f) => (
            <Item key={f.id} size="sm">
              <ItemMedia variant="image">
                <Cover f={f} />
              </ItemMedia>
              <ItemContent>
                <ItemTitle>{f.name}</ItemTitle>
                <ItemDescription>{count(f.files)}</ItemDescription>
              </ItemContent>
            </Item>
          ))}
        </Card>
      )}
    </div>
  );
}

import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useState } from "react";
import {
  depts,
  org,
  orgMenu,
  paletteCommands,
  paletteDepartments,
  palettePlaceholder,
  paletteWorkspaces,
  roadmapStages,
  shortcutList,
} from "../data";
import { Icon } from "./icons";

const keys = (list: string[]) => (
  <KbdGroup>
    {list.map((k) => (
      <Kbd key={k}>{k}</Kbd>
    ))}
  </KbdGroup>
);

export function OrgMenu({ onShortcuts }: { onShortcuts: () => void }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" size="sm" />}>
        <Avatar size="sm">
          <AvatarFallback>{org.initials}</AvatarFallback>
        </Avatar>
        {org.name}
        <Icon name="chevronDown" />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-64" elevation="floating">
        {orgMenu.map((group, i) => (
          <div key={group[0].id}>
            {i > 0 && <DropdownMenuSeparator />}
            <DropdownMenuGroup>
              {group.map((item) => (
                <DropdownMenuItem
                  key={item.id}
                  onClick={item.id === "shortcuts" ? onShortcuts : undefined}
                >
                  <Icon name={item.icon} />
                  {item.label}
                  {item.keys && (
                    <DropdownMenuShortcut>
                      {keys(item.keys)}
                    </DropdownMenuShortcut>
                  )}
                </DropdownMenuItem>
              ))}
            </DropdownMenuGroup>
          </div>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export function SearchPalette({
  open,
  onOpenChange,
  onNewTask,
  onRoadmap,
  onDepartment,
}: {
  open: boolean;
  onOpenChange: (o: boolean) => void;
  onNewTask: () => void;
  onRoadmap: () => void;
  onDepartment: (id: string) => void;
}) {
  const run = (fn?: () => void) => {
    onOpenChange(false);
    fn?.();
  };
  return (
    <CommandDialog
      open={open}
      onOpenChange={onOpenChange}
      title="Search"
      description="Search the workspace"
    >
      <CommandInput placeholder={palettePlaceholder} />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Commands">
          {paletteCommands.map((c) => (
            <CommandItem
              key={c.id}
              value={c.label}
              onSelect={() =>
                run(
                  c.id === "create-task"
                    ? onNewTask
                    : c.id === "roadmap"
                      ? onRoadmap
                      : undefined,
                )
              }
            >
              <Icon name={c.icon} />
              {c.label}
              <CommandShortcut>{keys(c.keys)}</CommandShortcut>
            </CommandItem>
          ))}
        </CommandGroup>
        <CommandGroup heading="Departments">
          {paletteDepartments.map((id) => {
            const d = depts.find((x) => x.id === id);
            if (!d) return null;
            return (
              <CommandItem
                key={id}
                value={d.label}
                onSelect={() => run(() => onDepartment(id))}
              >
                <AgentAvatar seed={id} color={d.color} size={16} tile={false} />
                {d.label}
              </CommandItem>
            );
          })}
        </CommandGroup>
        <CommandGroup heading="Workspaces">
          {paletteWorkspaces.map((w) => (
            <CommandItem key={w} value={w} onSelect={() => run()}>
              <Icon name="globe" />
              {w}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
      <div className="flex items-center justify-end gap-4 border-t border-border px-3 py-2 text-xs text-muted-foreground">
        <span className="flex items-center gap-1.5">
          <Kbd>↵</Kbd> Select
        </span>
        <span className="flex items-center gap-1.5">
          <Kbd>↑↓</Kbd> Navigate
        </span>
        <span className="flex items-center gap-1.5">
          <Kbd>Esc</Kbd> Close
        </span>
      </div>
    </CommandDialog>
  );
}

export function NotificationsPopover() {
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            size="icon-lg"
            elevation="raised"
            aria-label="Notifications"
            className="absolute bottom-4 left-4"
          />
        }
      >
        <Icon name="bell" />
      </PopoverTrigger>
      <PopoverContent side="top" align="start" className="w-80">
        <PopoverHeader className="flex-row items-center justify-between">
          <PopoverTitle>Notifications</PopoverTitle>
          <Button variant="outline" size="xs">
            Desktop alerts
          </Button>
        </PopoverHeader>
        <div className="py-6 text-center text-sm text-muted-foreground">
          All caught up!
        </div>
      </PopoverContent>
    </Popover>
  );
}

export function RoadmapPopover() {
  return (
    <Popover>
      <PopoverTrigger
        render={<Button variant="ghost" size="icon-xs" aria-label="Map" />}
      >
        <Icon name="map" />
      </PopoverTrigger>
      <PopoverContent align="end" className="w-72">
        <PopoverHeader>
          <PopoverTitle>Roadmap</PopoverTitle>
        </PopoverHeader>
        <ol className="flex flex-col gap-3">
          {roadmapStages.map((s, i) => (
            <li key={s.title} className="flex gap-3">
              <span className="font-mono text-xs text-muted-foreground">
                {i + 1}
              </span>
              <div>
                <div className="text-sm font-medium">{s.title}</div>
                <div className="text-xs text-muted-foreground">{s.note}</div>
              </div>
            </li>
          ))}
        </ol>
      </PopoverContent>
    </Popover>
  );
}

export function ThemeTip() {
  return (
    <Tooltip>
      <TooltipTrigger
        render={<Button variant="ghost" size="icon-xs" aria-label="Theme" />}
      >
        <Icon name="sun" />
      </TooltipTrigger>
      <TooltipContent>Theme follows the viewer</TooltipContent>
    </Tooltip>
  );
}

export function ShortcutsDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (o: boolean) => void;
}) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Keyboard shortcuts</DialogTitle>
          <DialogDescription>Move around without the mouse.</DialogDescription>
        </DialogHeader>
        <ul className="flex flex-col gap-2">
          {shortcutList.map((s) => (
            <li
              key={s.label}
              className="flex items-center justify-between text-sm"
            >
              {s.label}
              {keys(s.keys)}
            </li>
          ))}
        </ul>
      </DialogContent>
    </Dialog>
  );
}

export function NewTaskDialog({
  open,
  onOpenChange,
  onCreate,
}: {
  open: boolean;
  onOpenChange: (o: boolean) => void;
  onCreate: (name: string) => void;
}) {
  const [name, setName] = useState("");
  const submit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    const v = name.trim();
    if (!v) return;
    onCreate(v);
    setName("");
    onOpenChange(false);
  };
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <form onSubmit={submit} className="flex flex-col gap-4">
          <DialogHeader>
            <DialogTitle>New task</DialogTitle>
            <DialogDescription>
              Describe the work and the right agent picks it up.
            </DialogDescription>
          </DialogHeader>
          <Input
            autoFocus
            placeholder="Task title"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={!name.trim()}>
              Create
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

import {
  InsetPanel,
  InsetPanelBody,
  InsetPanelHeader,
} from "@/components/ui/inset-panel";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useState } from "react";
import {
  type ChatMessage,
  reply,
  type TabId,
  type TaskRow,
  tabs,
} from "../data";
import { CompanyTab } from "./company-tab";
import { Composer } from "./composer";
import { HomeTab } from "./home-tab";
import { LibraryTab } from "./library-tab";
import { TasksTab } from "./tasks-tab";

export function Panel({
  tab,
  setTab,
  messages,
  setMessages,
  tasks,
}: {
  tab: TabId;
  setTab: (t: TabId) => void;
  messages: ChatMessage[];
  setMessages: (m: ChatMessage[]) => void;
  tasks: TaskRow[];
}) {
  const [view, setView] = useState<"chat" | "home" | "thread">("chat");
  const send = (text: string) => {
    const id = messages.length + 1;
    setMessages([
      ...messages,
      { id, from: "user", text },
      { id: id + 1, from: "assistant", text: reply },
    ]);
    setView("chat");
    setTab("atlas");
  };
  const reset = () => {
    setMessages([]);
    setView("home");
  };

  return (
    <Tabs
      value={tab}
      onValueChange={(v) => setTab(v as TabId)}
      className="size-full gap-0"
    >
      <InsetPanel elevation="floating" className="h-full">
        <InsetPanelHeader className="px-5 py-3">
          <TabsList variant="pills">
            {tabs.map((t) => (
              <TabsTrigger key={t.id} value={t.id}>
                {t.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </InsetPanelHeader>
        <InsetPanelBody className="flex flex-col">
          <TabsContent value="atlas" className="flex min-h-0 flex-1 flex-col">
            <HomeTab
              view={view}
              setView={setView}
              messages={messages}
              tasks={tasks}
              onSend={send}
              onReset={reset}
            />
          </TabsContent>
          <TabsContent value="tasks" className="flex min-h-0 flex-1 flex-col">
            <TasksTab tasks={tasks} />
          </TabsContent>
          <TabsContent value="company" className="flex min-h-0 flex-1 flex-col">
            <CompanyTab />
          </TabsContent>
          <TabsContent value="library" className="flex min-h-0 flex-1 flex-col">
            <LibraryTab />
          </TabsContent>
          {tab !== "library" && <Composer onSend={send} onClear={reset} />}
        </InsetPanelBody>
      </InsetPanel>
    </Tabs>
  );
}

import type { Rect } from "../data";

/** Decorative pixel art drawn from the rect lists in data.ts. */
export function Pixels({
  w,
  h,
  rects,
  className,
}: {
  w: number;
  h: number;
  rects: Rect[];
  className?: string;
}) {
  return (
    <svg
      viewBox={`0 0 ${w} ${h}`}
      shapeRendering="crispEdges"
      preserveAspectRatio="xMidYMid slice"
      aria-hidden="true"
      className={className}
    >
      {rects.map((r, i) => (
        // biome-ignore lint/suspicious/noArrayIndexKey: static decorative rects
        <rect key={i} x={r.x} y={r.y} width={r.w} height={r.h} fill={r.c} />
      ))}
    </svg>
  );
}

/** Task status: spinning ring while running, green dot when done. */
export function Status({ status }: { status: "running" | "done" }) {
  if (status === "done")
    return (
      <span
        className="size-1.5 rounded-full bg-success"
        role="img"
        aria-label="Done"
      />
    );
  return (
    <svg
      viewBox="0 0 16 16"
      className="size-3.5 animate-spin text-muted-foreground"
      role="img"
      aria-label="Running"
    >
      <circle
        cx="8"
        cy="8"
        r="6"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeOpacity="0.3"
      />
      <path
        d="M8 2a6 6 0 0 1 6 6"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
}

import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";
import { suggested, type TaskRow } from "../data";
import { Status } from "./pixel";

const label = "mt-5 mb-1 text-[13px] text-muted-foreground";

export function TasksTab({ tasks }: { tasks: TaskRow[] }) {
  const [picked, setPicked] = useState<string[]>([]);
  const all = picked.length === tasks.length;
  const toggle = (id: string, on: boolean) =>
    setPicked((p) => (on ? [...p, id] : p.filter((x) => x !== id)));

  return (
    <div className="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-4">
      <h2 className="text-lg font-medium">Tasks</h2>
      <div className="mt-3 flex items-center gap-3 text-[13px] text-muted-foreground">
        <Checkbox
          aria-label="Select all"
          checked={all}
          indeterminate={picked.length > 0 && !all}
          onCheckedChange={(c) => setPicked(c ? tasks.map((t) => t.id) : [])}
        />
        Select all
      </div>
      <div className={label}>Tasks</div>
      <div className="flex flex-col">
        {tasks.map((t) => (
          <div
            key={t.id}
            className="flex items-center gap-3 border-b border-border py-3 last:border-b-0"
          >
            <Checkbox
              checked={picked.includes(t.id)}
              onCheckedChange={(c) => toggle(t.id, c)}
            />
            <Status status={t.status} />
            <AgentAvatar
              seed={t.agent}
              color={t.color}
              size={20}
              tile={false}
            />
            <span className="text-[15px]">{t.name}</span>
          </div>
        ))}
      </div>
      <div className={label}>Suggested Next</div>
      <div className="flex flex-col">
        {suggested.map((s) => (
          <div key={s} className="flex items-center gap-3 py-2.5">
            <svg
              viewBox="0 0 16 16"
              className="size-3.5 text-muted-foreground"
              aria-hidden="true"
            >
              <circle
                cx="8"
                cy="8"
                r="6"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeDasharray="2 2.4"
              />
            </svg>
            <span className="text-[15px]">{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Sample data for the Atlas agent canvas example. Shared by all three ports. Coordinates are CSS px relative to the hub centre.

export const org = { name: "Acme Labs", initials: "AL", user: "Sam" };

export const tabs = [
  { id: "atlas", label: "Atlas" },
  { id: "tasks", label: "Tasks" },
  { id: "company", label: "Company" },
  { id: "library", label: "Library" },
] as const;
export type TabId = (typeof tabs)[number]["id"];

export const composerPlaceholder = "Ask Atlas anything about your company...";
export const atlasAgent = {
  id: "atlas",
  name: "Atlas",
  color: "var(--warning)",
};

// ---------------------------------------------------------------- pixel art (own drawing, rects only)

const plantRows = [
  "....y.yyy.y....",
  "..y.yyyyyyy.y..",
  "...yyybbbyyy...",
  "..yyybbbbbyyy..",
  "..yyybbbbbyyy..",
  "..yyybbbbbyyy..",
  "...yyybbbyyy...",
  "..y.yyyyyyy.y..",
  "....y.yyy.y....",
  ".......d.......",
  ".......d.......",
  "....gg.d.......",
  "...ggggd.gg....",
  ".....ggd.gggg..",
  ".......dgggg...",
  ".......d.......",
  "..gg...d.......",
  "..ggggdd.......",
  "....ggd........",
  ".......d.......",
  ".......d.......",
  ".......d.......",
];

const plantColors: Record<string, string> = {
  y: "var(--warning)",
  b: "color-mix(in srgb, var(--warning) 35%, var(--background))",
  g: "var(--success)",
  d: "color-mix(in srgb, var(--success) 60%, var(--background))",
};

export type Rect = { x: number; y: number; w: number; h: number; c: string };

function rowsToRects(rows: string[]): Rect[] {
  const out: Rect[] = [];
  rows.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      const c = plantColors[ch];
      if (c) out.push({ x, y, w: 1, h: 1, c });
    });
  });
  return out;
}

export const plant = {
  w: 15,
  h: plantRows.length,
  rects: rowsToRects(plantRows),
};
export const plantHead = {
  w: 11,
  h: 9,
  rects: rowsToRects(plantRows.slice(0, 9))
    .map((r) => ({ ...r, x: r.x - 2 }))
    .filter((r) => r.x >= 0 && r.x < 11),
};

/** Deterministic pixel skyline used for the library covers (own scenes, no external art). */
function scene(seed: number, sky: [string, string], accent: string): Rect[] {
  let s = seed;
  const rnd = () => {
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 4294967296;
  };
  const out: Rect[] = [
    { x: 0, y: 0, w: 80, h: 30, c: sky[0] },
    { x: 0, y: 30, w: 80, h: 30, c: sky[1] },
  ];
  for (let i = 0; i < 3; i++)
    out.push({
      x: Math.floor(rnd() * 60),
      y: 6 + Math.floor(rnd() * 14),
      w: 12 + Math.floor(rnd() * 10),
      h: 4,
      c: "color-mix(in srgb, var(--foreground) 70%, var(--card))",
    });
  let x = 0;
  while (x < 80) {
    const w = 8 + Math.floor(rnd() * 8);
    const h = 14 + Math.floor(rnd() * 26);
    out.push({
      x,
      y: 60 - h,
      w,
      h,
      c: "color-mix(in srgb, var(--background) 80%, var(--card))",
    });
    for (let wy = 60 - h + 3; wy < 57; wy += 5)
      for (let wx = x + 2; wx < x + w - 2; wx += 4)
        if (rnd() > 0.45) out.push({ x: wx, y: wy, w: 2, h: 2, c: accent });
    x += w + 1;
  }
  return out;
}

// ---------------------------------------------------------------- canvas graph

export type Tile = { x: number; y: number };
export type Dept = {
  id: string;
  label: string;
  /** token colour of the agent glyph / tint */
  color: string;
  /** solid tint of the plate (color-mix into --card) or null for the neutral label plate */
  tint: string | null;
  node: [number, number];
  /** dashed elbow from the node to the plate */
  path: string;
  end: [number, number];
  plate: { x: number; y: number; w: number; h: number };
  thumbs: Tile[];
  /** engineering: the plate is a card holding a 3x2 grid */
  grid?: boolean;
};

const D = 155;
const tint = (c: string) => `color-mix(in srgb, ${c} 16%, var(--card))`;
const pink = "color-mix(in srgb, var(--chart-5) 55%, var(--chart-4))";
const orange = "color-mix(in srgb, var(--chart-5) 50%, var(--chart-3))";
const teal = "color-mix(in srgb, var(--chart-1) 55%, var(--chart-2))";

export const RING = 219;
export const TILE = { w: 44, h: 32 };

export const depts: Dept[] = [
  {
    id: "support",
    label: "Support",
    color: pink,
    tint: null,
    node: [0, -RING],
    path: "M0 -219 V-290",
    end: [0, -290],
    plate: { x: -63, y: -318, w: 126, h: 28 },
    thumbs: [],
  },
  {
    id: "operations",
    label: "Operations",
    color: orange,
    tint: tint(orange),
    node: [D, -D],
    path: `M${D} -${D} H297 L340 -197`,
    end: [340, -197],
    plate: { x: 275, y: -229, w: 128, h: 32 },
    thumbs: [
      { x: 403, y: -261 },
      { x: 447, y: -261 },
      { x: 403, y: -229 },
    ],
  },
  {
    id: "finance",
    label: "Finance",
    color: "var(--chart-3)",
    tint: null,
    node: [RING, 0],
    path: "M219 0 H448",
    end: [448, 0],
    plate: { x: 448, y: -14, w: 130, h: 28 },
    thumbs: [],
  },
  {
    id: "legal",
    label: "Legal",
    color: teal,
    tint: null,
    node: [D, D],
    path: `M${D} ${D} H297 L340 198`,
    end: [340, 198],
    plate: { x: 277, y: 199, w: 126, h: 30 },
    thumbs: [],
  },
  {
    id: "engineering",
    label: "Engineering",
    color: "var(--chart-2)",
    tint: tint("var(--chart-2)"),
    node: [0, RING],
    path: "M0 219 V288",
    end: [0, 288],
    plate: { x: -65, y: 288, w: 131, h: 94 },
    thumbs: [],
    grid: true,
  },
  {
    id: "design",
    label: "Design",
    color: "var(--chart-4)",
    tint: tint("var(--chart-4)"),
    node: [-D, D],
    path: `M-${D} ${D} H-297 L-340 197`,
    end: [-340, 197],
    plate: { x: -405, y: 197, w: 130, h: 32 },
    thumbs: [
      { x: -447, y: 229 },
      { x: -403, y: 229 },
      { x: -447, y: 261 },
      { x: -403, y: 261 },
    ],
  },
  {
    id: "marketing",
    label: "Marketing",
    color: "var(--chart-5)",
    tint: tint("var(--chart-5)"),
    node: [-RING, 0],
    path: "M-219 0 H-445",
    end: [-445, 0],
    plate: { x: -572, y: -16, w: 127, h: 32 },
    thumbs: [
      { x: -616, y: -16 },
      { x: -660, y: 16 },
      { x: -616, y: 16 },
    ],
  },
  {
    id: "sales",
    label: "Sales",
    color: "var(--chart-1)",
    tint: tint("var(--chart-1)"),
    node: [-D, -D],
    path: `M-${D} -${D} H-297 L-340 -197`,
    end: [-340, -197],
    plate: { x: -403, y: -229, w: 128, h: 32 },
    thumbs: [
      { x: -491, y: -261 },
      { x: -447, y: -261 },
      { x: -403, y: -261 },
      { x: -491, y: -229 },
      { x: -447, y: -229 },
    ],
  },
];

// ---------------------------------------------------------------- panel

export const tasks = [
  {
    id: "t1",
    name: "Draft landing copy",
    agent: "marketing",
    color: "var(--chart-2)",
    age: "13d",
    status: "running" as const,
  },
  {
    id: "t2",
    name: "Build app",
    agent: "engineering",
    color: "var(--chart-2)",
    age: "4mo",
    status: "done" as const,
  },
];

export const suggested = [
  "Build marketing website",
  "Define positioning",
  "Define brand voice",
  "Create launch post",
  "Incorporate LLC",
];

export const reply =
  "Got it. I'll break that down into tasks, hand them to the right department agents and report back here as soon as the first draft is ready.";

export type StackIcon = "domain" | "email" | "revenue" | "hosting";
export const company = {
  stack: [
    {
      icon: "domain",
      title: "Domain",
      note: "Connect your customer-facing domain",
    },
    { icon: "email", title: "Email", note: "Configure your email domain" },
    { icon: "revenue", title: "Revenue", note: "Connect billing" },
    { icon: "hosting", title: "Hosting", note: "Deployment provider" },
  ] as { icon: StackIcon; title: string; note: string }[],
  links: [
    { title: "App", note: "App, source, and deployment links." },
    {
      title: "Marketing Website",
      note: "Website, source, and deployment links.",
    },
  ],
  agents: [
    {
      id: "design",
      name: "Design Agent",
      note: "Design department agent.",
      color: "var(--chart-4)",
    },
    {
      id: "engineer",
      name: "Engineer",
      note: "Engineering department agent.",
      color: "var(--chart-2)",
    },
    {
      id: "marketing",
      name: "Marketing Agent",
      note: "Marketing department agent.",
      color: "var(--chart-5)",
    },
    {
      id: "sales",
      name: "Sales Agent",
      note: "Sales department agent.",
      color: "var(--chart-1)",
    },
    {
      id: "ops",
      name: "Ops Agent",
      note: "Operations department agent.",
      color: orange,
    },
  ],
};

export type Folder = {
  id: string;
  name: string;
  files: number;
  kind: "grid" | "scene";
  rects?: Rect[];
};
export const library = {
  banner: {
    title: "Bring over context from other tools",
    body: "Copy a prompt that turns old chats, decisions, and working preferences into import-ready Markdown.",
    action: "Copy prompt",
  },
  folders: [
    { id: "general", name: "General", files: 2, kind: "grid" },
    {
      id: "engineering",
      name: "Engineering",
      files: 1,
      kind: "scene",
      rects: scene(
        11,
        [
          "color-mix(in srgb, var(--chart-2) 45%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 22%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
    {
      id: "sales",
      name: "Sales",
      files: 0,
      kind: "scene",
      rects: scene(
        23,
        [
          "color-mix(in srgb, var(--chart-1) 40%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 25%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
    {
      id: "marketing",
      name: "Marketing",
      files: 0,
      kind: "scene",
      rects: scene(
        37,
        [
          "color-mix(in srgb, var(--chart-4) 45%, var(--card))",
          "color-mix(in srgb, var(--chart-5) 30%, var(--card))",
        ],
        "var(--chart-3)",
      ),
    },
    {
      id: "design",
      name: "Design",
      files: 0,
      kind: "scene",
      rects: scene(
        51,
        [
          "color-mix(in srgb, var(--chart-4) 35%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 30%, var(--card))",
        ],
        "var(--chart-4)",
      ),
    },
    {
      id: "operations",
      name: "Operations",
      files: 0,
      kind: "scene",
      rects: scene(
        67,
        [
          "color-mix(in srgb, var(--chart-3) 35%, var(--card))",
          "color-mix(in srgb, var(--chart-5) 25%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
  ] as Folder[],
};

export type ChatMessage = {
  id: number;
  from: "user" | "assistant";
  text: string;
};

// ---------------------------------------------------------------- overlays, menus and thread (shared content)

export type MenuIcon =
  | "settings"
  | "globe"
  | "lightbulb"
  | "plug"
  | "gift"
  | "database"
  | "coins"
  | "keyboard"
  | "book"
  | "users"
  | "lifebuoy"
  | "plus"
  | "map"
  | "home"
  | "archive"
  | "paperclip"
  | "listChecks"
  | "trash";

export const orgMenu: {
  id: string;
  label: string;
  icon: MenuIcon;
  keys?: string[];
}[][] = [
  [
    {
      id: "settings",
      label: "Settings",
      icon: "settings",
      keys: ["⌘", "⌥", "S"],
    },
    { id: "domains", label: "Domains", icon: "globe" },
    { id: "skills", label: "Skills", icon: "lightbulb" },
    { id: "integrations", label: "Integrations", icon: "plug" },
    { id: "referrals", label: "Referrals", icon: "gift" },
    { id: "database", label: "Database", icon: "database" },
    { id: "billing", label: "Billing & Usage", icon: "coins" },
  ],
  [
    { id: "shortcuts", label: "Keyboard Shortcuts", icon: "keyboard" },
    { id: "docs", label: "Docs", icon: "book" },
    { id: "community", label: "Join community", icon: "users" },
    { id: "support", label: "Support Request", icon: "lifebuoy" },
    { id: "new-company", label: "Create new company", icon: "plus" },
  ],
];

export const paletteCommands: {
  id: string;
  label: string;
  icon: MenuIcon;
  keys: string[];
}[] = [
  { id: "create-task", label: "Create task", icon: "plus", keys: ["C"] },
  {
    id: "overview",
    label: "Go to overview",
    icon: "home",
    keys: ["⌘", "⌥", "O"],
  },
  { id: "roadmap", label: "Open roadmap", icon: "map", keys: ["⌘", "⌥", "R"] },
  {
    id: "archived",
    label: "View archived tasks",
    icon: "archive",
    keys: ["⌘", "⌥", "A"],
  },
  {
    id: "settings",
    label: "Open settings",
    icon: "settings",
    keys: ["⌘", "⌥", "S"],
  },
];
export const paletteDepartments = [
  "operations",
  "engineering",
  "design",
  "marketing",
  "sales",
];
export const paletteWorkspaces = ["App", "Marketing Website"];
export const palettePlaceholder =
  "Search files, tasks, workspaces, or @ a department...";

export const shortcutList: { label: string; keys: string[] }[] = [
  { label: "Open command palette", keys: ["⌘", "K"] },
  { label: "Create task", keys: ["C"] },
  { label: "Open settings", keys: ["⌘", "⌥", "S"] },
  { label: "Go to overview", keys: ["⌘", "⌥", "O"] },
  { label: "Open roadmap", keys: ["⌘", "⌥", "R"] },
  { label: "Pan the canvas", keys: ["Drag"] },
];

export const roadmapStages = [
  { title: "Incorporate", note: "Entity, bank account and domain" },
  { title: "Build", note: "First app and landing page" },
  { title: "Launch", note: "Outreach, content and first customers" },
];

export const composerMenu: {
  id: string;
  label: string;
  icon: MenuIcon;
}[] = [
  { id: "attach", label: "Attach files", icon: "paperclip" },
  { id: "plan", label: "Turn on plan mode", icon: "listChecks" },
  { id: "clear", label: "Clear chat", icon: "trash" },
];

export type TaskRow = {
  id: string;
  name: string;
  agent: string;
  color: string;
  age: string;
  status: "running" | "done";
};

export const thread = {
  intro: [
    "Here is where Acme Labs stands today: the brand basics are in place, and two areas can move first.",
    "Brand and positioning, so every page and post sounds the same.",
    "Go-to-market, so your first customers hear from you this week.",
    "Want me to take one of them on now?",
  ],
  question: "Hey Atlas, what should I do next?",
  answer:
    "Based on what we have set up so far for Acme Labs, these are the areas you can start on next.",
  actions: [
    {
      id: "a1",
      title: "Build your first app or landing page",
      dept: "Engineering",
      agent: "engineering",
      color: "var(--chart-2)",
    },
    {
      id: "a2",
      title: "Incorporate your company",
      dept: "Operations",
      agent: "operations",
      color: "color-mix(in srgb, var(--chart-5) 50%, var(--chart-3))",
    },
    {
      id: "a3",
      title: "Start reaching out to potential customers",
      dept: "Sales",
      agent: "sales",
      color: "var(--chart-1)",
    },
    {
      id: "a4",
      title: "Open the company roadmap",
      dept: "General",
      agent: "general",
      color: "var(--chart-3)",
    },
  ],
};

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { ElevationProvider } from "@/components/ui/elevation";
import { type ChatMessage, type TabId, type TaskRow, tasks as seed } from "./data";
import Canvas from "./vue/Canvas.vue";
import Icon from "./vue/Icon.vue";
import Panel from "./vue/Panel.vue";

const tab = ref<TabId>("atlas");
const messages = ref<ChatMessage[]>([]);
const tasks = ref<TaskRow[]>(seed);
const open = ref(false);

function newTask(name: string) {
  tasks.value = [
    { id: `t${tasks.value.length + 1}-${name}`, name, agent: "atlas", color: "var(--warning)", age: "now", status: "running" },
    ...tasks.value,
  ];
  tab.value = "tasks";
  open.value = true;
}
</script>

<template>
  <ElevationProvider mode="layered">
    <div class="relative h-svh min-h-[560px] overflow-hidden bg-background text-foreground">
      <Canvas @new-task="newTask" @open-panel="open = true" />
      <aside
        :class="`absolute top-2 right-2 bottom-2 z-20 w-[460px] max-w-[calc(100%-1rem)] lg:block ${open ? 'block' : 'hidden'}`"
      >
        <Panel v-model:tab="tab" v-model:messages="messages" :tasks="tasks" />
        <Button
          type="button"
          variant="ghost"
          size="icon-xs"
          aria-label="Close panel"
          class="absolute top-3 right-3 z-30 lg:hidden"
          @click="open = false"
        >
          <Icon name="close" />
        </Button>
      </aside>
    </div>
  </ElevationProvider>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
  depts,
  org,
  orgMenu,
  paletteCommands,
  paletteDepartments,
  palettePlaceholder,
  paletteWorkspaces,
  plant,
  plantHead,
  RING,
  roadmapStages,
  shortcutList,
  TILE,
} from "../data";
import Icon from "./Icon.vue";
import Pixels from "./Pixels.vue";

const emit = defineEmits<{ (e: "new-task", name: string): void; (e: "open-panel"): void }>();

const grid =
  "[background-image:linear-gradient(to_right,color-mix(in_srgb,var(--foreground)_5%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--foreground)_5%,transparent)_1px,transparent_1px)] [background-size:48px_48px]";

const zoom = ref(100);
const pan = ref({ x: 0, y: 0 });
const dragging = ref(false);
let drag: { id: number; x: number; y: number } | null = null;
const hub = ref(true);
const active = ref<string | null>(null);
const palette = ref(false);
const shortcuts = ref(false);
const taskDialog = ref(false);
const taskName = ref("");

const pick = (id: string) => {
  active.value = active.value === id ? null : id;
};
const step = (d: number) => {
  zoom.value = Math.min(160, Math.max(60, zoom.value + d));
};
const reset = () => {
  zoom.value = 100;
  pan.value = { x: 0, y: 0 };
};
const down = (e: PointerEvent) => {
  if ((e.target as HTMLElement).closest("button,[data-nopan]")) return;
  drag = { id: e.pointerId, x: e.clientX, y: e.clientY };
  (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
  dragging.value = true;
};
const move = (e: PointerEvent) => {
  if (!drag || drag.id !== e.pointerId) return;
  pan.value = { x: pan.value.x + e.clientX - drag.x, y: pan.value.y + e.clientY - drag.y };
  drag.x = e.clientX;
  drag.y = e.clientY;
};
const up = (e: PointerEvent) => {
  if (drag?.id !== e.pointerId) return;
  drag = null;
  dragging.value = false;
};
const onKey = (e: KeyboardEvent) => {
  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
    e.preventDefault();
    palette.value = !palette.value;
  }
};
onMounted(() => window.addEventListener("keydown", onKey));
onUnmounted(() => window.removeEventListener("keydown", onKey));

const runCommand = (id: string) => {
  palette.value = false;
  if (id === "create-task") taskDialog.value = true;
};
const runDept = (id: string) => {
  palette.value = false;
  active.value = id;
};
const createTask = () => {
  const v = taskName.value.trim();
  if (!v) return;
  emit("new-task", v);
  taskName.value = "";
  taskDialog.value = false;
};
const deptOf = (id: string) => depts.find((d) => d.id === id);
</script>

<template>
  <TooltipProvider>
    <div
      :class="`absolute inset-0 touch-none overflow-hidden bg-card select-none ${grid} ${dragging ? 'cursor-grabbing' : 'cursor-grab'}`"
      :style="{ backgroundPosition: `${pan.x}px ${pan.y}px` }"
      @pointerdown="down"
      @pointermove="move"
      @pointerup="up"
      @pointercancel="up"
    >
      <div
        class="absolute top-[46.5%] left-1/2 size-0 origin-top-left lg:left-[calc((100%-438px)*0.58)]"
        :style="{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100})` }"
      >
        <svg class="pointer-events-none absolute overflow-visible" width="1" height="1" aria-hidden="true">
          <circle :r="RING" fill="none" stroke="var(--foreground)" stroke-opacity="0.12" stroke-width="1.5" />
          <line
            v-for="d in depts"
            :key="`s-${d.id}`"
            x1="0"
            y1="0"
            :x2="d.node[0]"
            :y2="d.node[1]"
            stroke="var(--foreground)"
            stroke-opacity="0.2"
            stroke-dasharray="4 4"
          />
          <g v-for="d in depts" :key="`c-${d.id}`">
            <path
              :d="d.path"
              fill="none"
              stroke="var(--foreground)"
              :stroke-opacity="active === d.id ? 0.9 : 0.35"
              :stroke-width="active === d.id ? 1.5 : 1"
              stroke-dasharray="4 4"
            />
            <circle :cx="d.end[0]" :cy="d.end[1]" r="3" fill="var(--border)" />
          </g>
        </svg>

        <div v-for="d in depts" :key="d.id">
          <span
            v-for="t in d.thumbs"
            :key="`${t.x}-${t.y}`"
            class="pointer-events-none absolute overflow-hidden rounded-[3px] border border-border bg-muted"
            :style="{ left: `${t.x}px`, top: `${t.y}px`, width: `${TILE.w}px`, height: `${TILE.h}px` }"
          >
            <i class="absolute top-2 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full bg-border" />
            <i class="absolute top-3.5 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full bg-border" />
          </span>
          <Button
            type="button"
            :variant="active === d.id ? 'secondary' : 'outline'"
            size="sm"
            :aria-pressed="active === d.id"
            class="absolute"
            :style="{
              left: `${d.plate.x}px`,
              top: `${d.plate.y}px`,
              width: `${d.plate.w}px`,
              height: `${d.grid ? 32 : d.plate.h}px`,
            }"
            @click="pick(d.id)"
          >
            {{ d.label }}
          </Button>
          <span
            v-if="d.grid"
            class="pointer-events-none absolute grid grid-cols-3 gap-px overflow-hidden p-0.5"
            :style="{
              left: `${d.plate.x}px`,
              top: `${d.plate.y + 32}px`,
              width: `${d.plate.w}px`,
              height: `${d.plate.h - 32}px`,
            }"
          >
            <span v-for="n in 6" :key="n" class="relative overflow-hidden rounded-[3px] border border-border bg-muted">
              <i class="absolute top-2 left-1/2 h-0.5 w-5 -translate-x-1/2 rounded-full bg-border" />
            </span>
          </span>
        </div>

        <Pixels
          :w="plant.w"
          :h="plant.h"
          :rects="plant.rects"
          class="pointer-events-none absolute top-[-78px] left-[-18px] w-9 opacity-80"
        />
        <button
          type="button"
          aria-label="Atlas"
          :aria-pressed="hub"
          :class="`absolute top-[-29px] left-[-49px] h-[58px] w-[98px] rounded-xl p-0.5 outline-none ${hub ? 'ring-2 ring-ring' : ''}`"
          @click="hub = !hub"
        >
          <Card :elevation="hub ? 'floating' : 'raised'" class="size-full items-center justify-center gap-0 py-0">
            <span class="font-serif text-[19px] leading-none tracking-tight">Atlas</span>
          </Card>
        </button>

        <Button
          v-for="d in depts"
          :key="`n-${d.id}`"
          type="button"
          :variant="active === d.id ? 'secondary' : 'outline'"
          size="icon-sm"
          elevation="raised"
          :aria-label="d.label"
          class="absolute z-10 -translate-x-1/2 -translate-y-1/2"
          :style="{ left: `${d.node[0]}px`, top: `${d.node[1]}px` }"
          @click="pick(d.id)"
        >
          <AgentAvatar :seed="d.id" :color="d.color" :size="13" :tile="false" />
        </Button>
      </div>

      <div class="absolute top-4 left-4 flex items-center gap-2">
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <Button variant="outline" size="sm">
              <Avatar size="sm">
                <AvatarFallback>{{ org.initials }}</AvatarFallback>
              </Avatar>
              {{ org.name }}
              <Icon name="chevronDown" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent class="w-64" elevation="floating">
            <template v-for="(group, i) in orgMenu" :key="group[0].id">
              <DropdownMenuSeparator v-if="i > 0" />
              <DropdownMenuGroup>
                <DropdownMenuItem v-for="item in group" :key="item.id" @select="item.id === 'shortcuts' && (shortcuts = true)">
                  <Icon :name="item.icon" />
                  {{ item.label }}
                  <DropdownMenuShortcut v-if="item.keys">
                    <KbdGroup><Kbd v-for="k in item.keys" :key="k">{{ k }}</Kbd></KbdGroup>
                  </DropdownMenuShortcut>
                </DropdownMenuItem>
              </DropdownMenuGroup>
            </template>
          </DropdownMenuContent>
        </DropdownMenu>
        <Button variant="secondary" size="sm" elevation="raised">
          <Pixels :w="plantHead.w" :h="plantHead.h" :rects="plantHead.rects" class="h-3 w-3.5" />
          Upgrade
        </Button>
      </div>

      <div class="absolute top-4 right-3 flex items-center gap-1.5 lg:right-[485px]">
        <Button variant="ghost" size="icon-xs" aria-label="Search" @click="palette = true"><Icon name="search" /></Button>
        <Popover>
          <PopoverTrigger as-child>
            <Button variant="ghost" size="icon-xs" aria-label="Map"><Icon name="map" /></Button>
          </PopoverTrigger>
          <PopoverContent align="end" class="w-72">
            <PopoverHeader><PopoverTitle>Roadmap</PopoverTitle></PopoverHeader>
            <ol class="flex flex-col gap-3">
              <li v-for="(s, i) in roadmapStages" :key="s.title" class="flex gap-3">
                <span class="font-mono text-xs text-muted-foreground">{{ i + 1 }}</span>
                <div>
                  <div class="text-sm font-medium">{{ s.title }}</div>
                  <div class="text-xs text-muted-foreground">{{ s.note }}</div>
                </div>
              </li>
            </ol>
          </PopoverContent>
        </Popover>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon-xs" aria-label="Theme"><Icon name="sun" /></Button>
          </TooltipTrigger>
          <TooltipContent>Theme follows the viewer</TooltipContent>
        </Tooltip>
        <Button variant="outline" size="sm" @click="taskDialog = true">
          <Icon name="plus" />
          New task
        </Button>
        <Button variant="outline" size="icon-sm" class="lg:hidden" aria-label="Open panel" @click="emit('open-panel')">
          <Icon name="message" />
        </Button>
      </div>

      <Popover>
        <PopoverTrigger as-child>
          <Button variant="outline" size="icon-lg" elevation="raised" aria-label="Notifications" class="absolute bottom-4 left-4">
            <Icon name="bell" />
          </Button>
        </PopoverTrigger>
        <PopoverContent side="top" align="start" class="w-80">
          <PopoverHeader class="flex-row items-center justify-between">
            <PopoverTitle>Notifications</PopoverTitle>
            <Button variant="outline" size="xs">Desktop alerts</Button>
          </PopoverHeader>
          <div class="py-6 text-center text-sm text-muted-foreground">All caught up!</div>
        </PopoverContent>
      </Popover>

      <Card data-nopan elevation="raised" class="absolute right-3 bottom-4 flex-row items-center gap-0.5 p-1 py-1 lg:right-[485px]">
        <Button variant="ghost" size="icon-xs" aria-label="Reset view" @click="reset"><Icon name="home" /></Button>
        <span class="w-12 text-center font-mono text-xs">{{ zoom }}%</span>
        <Button variant="ghost" size="icon-xs" aria-label="Zoom in" :disabled="zoom >= 160" @click="step(10)"><Icon name="plus" /></Button>
        <Button variant="ghost" size="icon-xs" aria-label="Zoom out" :disabled="zoom <= 60" @click="step(-10)"><Icon name="minus" /></Button>
        <Button variant="ghost" size="icon-xs" aria-label="Shortcuts" @click="shortcuts = true"><Icon name="keyboard" /></Button>
      </Card>

      <CommandDialog v-model:open="palette" title="Search" description="Search the workspace">
        <CommandInput :placeholder="palettePlaceholder" />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Commands">
            <CommandItem v-for="c in paletteCommands" :key="c.id" :value="c.label" @select="runCommand(c.id)">
              <Icon :name="c.icon" />
              {{ c.label }}
              <CommandShortcut>
                <KbdGroup><Kbd v-for="k in c.keys" :key="k">{{ k }}</Kbd></KbdGroup>
              </CommandShortcut>
            </CommandItem>
          </CommandGroup>
          <CommandGroup heading="Departments">
            <template v-for="id in paletteDepartments" :key="id">
              <CommandItem v-if="deptOf(id)" :value="deptOf(id)!.label" @select="runDept(id)">
                <AgentAvatar :seed="id" :color="deptOf(id)!.color" :size="16" :tile="false" />
                {{ deptOf(id)!.label }}
              </CommandItem>
            </template>
          </CommandGroup>
          <CommandGroup heading="Workspaces">
            <CommandItem v-for="w in paletteWorkspaces" :key="w" :value="w" @select="palette = false">
              <Icon name="globe" />
              {{ w }}
            </CommandItem>
          </CommandGroup>
        </CommandList>
        <div class="flex items-center justify-end gap-4 border-t border-border px-3 py-2 text-xs text-muted-foreground">
          <span class="flex items-center gap-1.5"><Kbd>↵</Kbd> Select</span>
          <span class="flex items-center gap-1.5"><Kbd>↑↓</Kbd> Navigate</span>
          <span class="flex items-center gap-1.5"><Kbd>Esc</Kbd> Close</span>
        </div>
      </CommandDialog>

      <Dialog v-model:open="shortcuts">
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Keyboard shortcuts</DialogTitle>
            <DialogDescription>Move around without the mouse.</DialogDescription>
          </DialogHeader>
          <ul class="flex flex-col gap-2">
            <li v-for="s in shortcutList" :key="s.label" class="flex items-center justify-between text-sm">
              {{ s.label }}
              <KbdGroup><Kbd v-for="k in s.keys" :key="k">{{ k }}</Kbd></KbdGroup>
            </li>
          </ul>
        </DialogContent>
      </Dialog>

      <Dialog v-model:open="taskDialog">
        <DialogContent>
          <form class="flex flex-col gap-4" @submit.prevent="createTask">
            <DialogHeader>
              <DialogTitle>New task</DialogTitle>
              <DialogDescription>Describe the work and the right agent picks it up.</DialogDescription>
            </DialogHeader>
            <Input v-model="taskName" placeholder="Task title" />
            <DialogFooter>
              <Button type="button" variant="outline" @click="taskDialog = false">Cancel</Button>
              <Button type="submit" :disabled="!taskName.trim()">Create</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  </TooltipProvider>
</template>

<script setup lang="ts">
import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item";
import { company, org } from "../data";
import Icon from "./Icon.vue";

const icons = { domain: "globe", email: "mail", revenue: "card", hosting: "server" } as const;
const label = "mt-6 mb-2 text-[13px] text-muted-foreground";
</script>

<template>
  <div class="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-4">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-medium">{{ org.name }}</h2>
      <Button type="button" variant="ghost" size="icon-xs" aria-label="Edit">
        <Icon name="pencil" class="size-4" />
      </Button>
    </div>
    <div :class="label">Stack</div>
    <Card class="gap-0 py-0">
      <ItemGroup>
        <div v-for="(row, i) in company.stack" :key="row.title">
          <ItemSeparator v-if="i > 0" class="my-0" />
          <Item>
            <ItemMedia variant="icon"><Icon :name="icons[row.icon]" /></ItemMedia>
            <ItemContent>
              <ItemTitle>{{ row.title }}</ItemTitle>
              <ItemDescription>{{ row.note }}</ItemDescription>
            </ItemContent>
            <Icon name="chevronRight" class="size-4 text-muted-foreground" />
          </Item>
        </div>
      </ItemGroup>
    </Card>
    <div :class="label">Important links</div>
    <Card class="gap-0 py-0">
      <ItemGroup>
        <div v-for="(row, i) in company.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>
            <Icon name="chevronRight" class="size-4 text-muted-foreground" />
          </Item>
        </div>
      </ItemGroup>
    </Card>
    <div :class="label">Agents</div>
    <Card class="gap-0 py-0">
      <ItemGroup>
        <div v-for="(row, i) in company.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>
</template>

<script setup lang="ts">
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { atlasAgent, composerMenu, composerPlaceholder, plantHead } from "../data";
import Icon from "./Icon.vue";
import Pixels from "./Pixels.vue";

const emit = defineEmits<{ (e: "send", text: string): void; (e: "clear"): void }>();

function submit(m: { text: string }) {
  if (m.text.trim()) emit("send", m.text.trim());
}
</script>

<template>
  <TooltipProvider>
  <div class="px-2 pb-2">
    <PromptInput @submit="submit">
      <PromptInputHeader>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button type="button" variant="outline" size="sm">
              <Pixels :w="plantHead.w" :h="plantHead.h" :rects="plantHead.rects" class="h-3 w-3.5" />
              {{ atlasAgent.name }}
            </Button>
          </TooltipTrigger>
          <TooltipContent>Atlas agent</TooltipContent>
        </Tooltip>
      </PromptInputHeader>
      <PromptInputBody>
        <PromptInputTextarea :placeholder="composerPlaceholder" />
      </PromptInputBody>
      <PromptInputFooter>
        <PromptInputTools>
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <Button type="button" variant="ghost" size="icon-xs" aria-label="Add"><Icon name="plus" /></Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent side="top" align="start" elevation="floating">
              <DropdownMenuItem v-for="m in composerMenu" :key="m.id" @select="m.id === 'clear' && emit('clear')">
                <Icon :name="m.icon" />
                {{ m.label }}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </PromptInputTools>
        <PromptInputSubmit size="icon-sm" variant="secondary" elevation="raised">
          <Icon name="arrowUp" />
        </PromptInputSubmit>
      </PromptInputFooter>
    </PromptInput>
  </div>
  </TooltipProvider>
</template>

<script setup lang="ts">
import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Message, MessageContent, MessageHeader } from "@/components/ai/message";
import { Suggestion, Suggestions } from "@/components/ai/suggestion";
import { Button } from "@/components/ui/button";
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item";
import { type ChatMessage, org, plantHead, suggested, type TaskRow, thread } from "../data";
import Icon from "./Icon.vue";
import Pixels from "./Pixels.vue";
import Status from "./Status.vue";

defineProps<{ view: "chat" | "home" | "thread"; messages: ChatMessage[]; tasks: TaskRow[] }>();
const emit = defineEmits<{
  (e: "view", v: "chat" | "home" | "thread"): void;
  (e: "send", text: string): void;
  (e: "reset"): void;
}>();
</script>

<template>
  <div v-if="view === 'home'" class="flex min-h-0 flex-1 flex-col px-5 pb-3">
    <div class="mt-3 [mask-image:linear-gradient(to_bottom,black,transparent)]">
      <Item variant="outline" size="sm">
        <ItemMedia variant="icon"><Icon name="map" /></ItemMedia>
        <ItemContent>
          <ItemTitle>Open the company roadmap</ItemTitle>
          <ItemDescription>General</ItemDescription>
        </ItemContent>
      </Item>
    </div>
    <div class="flex justify-center py-3">
      <Button type="button" variant="ghost" size="xs" @click="emit('view', 'chat')">
        <Icon name="arrowUp" />
        Back to chat
      </Button>
    </div>
    <div class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
      <h2 class="text-2xl font-normal">Good evening, {{ org.user }}</h2>
      <Button type="button" variant="ghost" size="xs">
        <Icon name="map" />
        Roadmap
      </Button>
    </div>
    <div class="mb-2 text-xs text-muted-foreground">Tasks</div>
    <div class="flex flex-col">
      <div v-for="t in tasks" :key="t.id" class="flex items-center gap-3 border-b border-border py-3 last:border-b-0">
        <AgentAvatar :seed="t.agent" :color="t.color" :size="20" :tile="false" />
        <span class="text-[15px]">{{ t.name }}</span>
        <span class="ml-auto font-mono text-xs text-muted-foreground">{{ t.age }}</span>
        <Status :status="t.status" />
      </div>
    </div>
    <div class="mt-3 flex items-center gap-2">
      <span class="text-xs text-muted-foreground">Suggested</span>
      <Suggestions class="min-w-0">
        <Suggestion v-for="s in suggested" :key="s" :suggestion="s" @click="emit('send', $event)" />
      </Suggestions>
    </div>
  </div>

  <div v-else class="flex min-h-0 flex-1 flex-col">
    <div class="flex justify-end px-3 pt-3">
      <Button type="button" variant="ghost" size="icon-xs" aria-label="Toggle thread" @click="emit('view', view === 'thread' ? 'chat' : 'thread')">
        <Icon name="more" />
      </Button>
    </div>
    <div v-if="view === 'thread'" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pb-3">
      <Message from="assistant">
        <MessageContent>
          <p>{{ thread.intro[0] }}</p>
          <ol class="my-2 list-decimal pl-5">
            <li>{{ thread.intro[1] }}</li>
            <li>{{ thread.intro[2] }}</li>
          </ol>
          <p>{{ thread.intro[3] }}</p>
        </MessageContent>
      </Message>
      <Message from="user"><MessageContent>{{ thread.question }}</MessageContent></Message>
      <Message from="assistant">
        <MessageHeader>
          <Pixels :w="plantHead.w" :h="plantHead.h" :rects="plantHead.rects" class="h-3 w-3.5" />
          Atlas
        </MessageHeader>
        <MessageContent>{{ thread.answer }}</MessageContent>
      </Message>
      <div class="flex flex-col gap-2">
        <Item v-for="a in thread.actions" :key="a.id" variant="outline" size="sm">
          <ItemMedia><AgentAvatar :seed="a.agent" :color="a.color" :size="20" :tile="false" /></ItemMedia>
          <ItemContent>
            <ItemTitle>{{ a.title }}</ItemTitle>
            <ItemDescription>{{ a.dept }}</ItemDescription>
          </ItemContent>
        </Item>
      </div>
      <div class="flex justify-center">
        <Button type="button" variant="outline" size="icon-xs" aria-label="Scroll to latest"><Icon name="chevronDown" /></Button>
      </div>
    </div>
    <div v-else-if="messages.length === 0" class="flex flex-1 flex-col items-center justify-center gap-2 px-10 text-center">
      <svg viewBox="0 0 24 24" class="mb-2 size-7 text-muted-foreground" fill="currentColor" aria-hidden="true">
        <circle cx="12" cy="12" r="1.4" />
        <circle cx="12" cy="6" r="1" />
        <circle cx="12" cy="18" r="1" />
        <circle cx="6" cy="12" r="1" />
        <circle cx="18" cy="12" r="1" />
      </svg>
      <h2 class="text-[15px] font-semibold">What should we work on?</h2>
      <p class="text-sm text-muted-foreground">
        Bring me an idea, a problem, or a goal. I'll help turn it into the next useful step.
      </p>
    </div>
    <div v-else class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pb-3">
      <Message v-for="m in messages" :key="m.id" :from="m.from">
        <MessageContent>{{ m.text }}</MessageContent>
      </Message>
      <div>
        <Button type="button" variant="ghost" size="xs" @click="emit('reset')">
          <Icon name="home" />
          Back to home
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ArchiveIcon,
  ArrowUpIcon,
  BellIcon,
  BookOpenIcon,
  CheckIcon,
  ChevronDownIcon,
  ChevronRightIcon,
  CircleDollarSignIcon,
  CircleHelpIcon,
  CreditCardIcon,
  GlobeIcon,
  HomeIcon,
  InfoIcon,
  KeyboardIcon,
  LayoutGridIcon,
  LightbulbIcon,
  LinkIcon,
  ListIcon,
  MailIcon,
  MessageSquareIcon,
  MinusIcon,
  MoreHorizontalIcon,
  PaperclipIcon,
  PencilIcon,
  PlusIcon,
  SearchIcon,
  ServerIcon,
  SettingsIcon,
  SunIcon,
  Trash2Icon,
  UploadIcon,
  UserIcon,
  XIcon,
} from "@lucide/vue";

const icons = {
  search: SearchIcon,
  map: BookOpenIcon,
  sun: SunIcon,
  plus: PlusIcon,
  chevronDown: ChevronDownIcon,
  chevronRight: ChevronRightIcon,
  home: HomeIcon,
  minus: MinusIcon,
  keyboard: KeyboardIcon,
  bell: BellIcon,
  more: MoreHorizontalIcon,
  arrowUp: ArrowUpIcon,
  upload: UploadIcon,
  grid: LayoutGridIcon,
  list: ListIcon,
  info: InfoIcon,
  close: XIcon,
  pencil: PencilIcon,
  globe: GlobeIcon,
  mail: MailIcon,
  card: CreditCardIcon,
  server: ServerIcon,
  message: MessageSquareIcon,
  settings: SettingsIcon,
  lightbulb: LightbulbIcon,
  plug: LinkIcon,
  gift: UserIcon,
  database: ServerIcon,
  coins: CircleDollarSignIcon,
  book: BookOpenIcon,
  users: UserIcon,
  lifebuoy: CircleHelpIcon,
  archive: ArchiveIcon,
  paperclip: PaperclipIcon,
  listChecks: ListIcon,
  trash: Trash2Icon,
  check: CheckIcon,
} as const;

defineProps<{ name: keyof typeof icons }>();
</script>

<template>
  <component :is="icons[name]" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { library } from "../data";
import Icon from "./Icon.vue";
import Pixels from "./Pixels.vue";

const banner = ref(true);
const view = ref("grid");
const count = (n: number) => `${n} ${n === 1 ? "file" : "files"}`;
const pickView = (v: unknown) => {
  if (typeof v === "string" && v) view.value = v;
};
</script>

<template>
  <div class="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-4">
    <div class="flex items-center justify-between">
      <h2 class="flex items-center gap-2 text-lg font-medium">
        Library
        <Icon name="info" class="size-3.5 text-muted-foreground" />
      </h2>
      <div class="flex items-center gap-2">
        <Button type="button" variant="ghost" size="icon-xs" aria-label="Upload">
          <Icon name="upload" class="size-4" />
        </Button>
        <ToggleGroup type="single" variant="segmented" :model-value="view" aria-label="View" @update:model-value="pickView">
          <ToggleGroupItem value="grid" aria-label="Grid"><Icon name="grid" class="size-3.5" /></ToggleGroupItem>
          <ToggleGroupItem value="list" aria-label="List"><Icon name="list" class="size-3.5" /></ToggleGroupItem>
        </ToggleGroup>
      </div>
    </div>
    <InputGroup class="mt-3">
      <InputGroupAddon><Icon name="search" /></InputGroupAddon>
      <InputGroupInput placeholder="Search files" />
    </InputGroup>
    <Item v-if="banner" variant="muted" size="sm" class="mt-3 items-start">
      <ItemMedia variant="icon"><Icon name="message" /></ItemMedia>
      <ItemContent>
        <ItemTitle>{{ library.banner.title }}</ItemTitle>
        <ItemDescription class="line-clamp-none">{{ library.banner.body }}</ItemDescription>
        <div class="pt-2">
          <Button type="button" variant="outline" size="xs" elevation="raised">{{ library.banner.action }}</Button>
        </div>
      </ItemContent>
      <ItemActions>
        <Button type="button" variant="ghost" size="icon-xs" aria-label="Dismiss" @click="banner = false">
          <Icon name="close" class="size-3.5" />
        </Button>
      </ItemActions>
    </Item>
    <div v-if="view === 'grid'" class="mt-3 grid grid-cols-2 gap-3">
      <Card v-for="f in library.folders" :key="f.id" class="gap-0 overflow-hidden py-0">
        <div class="aspect-[4/3] overflow-hidden border-b border-border">
          <Pixels v-if="f.kind === 'scene' && f.rects" :w="80" :h="60" :rects="f.rects" class="size-full" />
          <div v-else class="grid size-full grid-cols-2 gap-2 bg-muted p-2">
            <div v-for="n in 4" :key="n" class="grid place-items-center rounded-md border border-border bg-card">
              <span v-if="n === 2" class="h-4 w-3 rounded-[2px] bg-muted-foreground" />
            </div>
          </div>
        </div>
        <div class="px-3 py-2.5">
          <div class="text-[13px] font-medium">{{ f.name }}</div>
          <div class="text-xs text-muted-foreground">{{ count(f.files) }}</div>
        </div>
      </Card>
    </div>
    <Card v-else class="mt-3 gap-0 py-0">
      <Item v-for="f in library.folders" :key="f.id" size="sm">
        <ItemMedia variant="image">
          <Pixels v-if="f.kind === 'scene' && f.rects" :w="80" :h="60" :rects="f.rects" class="size-full" />
          <div v-else class="grid size-full grid-cols-2 gap-2 bg-muted p-2">
            <div v-for="n in 4" :key="n" class="grid place-items-center rounded-md border border-border bg-card" />
          </div>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>{{ f.name }}</ItemTitle>
          <ItemDescription>{{ count(f.files) }}</ItemDescription>
        </ItemContent>
      </Item>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { InsetPanel, InsetPanelBody, InsetPanelHeader } from "@/components/ui/inset-panel";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type ChatMessage, reply, type TabId, type TaskRow, tabs } from "../data";
import HomeTab from "./HomeTab.vue";
import CompanyTab from "./CompanyTab.vue";
import Composer from "./Composer.vue";
import LibraryTab from "./LibraryTab.vue";
import TasksTab from "./TasksTab.vue";

const tab = defineModel<TabId>("tab", { required: true });
const messages = defineModel<ChatMessage[]>("messages", { required: true });
defineProps<{ tasks: TaskRow[] }>();

const view = ref<"chat" | "home" | "thread">("chat");
function send(text: string) {
  const id = messages.value.length + 1;
  messages.value = [...messages.value, { id, from: "user", text }, { id: id + 1, from: "assistant", text: reply }];
  view.value = "chat";
  tab.value = "atlas";
}
function reset() {
  messages.value = [];
  view.value = "home";
}
</script>

<template>
  <Tabs v-model="tab" class="size-full gap-0">
    <InsetPanel elevation="floating" class="h-full">
      <InsetPanelHeader class="px-5 py-3">
        <TabsList variant="pills">
          <TabsTrigger v-for="t in tabs" :key="t.id" :value="t.id">{{ t.label }}</TabsTrigger>
        </TabsList>
      </InsetPanelHeader>
      <InsetPanelBody class="flex flex-col">
        <TabsContent value="atlas" class="flex min-h-0 flex-1 flex-col">
          <HomeTab :view="view" :messages="messages" :tasks="tasks" @view="view = $event" @send="send" @reset="reset" />
        </TabsContent>
        <TabsContent value="tasks" class="flex min-h-0 flex-1 flex-col"><TasksTab :tasks="tasks" /></TabsContent>
        <TabsContent value="company" class="flex min-h-0 flex-1 flex-col"><CompanyTab /></TabsContent>
        <TabsContent value="library" class="flex min-h-0 flex-1 flex-col"><LibraryTab /></TabsContent>
        <Composer v-if="tab !== 'library'" @send="send" @clear="reset" />
      </InsetPanelBody>
    </InsetPanel>
  </Tabs>
</template>

<script setup lang="ts">
import type { Rect } from "../data";

/** Decorative pixel art drawn from the rect lists in data.ts. */
defineProps<{ w: number; h: number; rects: Rect[] }>();
</script>

<template>
  <svg
    :viewBox="`0 0 ${w} ${h}`"
    shape-rendering="crispEdges"
    preserveAspectRatio="xMidYMid slice"
    aria-hidden="true"
  >
    <rect v-for="(r, i) in rects" :key="i" :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.c" />
  </svg>
</template>

<script setup lang="ts">
/** Task status: spinning ring while running, green dot when done. */
defineProps<{ status: "running" | "done" }>();
</script>

<template>
  <span v-if="status === 'done'" class="size-1.5 rounded-full bg-success" role="img" aria-label="Done" />
  <svg v-else viewBox="0 0 16 16" class="size-3.5 animate-spin text-muted-foreground" role="img" aria-label="Running">
    <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="2" stroke-opacity="0.3" />
    <path d="M8 2a6 6 0 0 1 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  </svg>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { AgentAvatar } from "@/components/ai/agent-avatar";
import { Checkbox } from "@/components/ui/checkbox";
import { suggested, type TaskRow } from "../data";
import Status from "./Status.vue";

const props = defineProps<{ tasks: TaskRow[] }>();
const label = "mt-5 mb-1 text-[13px] text-muted-foreground";
const picked = ref<string[]>([]);
const toggle = (id: string, on: boolean | "indeterminate") => {
  picked.value = on === true ? [...picked.value, id] : picked.value.filter((x) => x !== id);
};
const selectAll = (on: boolean | "indeterminate") => {
  picked.value = on === true ? props.tasks.map((t) => t.id) : [];
};
</script>

<template>
  <div class="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-4">
    <h2 class="text-lg font-medium">Tasks</h2>
    <div class="mt-3 flex items-center gap-3 text-[13px] text-muted-foreground">
      <Checkbox
        aria-label="Select all"
        :model-value="picked.length === tasks.length ? true : picked.length > 0 ? 'indeterminate' : false"
        @update:model-value="selectAll"
      />
      Select all
    </div>
    <div :class="label">Tasks</div>
    <div class="flex flex-col">
      <div v-for="t in tasks" :key="t.id" class="flex items-center gap-3 border-b border-border py-3 last:border-b-0">
        <Checkbox :aria-label="t.name" :model-value="picked.includes(t.id)" @update:model-value="toggle(t.id, $event)" />
        <Status :status="t.status" />
        <AgentAvatar :seed="t.agent" :color="t.color" :size="20" :tile="false" />
        <span class="text-[15px]">{{ t.name }}</span>
      </div>
    </div>
    <div :class="label">Suggested Next</div>
    <div class="flex flex-col">
      <div v-for="s in suggested" :key="s" class="flex items-center gap-3 py-2.5">
        <svg viewBox="0 0 16 16" class="size-3.5 text-muted-foreground" aria-hidden="true">
          <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="2 2.4" />
        </svg>
        <span class="text-[15px]">{{ s }}</span>
      </div>
    </div>
  </div>
</template>

// Sample data for the Atlas agent canvas example. Shared by all three ports. Coordinates are CSS px relative to the hub centre.

export const org = { name: "Acme Labs", initials: "AL", user: "Sam" };

export const tabs = [
  { id: "atlas", label: "Atlas" },
  { id: "tasks", label: "Tasks" },
  { id: "company", label: "Company" },
  { id: "library", label: "Library" },
] as const;
export type TabId = (typeof tabs)[number]["id"];

export const composerPlaceholder = "Ask Atlas anything about your company...";
export const atlasAgent = {
  id: "atlas",
  name: "Atlas",
  color: "var(--warning)",
};

// ---------------------------------------------------------------- pixel art (own drawing, rects only)

const plantRows = [
  "....y.yyy.y....",
  "..y.yyyyyyy.y..",
  "...yyybbbyyy...",
  "..yyybbbbbyyy..",
  "..yyybbbbbyyy..",
  "..yyybbbbbyyy..",
  "...yyybbbyyy...",
  "..y.yyyyyyy.y..",
  "....y.yyy.y....",
  ".......d.......",
  ".......d.......",
  "....gg.d.......",
  "...ggggd.gg....",
  ".....ggd.gggg..",
  ".......dgggg...",
  ".......d.......",
  "..gg...d.......",
  "..ggggdd.......",
  "....ggd........",
  ".......d.......",
  ".......d.......",
  ".......d.......",
];

const plantColors: Record<string, string> = {
  y: "var(--warning)",
  b: "color-mix(in srgb, var(--warning) 35%, var(--background))",
  g: "var(--success)",
  d: "color-mix(in srgb, var(--success) 60%, var(--background))",
};

export type Rect = { x: number; y: number; w: number; h: number; c: string };

function rowsToRects(rows: string[]): Rect[] {
  const out: Rect[] = [];
  rows.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      const c = plantColors[ch];
      if (c) out.push({ x, y, w: 1, h: 1, c });
    });
  });
  return out;
}

export const plant = {
  w: 15,
  h: plantRows.length,
  rects: rowsToRects(plantRows),
};
export const plantHead = {
  w: 11,
  h: 9,
  rects: rowsToRects(plantRows.slice(0, 9))
    .map((r) => ({ ...r, x: r.x - 2 }))
    .filter((r) => r.x >= 0 && r.x < 11),
};

/** Deterministic pixel skyline used for the library covers (own scenes, no external art). */
function scene(seed: number, sky: [string, string], accent: string): Rect[] {
  let s = seed;
  const rnd = () => {
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 4294967296;
  };
  const out: Rect[] = [
    { x: 0, y: 0, w: 80, h: 30, c: sky[0] },
    { x: 0, y: 30, w: 80, h: 30, c: sky[1] },
  ];
  for (let i = 0; i < 3; i++)
    out.push({
      x: Math.floor(rnd() * 60),
      y: 6 + Math.floor(rnd() * 14),
      w: 12 + Math.floor(rnd() * 10),
      h: 4,
      c: "color-mix(in srgb, var(--foreground) 70%, var(--card))",
    });
  let x = 0;
  while (x < 80) {
    const w = 8 + Math.floor(rnd() * 8);
    const h = 14 + Math.floor(rnd() * 26);
    out.push({
      x,
      y: 60 - h,
      w,
      h,
      c: "color-mix(in srgb, var(--background) 80%, var(--card))",
    });
    for (let wy = 60 - h + 3; wy < 57; wy += 5)
      for (let wx = x + 2; wx < x + w - 2; wx += 4)
        if (rnd() > 0.45) out.push({ x: wx, y: wy, w: 2, h: 2, c: accent });
    x += w + 1;
  }
  return out;
}

// ---------------------------------------------------------------- canvas graph

export type Tile = { x: number; y: number };
export type Dept = {
  id: string;
  label: string;
  /** token colour of the agent glyph / tint */
  color: string;
  /** solid tint of the plate (color-mix into --card) or null for the neutral label plate */
  tint: string | null;
  node: [number, number];
  /** dashed elbow from the node to the plate */
  path: string;
  end: [number, number];
  plate: { x: number; y: number; w: number; h: number };
  thumbs: Tile[];
  /** engineering: the plate is a card holding a 3x2 grid */
  grid?: boolean;
};

const D = 155;
const tint = (c: string) => `color-mix(in srgb, ${c} 16%, var(--card))`;
const pink = "color-mix(in srgb, var(--chart-5) 55%, var(--chart-4))";
const orange = "color-mix(in srgb, var(--chart-5) 50%, var(--chart-3))";
const teal = "color-mix(in srgb, var(--chart-1) 55%, var(--chart-2))";

export const RING = 219;
export const TILE = { w: 44, h: 32 };

export const depts: Dept[] = [
  {
    id: "support",
    label: "Support",
    color: pink,
    tint: null,
    node: [0, -RING],
    path: "M0 -219 V-290",
    end: [0, -290],
    plate: { x: -63, y: -318, w: 126, h: 28 },
    thumbs: [],
  },
  {
    id: "operations",
    label: "Operations",
    color: orange,
    tint: tint(orange),
    node: [D, -D],
    path: `M${D} -${D} H297 L340 -197`,
    end: [340, -197],
    plate: { x: 275, y: -229, w: 128, h: 32 },
    thumbs: [
      { x: 403, y: -261 },
      { x: 447, y: -261 },
      { x: 403, y: -229 },
    ],
  },
  {
    id: "finance",
    label: "Finance",
    color: "var(--chart-3)",
    tint: null,
    node: [RING, 0],
    path: "M219 0 H448",
    end: [448, 0],
    plate: { x: 448, y: -14, w: 130, h: 28 },
    thumbs: [],
  },
  {
    id: "legal",
    label: "Legal",
    color: teal,
    tint: null,
    node: [D, D],
    path: `M${D} ${D} H297 L340 198`,
    end: [340, 198],
    plate: { x: 277, y: 199, w: 126, h: 30 },
    thumbs: [],
  },
  {
    id: "engineering",
    label: "Engineering",
    color: "var(--chart-2)",
    tint: tint("var(--chart-2)"),
    node: [0, RING],
    path: "M0 219 V288",
    end: [0, 288],
    plate: { x: -65, y: 288, w: 131, h: 94 },
    thumbs: [],
    grid: true,
  },
  {
    id: "design",
    label: "Design",
    color: "var(--chart-4)",
    tint: tint("var(--chart-4)"),
    node: [-D, D],
    path: `M-${D} ${D} H-297 L-340 197`,
    end: [-340, 197],
    plate: { x: -405, y: 197, w: 130, h: 32 },
    thumbs: [
      { x: -447, y: 229 },
      { x: -403, y: 229 },
      { x: -447, y: 261 },
      { x: -403, y: 261 },
    ],
  },
  {
    id: "marketing",
    label: "Marketing",
    color: "var(--chart-5)",
    tint: tint("var(--chart-5)"),
    node: [-RING, 0],
    path: "M-219 0 H-445",
    end: [-445, 0],
    plate: { x: -572, y: -16, w: 127, h: 32 },
    thumbs: [
      { x: -616, y: -16 },
      { x: -660, y: 16 },
      { x: -616, y: 16 },
    ],
  },
  {
    id: "sales",
    label: "Sales",
    color: "var(--chart-1)",
    tint: tint("var(--chart-1)"),
    node: [-D, -D],
    path: `M-${D} -${D} H-297 L-340 -197`,
    end: [-340, -197],
    plate: { x: -403, y: -229, w: 128, h: 32 },
    thumbs: [
      { x: -491, y: -261 },
      { x: -447, y: -261 },
      { x: -403, y: -261 },
      { x: -491, y: -229 },
      { x: -447, y: -229 },
    ],
  },
];

// ---------------------------------------------------------------- panel

export const tasks = [
  {
    id: "t1",
    name: "Draft landing copy",
    agent: "marketing",
    color: "var(--chart-2)",
    age: "13d",
    status: "running" as const,
  },
  {
    id: "t2",
    name: "Build app",
    agent: "engineering",
    color: "var(--chart-2)",
    age: "4mo",
    status: "done" as const,
  },
];

export const suggested = [
  "Build marketing website",
  "Define positioning",
  "Define brand voice",
  "Create launch post",
  "Incorporate LLC",
];

export const reply =
  "Got it. I'll break that down into tasks, hand them to the right department agents and report back here as soon as the first draft is ready.";

export type StackIcon = "domain" | "email" | "revenue" | "hosting";
export const company = {
  stack: [
    {
      icon: "domain",
      title: "Domain",
      note: "Connect your customer-facing domain",
    },
    { icon: "email", title: "Email", note: "Configure your email domain" },
    { icon: "revenue", title: "Revenue", note: "Connect billing" },
    { icon: "hosting", title: "Hosting", note: "Deployment provider" },
  ] as { icon: StackIcon; title: string; note: string }[],
  links: [
    { title: "App", note: "App, source, and deployment links." },
    {
      title: "Marketing Website",
      note: "Website, source, and deployment links.",
    },
  ],
  agents: [
    {
      id: "design",
      name: "Design Agent",
      note: "Design department agent.",
      color: "var(--chart-4)",
    },
    {
      id: "engineer",
      name: "Engineer",
      note: "Engineering department agent.",
      color: "var(--chart-2)",
    },
    {
      id: "marketing",
      name: "Marketing Agent",
      note: "Marketing department agent.",
      color: "var(--chart-5)",
    },
    {
      id: "sales",
      name: "Sales Agent",
      note: "Sales department agent.",
      color: "var(--chart-1)",
    },
    {
      id: "ops",
      name: "Ops Agent",
      note: "Operations department agent.",
      color: orange,
    },
  ],
};

export type Folder = {
  id: string;
  name: string;
  files: number;
  kind: "grid" | "scene";
  rects?: Rect[];
};
export const library = {
  banner: {
    title: "Bring over context from other tools",
    body: "Copy a prompt that turns old chats, decisions, and working preferences into import-ready Markdown.",
    action: "Copy prompt",
  },
  folders: [
    { id: "general", name: "General", files: 2, kind: "grid" },
    {
      id: "engineering",
      name: "Engineering",
      files: 1,
      kind: "scene",
      rects: scene(
        11,
        [
          "color-mix(in srgb, var(--chart-2) 45%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 22%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
    {
      id: "sales",
      name: "Sales",
      files: 0,
      kind: "scene",
      rects: scene(
        23,
        [
          "color-mix(in srgb, var(--chart-1) 40%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 25%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
    {
      id: "marketing",
      name: "Marketing",
      files: 0,
      kind: "scene",
      rects: scene(
        37,
        [
          "color-mix(in srgb, var(--chart-4) 45%, var(--card))",
          "color-mix(in srgb, var(--chart-5) 30%, var(--card))",
        ],
        "var(--chart-3)",
      ),
    },
    {
      id: "design",
      name: "Design",
      files: 0,
      kind: "scene",
      rects: scene(
        51,
        [
          "color-mix(in srgb, var(--chart-4) 35%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 30%, var(--card))",
        ],
        "var(--chart-4)",
      ),
    },
    {
      id: "operations",
      name: "Operations",
      files: 0,
      kind: "scene",
      rects: scene(
        67,
        [
          "color-mix(in srgb, var(--chart-3) 35%, var(--card))",
          "color-mix(in srgb, var(--chart-5) 25%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
  ] as Folder[],
};

export type ChatMessage = {
  id: number;
  from: "user" | "assistant";
  text: string;
};

// ---------------------------------------------------------------- overlays, menus and thread (shared content)

export type MenuIcon =
  | "settings"
  | "globe"
  | "lightbulb"
  | "plug"
  | "gift"
  | "database"
  | "coins"
  | "keyboard"
  | "book"
  | "users"
  | "lifebuoy"
  | "plus"
  | "map"
  | "home"
  | "archive"
  | "paperclip"
  | "listChecks"
  | "trash";

export const orgMenu: {
  id: string;
  label: string;
  icon: MenuIcon;
  keys?: string[];
}[][] = [
  [
    {
      id: "settings",
      label: "Settings",
      icon: "settings",
      keys: ["⌘", "⌥", "S"],
    },
    { id: "domains", label: "Domains", icon: "globe" },
    { id: "skills", label: "Skills", icon: "lightbulb" },
    { id: "integrations", label: "Integrations", icon: "plug" },
    { id: "referrals", label: "Referrals", icon: "gift" },
    { id: "database", label: "Database", icon: "database" },
    { id: "billing", label: "Billing & Usage", icon: "coins" },
  ],
  [
    { id: "shortcuts", label: "Keyboard Shortcuts", icon: "keyboard" },
    { id: "docs", label: "Docs", icon: "book" },
    { id: "community", label: "Join community", icon: "users" },
    { id: "support", label: "Support Request", icon: "lifebuoy" },
    { id: "new-company", label: "Create new company", icon: "plus" },
  ],
];

export const paletteCommands: {
  id: string;
  label: string;
  icon: MenuIcon;
  keys: string[];
}[] = [
  { id: "create-task", label: "Create task", icon: "plus", keys: ["C"] },
  {
    id: "overview",
    label: "Go to overview",
    icon: "home",
    keys: ["⌘", "⌥", "O"],
  },
  { id: "roadmap", label: "Open roadmap", icon: "map", keys: ["⌘", "⌥", "R"] },
  {
    id: "archived",
    label: "View archived tasks",
    icon: "archive",
    keys: ["⌘", "⌥", "A"],
  },
  {
    id: "settings",
    label: "Open settings",
    icon: "settings",
    keys: ["⌘", "⌥", "S"],
  },
];
export const paletteDepartments = [
  "operations",
  "engineering",
  "design",
  "marketing",
  "sales",
];
export const paletteWorkspaces = ["App", "Marketing Website"];
export const palettePlaceholder =
  "Search files, tasks, workspaces, or @ a department...";

export const shortcutList: { label: string; keys: string[] }[] = [
  { label: "Open command palette", keys: ["⌘", "K"] },
  { label: "Create task", keys: ["C"] },
  { label: "Open settings", keys: ["⌘", "⌥", "S"] },
  { label: "Go to overview", keys: ["⌘", "⌥", "O"] },
  { label: "Open roadmap", keys: ["⌘", "⌥", "R"] },
  { label: "Pan the canvas", keys: ["Drag"] },
];

export const roadmapStages = [
  { title: "Incorporate", note: "Entity, bank account and domain" },
  { title: "Build", note: "First app and landing page" },
  { title: "Launch", note: "Outreach, content and first customers" },
];

export const composerMenu: {
  id: string;
  label: string;
  icon: MenuIcon;
}[] = [
  { id: "attach", label: "Attach files", icon: "paperclip" },
  { id: "plan", label: "Turn on plan mode", icon: "listChecks" },
  { id: "clear", label: "Clear chat", icon: "trash" },
];

export type TaskRow = {
  id: string;
  name: string;
  agent: string;
  color: string;
  age: string;
  status: "running" | "done";
};

export const thread = {
  intro: [
    "Here is where Acme Labs stands today: the brand basics are in place, and two areas can move first.",
    "Brand and positioning, so every page and post sounds the same.",
    "Go-to-market, so your first customers hear from you this week.",
    "Want me to take one of them on now?",
  ],
  question: "Hey Atlas, what should I do next?",
  answer:
    "Based on what we have set up so far for Acme Labs, these are the areas you can start on next.",
  actions: [
    {
      id: "a1",
      title: "Build your first app or landing page",
      dept: "Engineering",
      agent: "engineering",
      color: "var(--chart-2)",
    },
    {
      id: "a2",
      title: "Incorporate your company",
      dept: "Operations",
      agent: "operations",
      color: "color-mix(in srgb, var(--chart-5) 50%, var(--chart-3))",
    },
    {
      id: "a3",
      title: "Start reaching out to potential customers",
      dept: "Sales",
      agent: "sales",
      color: "var(--chart-1)",
    },
    {
      id: "a4",
      title: "Open the company roadmap",
      dept: "General",
      agent: "general",
      color: "var(--chart-3)",
    },
  ],
};

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import { ElevationProvider } from "$lib/components/ui/elevation";
  import { type ChatMessage, type TabId, type TaskRow, tasks as seed } from "./data";
  import Canvas from "./svelte/Canvas.svelte";
  import Icon from "./svelte/Icon.svelte";
  import Panel from "./svelte/Panel.svelte";

  let tab = $state<TabId>("atlas");
  let messages = $state<ChatMessage[]>([]);
  let tasks = $state<TaskRow[]>(seed);
  let open = $state(false);

  function newTask(name: string) {
    tasks = [
      { id: `t${tasks.length + 1}-${name}`, name, agent: "atlas", color: "var(--warning)", age: "now", status: "running" },
      ...tasks,
    ];
    tab = "tasks";
    open = true;
  }
</script>

<ElevationProvider mode="layered">
  <div class="relative h-svh min-h-[560px] overflow-hidden bg-background text-foreground">
    <Canvas onNewTask={newTask} onOpenPanel={() => (open = true)} />
    <aside
      class="absolute top-2 right-2 bottom-2 z-20 w-[460px] max-w-[calc(100%-1rem)] lg:block {open ? 'block' : 'hidden'}"
    >
      <Panel bind:tab bind:messages {tasks} />
      <Button
        type="button"
        variant="ghost"
        size="icon-xs"
        aria-label="Close panel"
        class="absolute top-3 right-3 z-30 lg:hidden"
        onclick={() => (open = false)}
      >
        <Icon name="close" />
      </Button>
    </aside>
  </div>
</ElevationProvider>

<script lang="ts">
  import { AgentAvatar } from "$lib/components/ai/agent-avatar";
  import { Avatar, AvatarFallback } from "$lib/components/ui/avatar";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as Command from "$lib/components/ui/command";
  import * as Dialog from "$lib/components/ui/dialog";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import { Input } from "$lib/components/ui/input";
  import { Kbd, KbdGroup } from "$lib/components/ui/kbd";
  import * as Popover from "$lib/components/ui/popover";
  import * as Tooltip from "$lib/components/ui/tooltip";
  import {
    depts,
    org,
    orgMenu,
    paletteCommands,
    paletteDepartments,
    palettePlaceholder,
    paletteWorkspaces,
    plant,
    plantHead,
    RING,
    roadmapStages,
    shortcutList,
    TILE,
  } from "../data";
  import Icon from "./Icon.svelte";
  import Pixels from "./Pixels.svelte";

  let { onNewTask, onOpenPanel }: { onNewTask: (name: string) => void; onOpenPanel: () => void } = $props();

  const grid =
    "[background-image:linear-gradient(to_right,color-mix(in_srgb,var(--foreground)_5%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--foreground)_5%,transparent)_1px,transparent_1px)] [background-size:48px_48px]";

  let zoom = $state(100);
  let pan = $state({ x: 0, y: 0 });
  let dragging = $state(false);
  let drag: { id: number; x: number; y: number } | null = null;
  let hub = $state(true);
  let active = $state<string | null>(null);
  let palette = $state(false);
  let shortcuts = $state(false);
  let taskDialog = $state(false);
  let taskName = $state("");

  const pick = (id: string) => {
    active = active === id ? null : id;
  };
  const step = (d: number) => {
    zoom = Math.min(160, Math.max(60, zoom + d));
  };
  const reset = () => {
    zoom = 100;
    pan = { x: 0, y: 0 };
  };
  const down = (e: PointerEvent) => {
    const t = e.target as HTMLElement;
    if (!(e.currentTarget as HTMLElement).contains(t) || t.closest("button,[data-nopan]")) return;
    drag = { id: e.pointerId, x: e.clientX, y: e.clientY };
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
    dragging = true;
  };
  const move = (e: PointerEvent) => {
    if (!drag || drag.id !== e.pointerId) return;
    pan = { x: pan.x + e.clientX - drag.x, y: pan.y + e.clientY - drag.y };
    drag.x = e.clientX;
    drag.y = e.clientY;
  };
  const up = (e: PointerEvent) => {
    if (drag?.id !== e.pointerId) return;
    drag = null;
    dragging = false;
  };
  const onKey = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
      e.preventDefault();
      palette = !palette;
    }
  };
  const runCommand = (id: string) => {
    palette = false;
    if (id === "create-task") taskDialog = true;
  };
  const runDept = (id: string) => {
    palette = false;
    active = id;
  };
  const createTask = (e: SubmitEvent) => {
    e.preventDefault();
    const v = taskName.trim();
    if (!v) return;
    onNewTask(v);
    taskName = "";
    taskDialog = false;
  };
  const deptOf = (id: string) => depts.find((d) => d.id === id);
</script>

<svelte:window onkeydown={onKey} />

<Tooltip.Provider>
  <div
    class="absolute inset-0 touch-none overflow-hidden bg-card select-none {grid} {dragging ? 'cursor-grabbing' : 'cursor-grab'}"
    style:background-position="{pan.x}px {pan.y}px"
    role="presentation"
    onpointerdown={down}
    onpointermove={move}
    onpointerup={up}
    onpointercancel={up}
  >
    <div
      class="absolute top-[46.5%] left-1/2 size-0 origin-top-left lg:left-[calc((100%-438px)*0.58)]"
      style:transform="translate({pan.x}px, {pan.y}px) scale({zoom / 100})"
    >
      <svg class="pointer-events-none absolute overflow-visible" width="1" height="1" aria-hidden="true">
        <circle r={RING} fill="none" stroke="var(--foreground)" stroke-opacity="0.12" stroke-width="1.5" />
        {#each depts as d (d.id)}
          <line x1="0" y1="0" x2={d.node[0]} y2={d.node[1]} stroke="var(--foreground)" stroke-opacity="0.2" stroke-dasharray="4 4" />
        {/each}
        {#each depts as d (d.id)}
          <g>
            <path
              d={d.path}
              fill="none"
              stroke="var(--foreground)"
              stroke-opacity={active === d.id ? 0.9 : 0.35}
              stroke-width={active === d.id ? 1.5 : 1}
              stroke-dasharray="4 4"
            />
            <circle cx={d.end[0]} cy={d.end[1]} r="3" fill="var(--border)" />
          </g>
        {/each}
      </svg>

      {#each depts as d (d.id)}
        <div>
          {#each d.thumbs as t (`${t.x}-${t.y}`)}
            <span
              class="pointer-events-none absolute overflow-hidden rounded-[3px] border border-border bg-muted"
              style:left="{t.x}px"
              style:top="{t.y}px"
              style:width="{TILE.w}px"
              style:height="{TILE.h}px"
            >
              <i class="absolute top-2 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full bg-border"></i>
              <i class="absolute top-3.5 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full bg-border"></i>
            </span>
          {/each}
          <Button
            type="button"
            variant={active === d.id ? "secondary" : "outline"}
            size="sm"
            aria-pressed={active === d.id}
            class="absolute"
            style="left:{d.plate.x}px;top:{d.plate.y}px;width:{d.plate.w}px;height:{d.grid ? 32 : d.plate.h}px"
            onclick={() => pick(d.id)}
          >
            {d.label}
          </Button>
          {#if d.grid}
            <span
              class="pointer-events-none absolute grid grid-cols-3 gap-px overflow-hidden p-0.5"
              style:left="{d.plate.x}px"
              style:top="{d.plate.y + 32}px"
              style:width="{d.plate.w}px"
              style:height="{d.plate.h - 32}px"
            >
              {#each [0, 1, 2, 3, 4, 5] as n (n)}
                <span class="relative overflow-hidden rounded-[3px] border border-border bg-muted">
                  <i class="absolute top-2 left-1/2 h-0.5 w-5 -translate-x-1/2 rounded-full bg-border"></i>
                </span>
              {/each}
            </span>
          {/if}
        </div>
      {/each}

      <Pixels
        w={plant.w}
        h={plant.h}
        rects={plant.rects}
        class="pointer-events-none absolute top-[-78px] left-[-18px] w-9 opacity-80"
      />
      <button
        type="button"
        aria-label="Atlas"
        aria-pressed={hub}
        class="absolute top-[-29px] left-[-49px] h-[58px] w-[98px] rounded-xl p-0.5 outline-none {hub ? 'ring-2 ring-ring' : ''}"
        onclick={() => (hub = !hub)}
      >
        <Card elevation={hub ? "floating" : "raised"} class="size-full items-center justify-center gap-0 py-0">
          <span class="font-serif text-[19px] leading-none tracking-tight">Atlas</span>
        </Card>
      </button>

      {#each depts as d (d.id)}
        <Button
          type="button"
          variant={active === d.id ? "secondary" : "outline"}
          size="icon-sm"
          elevation="raised"
          aria-label={d.label}
          class="absolute z-10 -translate-x-1/2 -translate-y-1/2"
          style="left:{d.node[0]}px;top:{d.node[1]}px"
          onclick={() => pick(d.id)}
        >
          <AgentAvatar seed={d.id} color={d.color} size={13} tile={false} />
        </Button>
      {/each}
    </div>

    <div class="absolute top-4 left-4 flex items-center gap-2">
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          {#snippet child({ props })}
            <Button variant="outline" size="sm" {...props}>
              <Avatar size="sm">
                <AvatarFallback>{org.initials}</AvatarFallback>
              </Avatar>
              {org.name}
              <Icon name="chevronDown" />
            </Button>
          {/snippet}
        </DropdownMenu.Trigger>
        <DropdownMenu.Content class="w-64" elevation="floating">
          {#each orgMenu as group, i (group[0].id)}
            {#if i > 0}<DropdownMenu.Separator />{/if}
            <DropdownMenu.Group>
              {#each group as item (item.id)}
                <DropdownMenu.Item onSelect={() => item.id === "shortcuts" && (shortcuts = true)}>
                  <Icon name={item.icon} />
                  {item.label}
                  {#if item.keys}
                    <DropdownMenu.Shortcut>
                      <KbdGroup>{#each item.keys as k (k)}<Kbd>{k}</Kbd>{/each}</KbdGroup>
                    </DropdownMenu.Shortcut>
                  {/if}
                </DropdownMenu.Item>
              {/each}
            </DropdownMenu.Group>
          {/each}
        </DropdownMenu.Content>
      </DropdownMenu.Root>
      <Button variant="secondary" size="sm" elevation="raised">
        <Pixels w={plantHead.w} h={plantHead.h} rects={plantHead.rects} class="h-3 w-3.5" />
        Upgrade
      </Button>
    </div>

    <div class="absolute top-4 right-3 flex items-center gap-1.5 lg:right-[485px]">
      <Button variant="ghost" size="icon-xs" aria-label="Search" onclick={() => (palette = true)}><Icon name="search" /></Button>
      <Popover.Root>
        <Popover.Trigger>
          {#snippet child({ props })}
            <Button variant="ghost" size="icon-xs" aria-label="Map" {...props}><Icon name="map" /></Button>
          {/snippet}
        </Popover.Trigger>
        <Popover.Content align="end" class="w-72">
          <Popover.Header><Popover.Title>Roadmap</Popover.Title></Popover.Header>
          <ol class="flex flex-col gap-3">
            {#each roadmapStages as s, i (s.title)}
              <li class="flex gap-3">
                <span class="font-mono text-xs text-muted-foreground">{i + 1}</span>
                <div>
                  <div class="text-sm font-medium">{s.title}</div>
                  <div class="text-xs text-muted-foreground">{s.note}</div>
                </div>
              </li>
            {/each}
          </ol>
        </Popover.Content>
      </Popover.Root>
      <Tooltip.Root>
        <Tooltip.Trigger>
          {#snippet child({ props })}
            <Button variant="ghost" size="icon-xs" aria-label="Theme" {...props}><Icon name="sun" /></Button>
          {/snippet}
        </Tooltip.Trigger>
        <Tooltip.Content>Theme follows the viewer</Tooltip.Content>
      </Tooltip.Root>
      <Button variant="outline" size="sm" onclick={() => (taskDialog = true)}>
        <Icon name="plus" />
        New task
      </Button>
      <Button variant="outline" size="icon-sm" class="lg:hidden" aria-label="Open panel" onclick={onOpenPanel}>
        <Icon name="message" />
      </Button>
    </div>

    <Popover.Root>
      <Popover.Trigger>
        {#snippet child({ props })}
          <Button {...props} variant="outline" size="icon-lg" elevation="raised" aria-label="Notifications" class="absolute bottom-4 left-4">
            <Icon name="bell" />
          </Button>
        {/snippet}
      </Popover.Trigger>
      <Popover.Content side="top" align="start" class="w-80">
        <Popover.Header class="flex-row items-center justify-between">
          <Popover.Title>Notifications</Popover.Title>
          <Button variant="outline" size="xs">Desktop alerts</Button>
        </Popover.Header>
        <div class="py-6 text-center text-sm text-muted-foreground">All caught up!</div>
      </Popover.Content>
    </Popover.Root>

    <Card data-nopan elevation="raised" class="absolute right-3 bottom-4 flex-row items-center gap-0.5 p-1 py-1 lg:right-[485px]">
      <Button variant="ghost" size="icon-xs" aria-label="Reset view" onclick={reset}><Icon name="home" /></Button>
      <span class="w-12 text-center font-mono text-xs">{zoom}%</span>
      <Button variant="ghost" size="icon-xs" aria-label="Zoom in" disabled={zoom >= 160} onclick={() => step(10)}><Icon name="plus" /></Button>
      <Button variant="ghost" size="icon-xs" aria-label="Zoom out" disabled={zoom <= 60} onclick={() => step(-10)}><Icon name="minus" /></Button>
      <Button variant="ghost" size="icon-xs" aria-label="Shortcuts" onclick={() => (shortcuts = true)}><Icon name="keyboard" /></Button>
    </Card>

    <Command.Dialog bind:open={palette} title="Search" description="Search the workspace">
      <Command.Input placeholder={palettePlaceholder} />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Commands">
          {#each paletteCommands as c (c.id)}
            <Command.Item value={c.label} onSelect={() => runCommand(c.id)}>
              <Icon name={c.icon} />
              {c.label}
              <Command.Shortcut>
                <KbdGroup>{#each c.keys as k (k)}<Kbd>{k}</Kbd>{/each}</KbdGroup>
              </Command.Shortcut>
            </Command.Item>
          {/each}
        </Command.Group>
        <Command.Group heading="Departments">
          {#each paletteDepartments as id (id)}
            {@const d = deptOf(id)}
            {#if d}
              <Command.Item value={d.label} onSelect={() => runDept(id)}>
                <AgentAvatar seed={id} color={d.color} size={16} tile={false} />
                {d.label}
              </Command.Item>
            {/if}
          {/each}
        </Command.Group>
        <Command.Group heading="Workspaces">
          {#each paletteWorkspaces as w (w)}
            <Command.Item value={w} onSelect={() => (palette = false)}>
              <Icon name="globe" />
              {w}
            </Command.Item>
          {/each}
        </Command.Group>
      </Command.List>
      <div class="flex items-center justify-end gap-4 border-t border-border px-3 py-2 text-xs text-muted-foreground">
        <span class="flex items-center gap-1.5"><Kbd>↵</Kbd> Select</span>
        <span class="flex items-center gap-1.5"><Kbd>↑↓</Kbd> Navigate</span>
        <span class="flex items-center gap-1.5"><Kbd>Esc</Kbd> Close</span>
      </div>
    </Command.Dialog>

    <Dialog.Root bind:open={shortcuts}>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>Keyboard shortcuts</Dialog.Title>
          <Dialog.Description>Move around without the mouse.</Dialog.Description>
        </Dialog.Header>
        <ul class="flex flex-col gap-2">
          {#each shortcutList as s (s.label)}
            <li class="flex items-center justify-between text-sm">
              {s.label}
              <KbdGroup>{#each s.keys as k (k)}<Kbd>{k}</Kbd>{/each}</KbdGroup>
            </li>
          {/each}
        </ul>
      </Dialog.Content>
    </Dialog.Root>

    <Dialog.Root bind:open={taskDialog}>
      <Dialog.Content>
        <form class="flex flex-col gap-4" onsubmit={createTask}>
          <Dialog.Header>
            <Dialog.Title>New task</Dialog.Title>
            <Dialog.Description>Describe the work and the right agent picks it up.</Dialog.Description>
          </Dialog.Header>
          <Input bind:value={taskName} placeholder="Task title" />
          <Dialog.Footer>
            <Button type="button" variant="outline" onclick={() => (taskDialog = false)}>Cancel</Button>
            <Button type="submit" disabled={!taskName.trim()}>Create</Button>
          </Dialog.Footer>
        </form>
      </Dialog.Content>
    </Dialog.Root>
  </div>
</Tooltip.Provider>

<script lang="ts">
  import { AgentAvatar } from "$lib/components/ai/agent-avatar";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as Item from "$lib/components/ui/item";
  import { company, org } from "../data";
  import Icon from "./Icon.svelte";

  const icons: Record<string, string> = { domain: "globe", email: "mail", revenue: "card", hosting: "server" };
  const label = "mt-6 mb-2 text-[13px] text-muted-foreground";
</script>

<div class="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-4">
  <div class="flex items-center justify-between">
    <h2 class="text-lg font-medium">{org.name}</h2>
    <Button type="button" variant="ghost" size="icon-xs" aria-label="Edit">
      <Icon name="pencil" class="size-4" />
    </Button>
  </div>
  <div class={label}>Stack</div>
  <Card class="gap-0 py-0">
    <Item.Group>
      {#each company.stack as row, i (row.title)}
        <div>
          {#if i > 0}<Item.Separator class="my-0" />{/if}
          <Item.Root>
            <Item.Media variant="icon"><Icon name={icons[row.icon] ?? "globe"} /></Item.Media>
            <Item.Content>
              <Item.Title>{row.title}</Item.Title>
              <Item.Description>{row.note}</Item.Description>
            </Item.Content>
            <Icon name="chevronRight" class="size-4 text-muted-foreground" />
          </Item.Root>
        </div>
      {/each}
    </Item.Group>
  </Card>
  <div class={label}>Important links</div>
  <Card class="gap-0 py-0">
    <Item.Group>
      {#each company.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>
            <Icon name="chevronRight" class="size-4 text-muted-foreground" />
          </Item.Root>
        </div>
      {/each}
    </Item.Group>
  </Card>
  <div class={label}>Agents</div>
  <Card class="gap-0 py-0">
    <Item.Group>
      {#each company.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>

<script lang="ts">
  import {
    PromptInput,
    PromptInputBody,
    PromptInputFooter,
    PromptInputHeader,
    PromptInputSubmit,
    PromptInputTextarea,
    PromptInputTools,
  } from "$lib/components/ai/prompt-input";
  import { Button } from "$lib/components/ui/button";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import * as Tooltip from "$lib/components/ui/tooltip";
  import { atlasAgent, composerMenu, composerPlaceholder, plantHead } from "../data";
  import Icon from "./Icon.svelte";
  import Pixels from "./Pixels.svelte";

  let { onSend, onClear }: { onSend: (text: string) => void; onClear: () => void } = $props();
</script>

<div class="px-2 pb-2">
  <PromptInput
    onSubmit={(m) => {
      if (m.text.trim()) onSend(m.text.trim());
    }}
  >
    <PromptInputHeader>
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger>
            {#snippet child({ props })}
              <Button type="button" variant="outline" size="sm" {...props}>
                <Pixels w={plantHead.w} h={plantHead.h} rects={plantHead.rects} class="h-3 w-3.5" />
                {atlasAgent.name}
              </Button>
            {/snippet}
          </Tooltip.Trigger>
          <Tooltip.Content>Atlas agent</Tooltip.Content>
        </Tooltip.Root>
      </Tooltip.Provider>
    </PromptInputHeader>
    <PromptInputBody>
      <PromptInputTextarea placeholder={composerPlaceholder} />
    </PromptInputBody>
    <PromptInputFooter>
      <PromptInputTools>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger>
            {#snippet child({ props })}
              <Button type="button" variant="ghost" size="icon-xs" aria-label="Add" {...props}>
                <Icon name="plus" />
              </Button>
            {/snippet}
          </DropdownMenu.Trigger>
          <DropdownMenu.Content side="top" align="start" elevation="floating">
            {#each composerMenu as m (m.id)}
              <DropdownMenu.Item onSelect={() => m.id === "clear" && onClear()}>
                <Icon name={m.icon} />
                {m.label}
              </DropdownMenu.Item>
            {/each}
          </DropdownMenu.Content>
        </DropdownMenu.Root>
      </PromptInputTools>
      <PromptInputSubmit size="icon-sm" variant="secondary" elevation="raised">
        <Icon name="arrowUp" />
      </PromptInputSubmit>
    </PromptInputFooter>
  </PromptInput>
</div>

<script lang="ts">
  import { AgentAvatar } from "$lib/components/ai/agent-avatar";
  import { Message, MessageContent, MessageHeader } from "$lib/components/ai/message";
  import { Suggestion, Suggestions } from "$lib/components/ai/suggestion";
  import { Button } from "$lib/components/ui/button";
  import * as Item from "$lib/components/ui/item";
  import { type ChatMessage, org, plantHead, suggested, type TaskRow, thread } from "../data";
  import Icon from "./Icon.svelte";
  import Pixels from "./Pixels.svelte";
  import Status from "./Status.svelte";

  let {
    view,
    onView,
    messages,
    tasks,
    onSend,
    onReset,
  }: {
    view: "chat" | "home" | "thread";
    onView: (v: "chat" | "home" | "thread") => void;
    messages: ChatMessage[];
    tasks: TaskRow[];
    onSend: (text: string) => void;
    onReset: () => void;
  } = $props();
</script>

{#if view === "home"}
  <div class="flex min-h-0 flex-1 flex-col px-5 pb-3">
    <div class="mt-3 [mask-image:linear-gradient(to_bottom,black,transparent)]">
      <Item.Root variant="outline" size="sm">
        <Item.Media variant="icon"><Icon name="map" /></Item.Media>
        <Item.Content>
          <Item.Title>Open the company roadmap</Item.Title>
          <Item.Description>General</Item.Description>
        </Item.Content>
      </Item.Root>
    </div>
    <div class="flex justify-center py-3">
      <Button type="button" variant="ghost" size="xs" onclick={() => onView("chat")}>
        <Icon name="arrowUp" />
        Back to chat
      </Button>
    </div>
    <div class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
      <h2 class="text-2xl font-normal">Good evening, {org.user}</h2>
      <Button type="button" variant="ghost" size="xs">
        <Icon name="map" />
        Roadmap
      </Button>
    </div>
    <div class="mb-2 text-xs text-muted-foreground">Tasks</div>
    <div class="flex flex-col">
      {#each tasks as t (t.id)}
        <div class="flex items-center gap-3 border-b border-border py-3 last:border-b-0">
          <AgentAvatar seed={t.agent} color={t.color} size={20} tile={false} />
          <span class="text-[15px]">{t.name}</span>
          <span class="ml-auto font-mono text-xs text-muted-foreground">{t.age}</span>
          <Status status={t.status} />
        </div>
      {/each}
    </div>
    <div class="mt-3 flex items-center gap-2">
      <span class="text-xs text-muted-foreground">Suggested</span>
      <Suggestions class="min-w-0">
        {#each suggested as s (s)}
          <Suggestion suggestion={s} onclick={onSend} />
        {/each}
      </Suggestions>
    </div>
  </div>
{:else}
  <div class="flex min-h-0 flex-1 flex-col">
    <div class="flex justify-end px-3 pt-3">
      <Button type="button" variant="ghost" size="icon-xs" aria-label="Toggle thread" onclick={() => onView(view === "thread" ? "chat" : "thread")}>
        <Icon name="more" />
      </Button>
    </div>
    {#if view === "thread"}
      <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pb-3">
        <Message from="assistant">
          <MessageContent>
            <p>{thread.intro[0]}</p>
            <ol class="my-2 list-decimal pl-5">
              <li>{thread.intro[1]}</li>
              <li>{thread.intro[2]}</li>
            </ol>
            <p>{thread.intro[3]}</p>
          </MessageContent>
        </Message>
        <Message from="user"><MessageContent>{thread.question}</MessageContent></Message>
        <Message from="assistant">
          <MessageHeader>
            <Pixels w={plantHead.w} h={plantHead.h} rects={plantHead.rects} class="h-3 w-3.5" />
            Atlas
          </MessageHeader>
          <MessageContent>{thread.answer}</MessageContent>
        </Message>
        <div class="flex flex-col gap-2">
          {#each thread.actions as a (a.id)}
            <Item.Root variant="outline" size="sm">
              <Item.Media><AgentAvatar seed={a.agent} color={a.color} size={20} tile={false} /></Item.Media>
              <Item.Content>
                <Item.Title>{a.title}</Item.Title>
                <Item.Description>{a.dept}</Item.Description>
              </Item.Content>
            </Item.Root>
          {/each}
        </div>
        <div class="flex justify-center">
          <Button type="button" variant="outline" size="icon-xs" aria-label="Scroll to latest"><Icon name="chevronDown" /></Button>
        </div>
      </div>
    {:else if messages.length === 0}
      <div class="flex flex-1 flex-col items-center justify-center gap-2 px-10 text-center">
        <svg viewBox="0 0 24 24" class="mb-2 size-7 text-muted-foreground" fill="currentColor" aria-hidden="true">
          <circle cx="12" cy="12" r="1.4" />
          <circle cx="12" cy="6" r="1" />
          <circle cx="12" cy="18" r="1" />
          <circle cx="6" cy="12" r="1" />
          <circle cx="18" cy="12" r="1" />
        </svg>
        <h2 class="text-[15px] font-semibold">What should we work on?</h2>
        <p class="text-sm text-muted-foreground">
          Bring me an idea, a problem, or a goal. I'll help turn it into the next useful step.
        </p>
      </div>
    {:else}
      <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pb-3">
        {#each messages as m (m.id)}
          <Message from={m.from}>
            <MessageContent>{m.text}</MessageContent>
          </Message>
        {/each}
        <div>
          <Button type="button" variant="ghost" size="xs" onclick={onReset}>
            <Icon name="home" />
            Back to home
          </Button>
        </div>
      </div>
    {/if}
  </div>
{/if}

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";

  let { name, class: className }: { name: string; class?: string } = $props();

  const extra: Record<string, { lucide: string; tabler: string; hugeicons: string; phosphor: string; remixicon: string }> = {
    settings: { lucide: "SettingsIcon", tabler: "IconSettings", hugeicons: "Settings01Icon", phosphor: "GearIcon", remixicon: "RiSettingsLine" },
    lightbulb: { lucide: "LightbulbIcon", tabler: "IconBulb", hugeicons: "BulbIcon", phosphor: "LightbulbIcon", remixicon: "RiLightbulbLine" },
    plug: { lucide: "PlugIcon", tabler: "IconPlug", hugeicons: "PlugSocketIcon", phosphor: "PlugsConnectedIcon", remixicon: "RiPlugLine" },
    gift: { lucide: "GiftIcon", tabler: "IconGift", hugeicons: "GiftIcon", phosphor: "GiftIcon", remixicon: "RiGiftLine" },
    database: { lucide: "DatabaseIcon", tabler: "IconDatabase", hugeicons: "Database01Icon", phosphor: "DatabaseIcon", remixicon: "RiDatabase2Line" },
    coins: { lucide: "CoinsIcon", tabler: "IconCoins", hugeicons: "Coins01Icon", phosphor: "CoinsIcon", remixicon: "RiCoinsLine" },
    book: { lucide: "BookOpenIcon", tabler: "IconBook", hugeicons: "BookOpen02Icon", phosphor: "BookOpenIcon", remixicon: "RiBookOpenLine" },
    users: { lucide: "UsersIcon", tabler: "IconUsers", hugeicons: "UserGroupIcon", phosphor: "UsersThreeIcon", remixicon: "RiGroupLine" },
    lifebuoy: { lucide: "LifeBuoyIcon", tabler: "IconLifebuoy", hugeicons: "ChartRingIcon", phosphor: "LifebuoyIcon", remixicon: "RiLifebuoyLine" },
    archive: { lucide: "ArchiveIcon", tabler: "IconArchive", hugeicons: "Archive02Icon", phosphor: "ArchiveIcon", remixicon: "RiArchiveLine" },
    paperclip: { lucide: "PaperclipIcon", tabler: "IconPaperclip", hugeicons: "AttachmentIcon", phosphor: "PaperclipIcon", remixicon: "RiAttachmentLine" },
    listChecks: { lucide: "ListChecksIcon", tabler: "IconListCheck", hugeicons: "TaskDone01Icon", phosphor: "ListChecksIcon", remixicon: "RiListCheck2" },
    trash: { lucide: "Trash2Icon", tabler: "IconTrash", hugeicons: "Delete02Icon", phosphor: "TrashIcon", remixicon: "RiDeleteBinLine" },
    check: { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" },
  };

</script>

{#if extra[name]}
  <IconPlaceholder {...extra[name]} class={className} />
{:else if name === "search"}
  <IconPlaceholder lucide="SearchIcon" tabler="IconSearch" hugeicons="Search01Icon" phosphor="MagnifyingGlassIcon" remixicon="RiSearchLine" class={className} />
{:else if name === "map"}
  <IconPlaceholder lucide="MapIcon" tabler="IconMap" hugeicons="MapsIcon" phosphor="MapTrifoldIcon" remixicon="RiMapLine" class={className} />
{:else if name === "sun"}
  <IconPlaceholder lucide="SunIcon" tabler="IconSun" hugeicons="Sun01Icon" phosphor="SunIcon" remixicon="RiSunLine" class={className} />
{:else if name === "plus"}
  <IconPlaceholder lucide="PlusIcon" tabler="IconPlus" hugeicons="Add01Icon" phosphor="PlusIcon" remixicon="RiAddLine" class={className} />
{:else if name === "chevronDown"}
  <IconPlaceholder lucide="ChevronDownIcon" tabler="IconChevronDown" hugeicons="ArrowDown01Icon" phosphor="CaretDownIcon" remixicon="RiArrowDownSLine" class={className} />
{:else if name === "chevronRight"}
  <IconPlaceholder lucide="ChevronRightIcon" tabler="IconChevronRight" hugeicons="ArrowRight01Icon" phosphor="CaretRightIcon" remixicon="RiArrowRightSLine" class={className} />
{:else if name === "home"}
  <IconPlaceholder lucide="HomeIcon" tabler="IconHome" hugeicons="Home01Icon" phosphor="HouseIcon" remixicon="RiHomeLine" class={className} />
{:else if name === "minus"}
  <IconPlaceholder lucide="MinusIcon" tabler="IconMinus" hugeicons="MinusSignIcon" phosphor="MinusIcon" remixicon="RiSubtractLine" class={className} />
{:else if name === "keyboard"}
  <IconPlaceholder lucide="KeyboardIcon" tabler="IconKeyboard" hugeicons="KeyboardIcon" phosphor="KeyboardIcon" remixicon="RiKeyboardLine" class={className} />
{:else if name === "bell"}
  <IconPlaceholder lucide="BellIcon" tabler="IconBell" hugeicons="Notification01Icon" phosphor="BellIcon" remixicon="RiNotificationLine" class={className} />
{:else if name === "more"}
  <IconPlaceholder lucide="MoreHorizontalIcon" tabler="IconDots" hugeicons="MoreHorizontalCircle01Icon" phosphor="DotsThreeIcon" remixicon="RiMoreLine" class={className} />
{:else if name === "arrowUp"}
  <IconPlaceholder lucide="ArrowUpIcon" tabler="IconArrowUp" hugeicons="ArrowUp01Icon" phosphor="ArrowUpIcon" remixicon="RiArrowUpLine" class={className} />
{:else if name === "upload"}
  <IconPlaceholder lucide="UploadIcon" tabler="IconUpload" hugeicons="Upload01Icon" phosphor="UploadSimpleIcon" remixicon="RiUploadLine" class={className} />
{:else if name === "grid"}
  <IconPlaceholder lucide="LayoutGridIcon" tabler="IconLayoutGrid" hugeicons="GridViewIcon" phosphor="SquaresFourIcon" remixicon="RiLayoutGridLine" class={className} />
{:else if name === "list"}
  <IconPlaceholder lucide="ListIcon" tabler="IconList" hugeicons="ListViewIcon" phosphor="ListIcon" remixicon="RiListUnordered" class={className} />
{:else if name === "info"}
  <IconPlaceholder lucide="InfoIcon" tabler="IconInfoCircle" hugeicons="InformationCircleIcon" phosphor="InfoIcon" remixicon="RiInformationLine" class={className} />
{:else if name === "close"}
  <IconPlaceholder lucide="XIcon" tabler="IconX" hugeicons="Cancel01Icon" phosphor="XIcon" remixicon="RiCloseLine" class={className} />
{:else if name === "pencil"}
  <IconPlaceholder lucide="PencilIcon" tabler="IconPencil" hugeicons="PencilEdit01Icon" phosphor="PencilSimpleIcon" remixicon="RiPencilLine" class={className} />
{:else if name === "globe"}
  <IconPlaceholder lucide="GlobeIcon" tabler="IconWorld" hugeicons="Globe02Icon" phosphor="GlobeIcon" remixicon="RiGlobalLine" class={className} />
{:else if name === "mail"}
  <IconPlaceholder lucide="MailIcon" tabler="IconMail" hugeicons="Mail01Icon" phosphor="EnvelopeSimpleIcon" remixicon="RiMailLine" class={className} />
{:else if name === "card"}
  <IconPlaceholder lucide="CreditCardIcon" tabler="IconCreditCard" hugeicons="CreditCardIcon" phosphor="CreditCardIcon" remixicon="RiBankCardLine" class={className} />
{:else if name === "server"}
  <IconPlaceholder lucide="ServerIcon" tabler="IconServer" hugeicons="ServerStackIcon" phosphor="HardDrivesIcon" remixicon="RiHardDriveLine" class={className} />
{:else if name === "message"}
  <IconPlaceholder lucide="MessageCircleIcon" tabler="IconMessageCircle" hugeicons="Message01Icon" phosphor="ChatCircleIcon" remixicon="RiMessageLine" class={className} />
{/if}

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { InputGroup, InputGroupAddon, InputGroupInput } from "$lib/components/ui/input-group";
  import * as Item from "$lib/components/ui/item";
  import * as ToggleGroup from "$lib/components/ui/toggle-group";
  import { library } from "../data";
  import Icon from "./Icon.svelte";
  import Pixels from "./Pixels.svelte";

  let banner = $state(true);
  let view = $state("grid");
  const count = (n: number) => `${n} ${n === 1 ? "file" : "files"}`;
</script>

<div class="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-4">
  <div class="flex items-center justify-between">
    <h2 class="flex items-center gap-2 text-lg font-medium">
      Library
      <Icon name="info" class="size-3.5 text-muted-foreground" />
    </h2>
    <div class="flex items-center gap-2">
      <Button type="button" variant="ghost" size="icon-xs" aria-label="Upload">
        <Icon name="upload" class="size-4" />
      </Button>
      <ToggleGroup.Root type="single" variant="segmented" value={view} onValueChange={(v) => v && (view = v)} aria-label="View">
        <ToggleGroup.Item value="grid" aria-label="Grid"><Icon name="grid" class="size-3.5" /></ToggleGroup.Item>
        <ToggleGroup.Item value="list" aria-label="List"><Icon name="list" class="size-3.5" /></ToggleGroup.Item>
      </ToggleGroup.Root>
    </div>
  </div>
  <InputGroup class="mt-3">
    <InputGroupAddon><Icon name="search" /></InputGroupAddon>
    <InputGroupInput placeholder="Search files" />
  </InputGroup>
  {#if banner}
    <Item.Root variant="muted" size="sm" class="mt-3 items-start">
      <Item.Media variant="icon"><Icon name="message" /></Item.Media>
      <Item.Content>
        <Item.Title>{library.banner.title}</Item.Title>
        <Item.Description class="line-clamp-none">{library.banner.body}</Item.Description>
        <div class="pt-2">
          <Button type="button" variant="outline" size="xs" elevation="raised">{library.banner.action}</Button>
        </div>
      </Item.Content>
      <Item.Actions>
        <Button type="button" variant="ghost" size="icon-xs" aria-label="Dismiss" onclick={() => (banner = false)}>
          <Icon name="close" class="size-3.5" />
        </Button>
      </Item.Actions>
    </Item.Root>
  {/if}
  {#if view === "grid"}
    <div class="mt-3 grid grid-cols-2 gap-3">
      {#each library.folders as f (f.id)}
        <Card class="gap-0 overflow-hidden py-0">
          <div class="aspect-[4/3] overflow-hidden border-b border-border">
            {#if f.kind === "scene" && f.rects}
              <Pixels w={80} h={60} rects={f.rects} class="size-full" />
            {:else}
              <div class="grid size-full grid-cols-2 gap-2 bg-muted p-2">
                {#each [0, 1, 2, 3] as n (n)}
                  <div class="grid place-items-center rounded-md border border-border bg-card">
                    {#if n === 1}<span class="h-4 w-3 rounded-[2px] bg-muted-foreground"></span>{/if}
                  </div>
                {/each}
              </div>
            {/if}
          </div>
          <div class="px-3 py-2.5">
            <div class="text-[13px] font-medium">{f.name}</div>
            <div class="text-xs text-muted-foreground">{count(f.files)}</div>
          </div>
        </Card>
      {/each}
    </div>
  {:else}
    <Card class="mt-3 gap-0 py-0">
      {#each library.folders as f (f.id)}
        <Item.Root size="sm">
          <Item.Media variant="image">
            {#if f.kind === "scene" && f.rects}
              <Pixels w={80} h={60} rects={f.rects} class="size-full" />
            {:else}
              <div class="grid size-full grid-cols-2 gap-2 bg-muted p-2">
                {#each [0, 1, 2, 3] as n (n)}
                  <div class="grid place-items-center rounded-md border border-border bg-card"></div>
                {/each}
              </div>
            {/if}
          </Item.Media>
          <Item.Content>
            <Item.Title>{f.name}</Item.Title>
            <Item.Description>{count(f.files)}</Item.Description>
          </Item.Content>
        </Item.Root>
      {/each}
    </Card>
  {/if}
</div>

<script lang="ts">
  import * as InsetPanel from "$lib/components/ui/inset-panel";
  import * as Tabs from "$lib/components/ui/tabs";
  import { type ChatMessage, reply, type TabId, type TaskRow, tabs } from "../data";
  import HomeTab from "./HomeTab.svelte";
  import CompanyTab from "./CompanyTab.svelte";
  import Composer from "./Composer.svelte";
  import LibraryTab from "./LibraryTab.svelte";
  import TasksTab from "./TasksTab.svelte";

  let {
    tab = $bindable(),
    messages = $bindable(),
    tasks,
  }: { tab: TabId; messages: ChatMessage[]; tasks: TaskRow[] } = $props();

  let view = $state<"chat" | "home" | "thread">("chat");
  function send(text: string) {
    const id = messages.length + 1;
    messages = [...messages, { id, from: "user", text }, { id: id + 1, from: "assistant", text: reply }];
    view = "chat";
    tab = "atlas";
  }
  function reset() {
    messages = [];
    view = "home";
  }
</script>

<Tabs.Root bind:value={tab} class="size-full gap-0">
  <InsetPanel.Root elevation="floating" class="h-full">
    <InsetPanel.Header class="px-5 py-3">
      <Tabs.List variant="pills">
        {#each tabs as t (t.id)}
          <Tabs.Trigger value={t.id}>{t.label}</Tabs.Trigger>
        {/each}
      </Tabs.List>
    </InsetPanel.Header>
    <InsetPanel.Body class="flex flex-col">
      <Tabs.Content value="atlas" class="flex min-h-0 flex-1 flex-col">
        <HomeTab {view} {tasks} onView={(v) => (view = v)} {messages} onSend={send} onReset={reset} />
      </Tabs.Content>
      <Tabs.Content value="tasks" class="flex min-h-0 flex-1 flex-col"><TasksTab {tasks} /></Tabs.Content>
      <Tabs.Content value="company" class="flex min-h-0 flex-1 flex-col"><CompanyTab /></Tabs.Content>
      <Tabs.Content value="library" class="flex min-h-0 flex-1 flex-col"><LibraryTab /></Tabs.Content>
      {#if tab !== "library"}
        <Composer onSend={send} onClear={reset} />
      {/if}
    </InsetPanel.Body>
  </InsetPanel.Root>
</Tabs.Root>

<script lang="ts">
  import type { Rect } from "../data";

  /** Decorative pixel art drawn from the rect lists in data.ts. */
  let { w, h, rects, class: className }: { w: number; h: number; rects: Rect[]; class?: string } = $props();
</script>

<svg viewBox="0 0 {w} {h}" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid slice" aria-hidden="true" class={className}>
  {#each rects as r, i (i)}
    <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.c} />
  {/each}
</svg>

<script lang="ts">
  /** Task status: spinning ring while running, green dot when done. */
  let { status }: { status: "running" | "done" } = $props();
</script>

{#if status === "done"}
  <span class="size-1.5 rounded-full bg-success" role="img" aria-label="Done"></span>
{:else}
  <svg viewBox="0 0 16 16" class="size-3.5 animate-spin text-muted-foreground" role="img" aria-label="Running">
    <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="2" stroke-opacity="0.3" />
    <path d="M8 2a6 6 0 0 1 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  </svg>
{/if}

<script lang="ts">
  import { AgentAvatar } from "$lib/components/ai/agent-avatar";
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { suggested, type TaskRow } from "../data";
  import Status from "./Status.svelte";

  let { tasks }: { tasks: TaskRow[] } = $props();
  const label = "mt-5 mb-1 text-[13px] text-muted-foreground";
  let picked = $state<string[]>([]);
  const all = $derived(picked.length === tasks.length);
  const toggle = (id: string, on: boolean) => {
    picked = on ? [...picked, id] : picked.filter((x) => x !== id);
  };
</script>

<div class="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-4">
  <h2 class="text-lg font-medium">Tasks</h2>
  <div class="mt-3 flex items-center gap-3 text-[13px] text-muted-foreground">
    <Checkbox
      aria-label="Select all"
      checked={all}
      indeterminate={picked.length > 0 && !all}
      onCheckedChange={(c) => (picked = c ? tasks.map((t) => t.id) : [])}
    />
    Select all
  </div>
  <div class={label}>Tasks</div>
  <div class="flex flex-col">
    {#each tasks as t (t.id)}
      <div class="flex items-center gap-3 border-b border-border py-3 last:border-b-0">
        <Checkbox aria-label={t.name} checked={picked.includes(t.id)} onCheckedChange={(c) => toggle(t.id, c)} />
        <Status status={t.status} />
        <AgentAvatar seed={t.agent} color={t.color} size={20} tile={false} />
        <span class="text-[15px]">{t.name}</span>
      </div>
    {/each}
  </div>
  <div class={label}>Suggested Next</div>
  <div class="flex flex-col">
    {#each suggested as s (s)}
      <div class="flex items-center gap-3 py-2.5">
        <svg viewBox="0 0 16 16" class="size-3.5 text-muted-foreground" aria-hidden="true">
          <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="2 2.4" />
        </svg>
        <span class="text-[15px]">{s}</span>
      </div>
    {/each}
  </div>
</div>

// Sample data for the Atlas agent canvas example. Shared by all three ports. Coordinates are CSS px relative to the hub centre.

export const org = { name: "Acme Labs", initials: "AL", user: "Sam" };

export const tabs = [
  { id: "atlas", label: "Atlas" },
  { id: "tasks", label: "Tasks" },
  { id: "company", label: "Company" },
  { id: "library", label: "Library" },
] as const;
export type TabId = (typeof tabs)[number]["id"];

export const composerPlaceholder = "Ask Atlas anything about your company...";
export const atlasAgent = {
  id: "atlas",
  name: "Atlas",
  color: "var(--warning)",
};

// ---------------------------------------------------------------- pixel art (own drawing, rects only)

const plantRows = [
  "....y.yyy.y....",
  "..y.yyyyyyy.y..",
  "...yyybbbyyy...",
  "..yyybbbbbyyy..",
  "..yyybbbbbyyy..",
  "..yyybbbbbyyy..",
  "...yyybbbyyy...",
  "..y.yyyyyyy.y..",
  "....y.yyy.y....",
  ".......d.......",
  ".......d.......",
  "....gg.d.......",
  "...ggggd.gg....",
  ".....ggd.gggg..",
  ".......dgggg...",
  ".......d.......",
  "..gg...d.......",
  "..ggggdd.......",
  "....ggd........",
  ".......d.......",
  ".......d.......",
  ".......d.......",
];

const plantColors: Record<string, string> = {
  y: "var(--warning)",
  b: "color-mix(in srgb, var(--warning) 35%, var(--background))",
  g: "var(--success)",
  d: "color-mix(in srgb, var(--success) 60%, var(--background))",
};

export type Rect = { x: number; y: number; w: number; h: number; c: string };

function rowsToRects(rows: string[]): Rect[] {
  const out: Rect[] = [];
  rows.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      const c = plantColors[ch];
      if (c) out.push({ x, y, w: 1, h: 1, c });
    });
  });
  return out;
}

export const plant = {
  w: 15,
  h: plantRows.length,
  rects: rowsToRects(plantRows),
};
export const plantHead = {
  w: 11,
  h: 9,
  rects: rowsToRects(plantRows.slice(0, 9))
    .map((r) => ({ ...r, x: r.x - 2 }))
    .filter((r) => r.x >= 0 && r.x < 11),
};

/** Deterministic pixel skyline used for the library covers (own scenes, no external art). */
function scene(seed: number, sky: [string, string], accent: string): Rect[] {
  let s = seed;
  const rnd = () => {
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 4294967296;
  };
  const out: Rect[] = [
    { x: 0, y: 0, w: 80, h: 30, c: sky[0] },
    { x: 0, y: 30, w: 80, h: 30, c: sky[1] },
  ];
  for (let i = 0; i < 3; i++)
    out.push({
      x: Math.floor(rnd() * 60),
      y: 6 + Math.floor(rnd() * 14),
      w: 12 + Math.floor(rnd() * 10),
      h: 4,
      c: "color-mix(in srgb, var(--foreground) 70%, var(--card))",
    });
  let x = 0;
  while (x < 80) {
    const w = 8 + Math.floor(rnd() * 8);
    const h = 14 + Math.floor(rnd() * 26);
    out.push({
      x,
      y: 60 - h,
      w,
      h,
      c: "color-mix(in srgb, var(--background) 80%, var(--card))",
    });
    for (let wy = 60 - h + 3; wy < 57; wy += 5)
      for (let wx = x + 2; wx < x + w - 2; wx += 4)
        if (rnd() > 0.45) out.push({ x: wx, y: wy, w: 2, h: 2, c: accent });
    x += w + 1;
  }
  return out;
}

// ---------------------------------------------------------------- canvas graph

export type Tile = { x: number; y: number };
export type Dept = {
  id: string;
  label: string;
  /** token colour of the agent glyph / tint */
  color: string;
  /** solid tint of the plate (color-mix into --card) or null for the neutral label plate */
  tint: string | null;
  node: [number, number];
  /** dashed elbow from the node to the plate */
  path: string;
  end: [number, number];
  plate: { x: number; y: number; w: number; h: number };
  thumbs: Tile[];
  /** engineering: the plate is a card holding a 3x2 grid */
  grid?: boolean;
};

const D = 155;
const tint = (c: string) => `color-mix(in srgb, ${c} 16%, var(--card))`;
const pink = "color-mix(in srgb, var(--chart-5) 55%, var(--chart-4))";
const orange = "color-mix(in srgb, var(--chart-5) 50%, var(--chart-3))";
const teal = "color-mix(in srgb, var(--chart-1) 55%, var(--chart-2))";

export const RING = 219;
export const TILE = { w: 44, h: 32 };

export const depts: Dept[] = [
  {
    id: "support",
    label: "Support",
    color: pink,
    tint: null,
    node: [0, -RING],
    path: "M0 -219 V-290",
    end: [0, -290],
    plate: { x: -63, y: -318, w: 126, h: 28 },
    thumbs: [],
  },
  {
    id: "operations",
    label: "Operations",
    color: orange,
    tint: tint(orange),
    node: [D, -D],
    path: `M${D} -${D} H297 L340 -197`,
    end: [340, -197],
    plate: { x: 275, y: -229, w: 128, h: 32 },
    thumbs: [
      { x: 403, y: -261 },
      { x: 447, y: -261 },
      { x: 403, y: -229 },
    ],
  },
  {
    id: "finance",
    label: "Finance",
    color: "var(--chart-3)",
    tint: null,
    node: [RING, 0],
    path: "M219 0 H448",
    end: [448, 0],
    plate: { x: 448, y: -14, w: 130, h: 28 },
    thumbs: [],
  },
  {
    id: "legal",
    label: "Legal",
    color: teal,
    tint: null,
    node: [D, D],
    path: `M${D} ${D} H297 L340 198`,
    end: [340, 198],
    plate: { x: 277, y: 199, w: 126, h: 30 },
    thumbs: [],
  },
  {
    id: "engineering",
    label: "Engineering",
    color: "var(--chart-2)",
    tint: tint("var(--chart-2)"),
    node: [0, RING],
    path: "M0 219 V288",
    end: [0, 288],
    plate: { x: -65, y: 288, w: 131, h: 94 },
    thumbs: [],
    grid: true,
  },
  {
    id: "design",
    label: "Design",
    color: "var(--chart-4)",
    tint: tint("var(--chart-4)"),
    node: [-D, D],
    path: `M-${D} ${D} H-297 L-340 197`,
    end: [-340, 197],
    plate: { x: -405, y: 197, w: 130, h: 32 },
    thumbs: [
      { x: -447, y: 229 },
      { x: -403, y: 229 },
      { x: -447, y: 261 },
      { x: -403, y: 261 },
    ],
  },
  {
    id: "marketing",
    label: "Marketing",
    color: "var(--chart-5)",
    tint: tint("var(--chart-5)"),
    node: [-RING, 0],
    path: "M-219 0 H-445",
    end: [-445, 0],
    plate: { x: -572, y: -16, w: 127, h: 32 },
    thumbs: [
      { x: -616, y: -16 },
      { x: -660, y: 16 },
      { x: -616, y: 16 },
    ],
  },
  {
    id: "sales",
    label: "Sales",
    color: "var(--chart-1)",
    tint: tint("var(--chart-1)"),
    node: [-D, -D],
    path: `M-${D} -${D} H-297 L-340 -197`,
    end: [-340, -197],
    plate: { x: -403, y: -229, w: 128, h: 32 },
    thumbs: [
      { x: -491, y: -261 },
      { x: -447, y: -261 },
      { x: -403, y: -261 },
      { x: -491, y: -229 },
      { x: -447, y: -229 },
    ],
  },
];

// ---------------------------------------------------------------- panel

export const tasks = [
  {
    id: "t1",
    name: "Draft landing copy",
    agent: "marketing",
    color: "var(--chart-2)",
    age: "13d",
    status: "running" as const,
  },
  {
    id: "t2",
    name: "Build app",
    agent: "engineering",
    color: "var(--chart-2)",
    age: "4mo",
    status: "done" as const,
  },
];

export const suggested = [
  "Build marketing website",
  "Define positioning",
  "Define brand voice",
  "Create launch post",
  "Incorporate LLC",
];

export const reply =
  "Got it. I'll break that down into tasks, hand them to the right department agents and report back here as soon as the first draft is ready.";

export type StackIcon = "domain" | "email" | "revenue" | "hosting";
export const company = {
  stack: [
    {
      icon: "domain",
      title: "Domain",
      note: "Connect your customer-facing domain",
    },
    { icon: "email", title: "Email", note: "Configure your email domain" },
    { icon: "revenue", title: "Revenue", note: "Connect billing" },
    { icon: "hosting", title: "Hosting", note: "Deployment provider" },
  ] as { icon: StackIcon; title: string; note: string }[],
  links: [
    { title: "App", note: "App, source, and deployment links." },
    {
      title: "Marketing Website",
      note: "Website, source, and deployment links.",
    },
  ],
  agents: [
    {
      id: "design",
      name: "Design Agent",
      note: "Design department agent.",
      color: "var(--chart-4)",
    },
    {
      id: "engineer",
      name: "Engineer",
      note: "Engineering department agent.",
      color: "var(--chart-2)",
    },
    {
      id: "marketing",
      name: "Marketing Agent",
      note: "Marketing department agent.",
      color: "var(--chart-5)",
    },
    {
      id: "sales",
      name: "Sales Agent",
      note: "Sales department agent.",
      color: "var(--chart-1)",
    },
    {
      id: "ops",
      name: "Ops Agent",
      note: "Operations department agent.",
      color: orange,
    },
  ],
};

export type Folder = {
  id: string;
  name: string;
  files: number;
  kind: "grid" | "scene";
  rects?: Rect[];
};
export const library = {
  banner: {
    title: "Bring over context from other tools",
    body: "Copy a prompt that turns old chats, decisions, and working preferences into import-ready Markdown.",
    action: "Copy prompt",
  },
  folders: [
    { id: "general", name: "General", files: 2, kind: "grid" },
    {
      id: "engineering",
      name: "Engineering",
      files: 1,
      kind: "scene",
      rects: scene(
        11,
        [
          "color-mix(in srgb, var(--chart-2) 45%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 22%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
    {
      id: "sales",
      name: "Sales",
      files: 0,
      kind: "scene",
      rects: scene(
        23,
        [
          "color-mix(in srgb, var(--chart-1) 40%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 25%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
    {
      id: "marketing",
      name: "Marketing",
      files: 0,
      kind: "scene",
      rects: scene(
        37,
        [
          "color-mix(in srgb, var(--chart-4) 45%, var(--card))",
          "color-mix(in srgb, var(--chart-5) 30%, var(--card))",
        ],
        "var(--chart-3)",
      ),
    },
    {
      id: "design",
      name: "Design",
      files: 0,
      kind: "scene",
      rects: scene(
        51,
        [
          "color-mix(in srgb, var(--chart-4) 35%, var(--card))",
          "color-mix(in srgb, var(--chart-2) 30%, var(--card))",
        ],
        "var(--chart-4)",
      ),
    },
    {
      id: "operations",
      name: "Operations",
      files: 0,
      kind: "scene",
      rects: scene(
        67,
        [
          "color-mix(in srgb, var(--chart-3) 35%, var(--card))",
          "color-mix(in srgb, var(--chart-5) 25%, var(--card))",
        ],
        "var(--warning)",
      ),
    },
  ] as Folder[],
};

export type ChatMessage = {
  id: number;
  from: "user" | "assistant";
  text: string;
};

// ---------------------------------------------------------------- overlays, menus and thread (shared content)

export type MenuIcon =
  | "settings"
  | "globe"
  | "lightbulb"
  | "plug"
  | "gift"
  | "database"
  | "coins"
  | "keyboard"
  | "book"
  | "users"
  | "lifebuoy"
  | "plus"
  | "map"
  | "home"
  | "archive"
  | "paperclip"
  | "listChecks"
  | "trash";

export const orgMenu: {
  id: string;
  label: string;
  icon: MenuIcon;
  keys?: string[];
}[][] = [
  [
    {
      id: "settings",
      label: "Settings",
      icon: "settings",
      keys: ["⌘", "⌥", "S"],
    },
    { id: "domains", label: "Domains", icon: "globe" },
    { id: "skills", label: "Skills", icon: "lightbulb" },
    { id: "integrations", label: "Integrations", icon: "plug" },
    { id: "referrals", label: "Referrals", icon: "gift" },
    { id: "database", label: "Database", icon: "database" },
    { id: "billing", label: "Billing & Usage", icon: "coins" },
  ],
  [
    { id: "shortcuts", label: "Keyboard Shortcuts", icon: "keyboard" },
    { id: "docs", label: "Docs", icon: "book" },
    { id: "community", label: "Join community", icon: "users" },
    { id: "support", label: "Support Request", icon: "lifebuoy" },
    { id: "new-company", label: "Create new company", icon: "plus" },
  ],
];

export const paletteCommands: {
  id: string;
  label: string;
  icon: MenuIcon;
  keys: string[];
}[] = [
  { id: "create-task", label: "Create task", icon: "plus", keys: ["C"] },
  {
    id: "overview",
    label: "Go to overview",
    icon: "home",
    keys: ["⌘", "⌥", "O"],
  },
  { id: "roadmap", label: "Open roadmap", icon: "map", keys: ["⌘", "⌥", "R"] },
  {
    id: "archived",
    label: "View archived tasks",
    icon: "archive",
    keys: ["⌘", "⌥", "A"],
  },
  {
    id: "settings",
    label: "Open settings",
    icon: "settings",
    keys: ["⌘", "⌥", "S"],
  },
];
export const paletteDepartments = [
  "operations",
  "engineering",
  "design",
  "marketing",
  "sales",
];
export const paletteWorkspaces = ["App", "Marketing Website"];
export const palettePlaceholder =
  "Search files, tasks, workspaces, or @ a department...";

export const shortcutList: { label: string; keys: string[] }[] = [
  { label: "Open command palette", keys: ["⌘", "K"] },
  { label: "Create task", keys: ["C"] },
  { label: "Open settings", keys: ["⌘", "⌥", "S"] },
  { label: "Go to overview", keys: ["⌘", "⌥", "O"] },
  { label: "Open roadmap", keys: ["⌘", "⌥", "R"] },
  { label: "Pan the canvas", keys: ["Drag"] },
];

export const roadmapStages = [
  { title: "Incorporate", note: "Entity, bank account and domain" },
  { title: "Build", note: "First app and landing page" },
  { title: "Launch", note: "Outreach, content and first customers" },
];

export const composerMenu: {
  id: string;
  label: string;
  icon: MenuIcon;
}[] = [
  { id: "attach", label: "Attach files", icon: "paperclip" },
  { id: "plan", label: "Turn on plan mode", icon: "listChecks" },
  { id: "clear", label: "Clear chat", icon: "trash" },
];

export type TaskRow = {
  id: string;
  name: string;
  agent: string;
  color: string;
  age: string;
  status: "running" | "done";
};

export const thread = {
  intro: [
    "Here is where Acme Labs stands today: the brand basics are in place, and two areas can move first.",
    "Brand and positioning, so every page and post sounds the same.",
    "Go-to-market, so your first customers hear from you this week.",
    "Want me to take one of them on now?",
  ],
  question: "Hey Atlas, what should I do next?",
  answer:
    "Based on what we have set up so far for Acme Labs, these are the areas you can start on next.",
  actions: [
    {
      id: "a1",
      title: "Build your first app or landing page",
      dept: "Engineering",
      agent: "engineering",
      color: "var(--chart-2)",
    },
    {
      id: "a2",
      title: "Incorporate your company",
      dept: "Operations",
      agent: "operations",
      color: "color-mix(in srgb, var(--chart-5) 50%, var(--chart-3))",
    },
    {
      id: "a3",
      title: "Start reaching out to potential customers",
      dept: "Sales",
      agent: "sales",
      color: "var(--chart-1)",
    },
    {
      id: "a4",
      title: "Open the company roadmap",
      dept: "General",
      agent: "general",
      color: "var(--chart-3)",
    },
  ],
};