feat(desktop): add Passport main screen with travel record

/passport route showing the passport card beside the holder's history:
community visas and channel stamps, recent notes, follow list, and an
operator-only agent record. Depth follows access — viewers see the
public record, holders and agent operators see everything available.
Reachable via "View full passport" on the passport dialog.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>

desktop/scripts/check-pubkey-truncation.mjs

@@ -28,6 +28,8 @@ const overrides = new Set([
   "src/features/messages/lib/threadPanel.ts:395",
   "src/features/projects/ui/ProjectsView.tsx:166",
   "src/features/projects/ui/ProjectsOverviewPanel.tsx:209",
+  "src/features/passport/ui/PassportRecordSections.tsx:156",
+  "src/features/passport/ui/PassportScreen.tsx:127",
 ]);
 
 await runPubkeyTruncationCheck({

desktop/src/app/routes.ts

@@ -3,6 +3,7 @@ import { index, rootRoute, route } from "@tanstack/virtual-file-routes";
 export const routes = rootRoute("root.tsx", [
   index("index.tsx"),
   route("/agents", "agents.tsx"),
+  route("/passport", "passport.tsx"),
   route("/pulse", "pulse.tsx"),
   route("/reminders", "reminders.tsx"),
   route("/settings", "settings.tsx"),

desktop/src/app/routes/passport.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
+
+type PassportRouteSearch = {
+  /** Passport holder. Omitted = the current user's own passport. */
+  pubkey?: string;
+};
+
+function validatePassportSearch(
+  search: Record<string, unknown>,
+): PassportRouteSearch {
+  return {
+    pubkey:
+      typeof search.pubkey === "string" && search.pubkey.length > 0
+        ? search.pubkey
+        : undefined,
+  };
+}
+
+const PassportScreen = React.lazy(async () => {
+  const module = await import("@/features/passport/ui/PassportScreen");
+  return { default: module.PassportScreen };
+});
+
+export const Route = createFileRoute("/passport")({
+  validateSearch: validatePassportSearch,
+  component: PassportRouteComponent,
+});
+
+function PassportRouteComponent() {
+  const { pubkey } = Route.useSearch();
+
+  return (
+    <React.Suspense fallback={<ViewLoadingFallback kind="workflows" />}>
+      <PassportScreen pubkey={pubkey} />
+    </React.Suspense>
+  );
+}

desktop/src/features/passport/ui/PassportRecordSections.tsx

@@ -0,0 +1,202 @@
+import type * as React from "react";
+import { ArrowUpRight } from "lucide-react";
+
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import type { UserNote } from "@/shared/api/socialTypes";
+import type { UserProfileSummary } from "@/shared/api/types";
+import { truncatePubkey } from "@/shared/lib/pubkey";
+import { cn } from "@/shared/lib/cn";
+
+/** Format a date the way a passport stamp would: `12 MAR 2026`. */
+export function formatStampDate(date: Date): string {
+  return date
+    .toLocaleDateString(undefined, {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    })
+    .toUpperCase();
+}
+
+// ── Section frame ────────────────────────────────────────────────────────────
+
+export function RecordSection({
+  children,
+  label,
+  trailing,
+}: {
+  children: React.ReactNode;
+  label: string;
+  trailing?: React.ReactNode;
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex items-baseline gap-3">
+        <h2 className="shrink-0 text-2xs font-semibold tracking-[0.3em] text-muted-foreground uppercase">
+          {label}
+        </h2>
+        <div className="h-px flex-1 bg-border/60" />
+        {trailing ? (
+          <span className="shrink-0 text-2xs text-muted-foreground">
+            {trailing}
+          </span>
+        ) : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+// ── Stamps ───────────────────────────────────────────────────────────────────
+
+// Passport-stamp "inks": rotate through the chart tokens so a page of stamps
+// reads as collected over time rather than as a uniform list.
+const STAMP_TONES = [
+  "border-chart-1 text-chart-1",
+  "border-chart-2 text-chart-2",
+  "border-chart-3 text-chart-3",
+  "border-chart-4 text-chart-4",
+  "border-chart-5 text-chart-5",
+] as const;
+
+const STAMP_ROTATIONS = [
+  "-rotate-2",
+  "rotate-1",
+  "rotate-2",
+  "-rotate-1",
+  "rotate-0",
+] as const;
+
+export function PassportStamp({
+  index,
+  onClick,
+  subtitle,
+  testId,
+  title,
+}: {
+  /** Position in the stamp page — picks a stable ink color and tilt. */
+  index: number;
+  onClick?: () => void;
+  subtitle?: string | null;
+  testId?: string;
+  title: string;
+}) {
+  const tone = STAMP_TONES[index % STAMP_TONES.length];
+  const rotation = STAMP_ROTATIONS[index % STAMP_ROTATIONS.length];
+  const Element = onClick ? "button" : "div";
+
+  return (
+    <Element
+      className={cn(
+        "group inline-flex max-w-56 min-w-0 flex-col items-start rounded-xl border-2 px-3.5 py-2 text-left opacity-90 saturate-[0.85] transition-transform",
+        tone,
+        rotation,
+        onClick &&
+          "cursor-pointer hover:rotate-0 hover:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+      )}
+      data-testid={testId}
+      onClick={onClick}
+      type={onClick ? "button" : undefined}
+    >
+      <span className="flex w-full min-w-0 items-center gap-1 text-xs font-bold tracking-[0.15em] uppercase">
+        <span className="min-w-0 truncate">{title}</span>
+        {onClick ? (
+          <ArrowUpRight
+            aria-hidden="true"
+            className="h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+          />
+        ) : null}
+      </span>
+      {subtitle ? (
+        <span className="w-full min-w-0 truncate text-3xs font-medium tracking-[0.2em] uppercase opacity-80">
+          {subtitle}
+        </span>
+      ) : null}
+    </Element>
+  );
+}
+
+export function StampPage({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-3.5 py-1">{children}</div>
+  );
+}
+
+// ── Notes ledger ─────────────────────────────────────────────────────────────
+
+export function NoteRecordList({ notes }: { notes: UserNote[] }) {
+  return (
+    <ul className="flex flex-col" data-testid="passport-notes">
+      {notes.map((note) => (
+        <li
+          className="flex min-w-0 items-baseline gap-4 border-b border-dashed border-border/60 py-2.5 last:border-b-0"
+          key={note.id}
+        >
+          <span className="shrink-0 font-mono text-2xs text-muted-foreground">
+            {formatStampDate(new Date(note.createdAt * 1_000))}
+          </span>
+          <p className="min-w-0 flex-1 truncate text-sm text-foreground/90">
+            {note.content}
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ── Following strip ──────────────────────────────────────────────────────────
+
+export function FollowingStrip({
+  contactPubkeys,
+  profiles,
+}: {
+  contactPubkeys: string[];
+  profiles: Record<string, UserProfileSummary>;
+}) {
+  const shown = contactPubkeys.slice(0, 12);
+
+  return (
+    <div className="flex items-center gap-3" data-testid="passport-following">
+      <div className="flex -space-x-2">
+        {shown.map((contactPubkey) => {
+          const profile = profiles[contactPubkey.toLowerCase()];
+          const label =
+            profile?.displayName ??
+            profile?.name ??
+            truncatePubkey(contactPubkey);
+          return (
+            <ProfileAvatar
+              avatarUrl={profile?.avatarUrl ?? null}
+              className="h-8 w-8 border-2 border-background text-xs"
+              iconClassName="h-3.5 w-3.5"
+              key={contactPubkey}
+              label={label}
+            />
+          );
+        })}
+      </div>
+      {contactPubkeys.length > shown.length ? (
+        <span className="text-xs text-muted-foreground">
+          +{contactPubkeys.length - shown.length} more
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+// ── Empty record ─────────────────────────────────────────────────────────────
+
+export function EmptyRecord({ displayName }: { displayName: string }) {
+  return (
+    <div
+      className="flex min-h-40 flex-col items-center justify-center rounded-2xl border border-dashed border-border/70 px-6 py-10 text-center"
+      data-testid="passport-empty-record"
+    >
+      <p className="text-sm font-medium">No record on this community yet</p>
+      <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+        Stamps appear here as {displayName} joins channels, posts notes, and
+        travels between communities.
+      </p>
+    </div>
+  );
+}

desktop/src/features/passport/ui/PassportScreen.tsx

@@ -0,0 +1,358 @@
+import * as React from "react";
+import { Activity, Copy, UserRound } from "lucide-react";
+import { toast } from "sonner";
+
+import { useAppNavigation } from "@/app/navigation/useAppNavigation";
+import {
+  useAgentMemoryQuery,
+  useIsManagedAgent,
+} from "@/features/agent-memory/hooks";
+import {
+  useManagedAgentsQuery,
+  useRelayAgentsQuery,
+} from "@/features/agents/hooks";
+import { useOpenAgentActivity } from "@/features/agents/useOpenAgentActivity";
+import { useChannelsQuery } from "@/features/channels/hooks";
+import { useCommunities } from "@/features/communities/useCommunities";
+import {
+  EmptyRecord,
+  FollowingStrip,
+  formatStampDate,
+  NoteRecordList,
+  PassportStamp,
+  RecordSection,
+  StampPage,
+} from "@/features/passport/ui/PassportRecordSections";
+import {
+  useContactListQuery,
+  useUserProfileQuery,
+  useUsersBatchQuery,
+} from "@/features/profile/hooks";
+import { PassportCard } from "@/features/profile/ui/PassportCard";
+import { useMyNotesQuery } from "@/features/pulse/hooks";
+import { useIdentityQuery } from "@/shared/api/hooks";
+import { writeTextToClipboard } from "@/shared/lib/clipboard";
+import { safeNpub } from "@/shared/lib/nostrUtils";
+import { truncatePubkey } from "@/shared/lib/pubkey";
+import { Button } from "@/shared/ui/button";
+import { Skeleton } from "@/shared/ui/skeleton";
+
+const RECENT_NOTES_SHOWN = 6;
+
+type PassportScreenProps = {
+  /** Holder pubkey from the route search; omitted = the viewer's own passport. */
+  pubkey?: string;
+};
+
+/**
+ * The Passport main screen: the identity card as the hero, next to the
+ * holder's record of travel — communities and channels rendered as collected
+ * stamps, plus notes and the follow list. Depth is honest to access: the
+ * viewer sees more for themselves and for agents they operate (memories,
+ * activity), and only the public record for everyone else.
+ */
+export function PassportScreen({
+  pubkey: pubkeyFromSearch,
+}: PassportScreenProps) {
+  const identityQuery = useIdentityQuery();
+  const selfPubkey = identityQuery.data?.pubkey ?? null;
+  const pubkey = pubkeyFromSearch ?? selfPubkey;
+  const pubkeyLower = pubkey?.toLowerCase() ?? null;
+  const isSelf =
+    pubkeyLower !== null && pubkeyLower === selfPubkey?.toLowerCase();
+
+  const profileQuery = useUserProfileQuery(pubkey ?? undefined);
+  const profile = profileQuery.data;
+  const summaryQuery = useUsersBatchQuery(pubkey ? [pubkey] : []);
+  const summary = pubkeyLower
+    ? summaryQuery.data?.profiles[pubkeyLower]
+    : undefined;
+
+  const relayAgentsQuery = useRelayAgentsQuery();
+  const managedAgentsQuery = useManagedAgentsQuery();
+  const relayAgent = relayAgentsQuery.data?.find(
+    (agent) => agent.pubkey.toLowerCase() === pubkeyLower,
+  );
+  const managedAgent = managedAgentsQuery.data?.find(
+    (agent) => agent.pubkey.toLowerCase() === pubkeyLower,
+  );
+  const isAgent = Boolean(
+    relayAgent ??
+      managedAgent ??
+      (summary?.isAgent || profile?.ownerPubkey != null),
+  );
+  const isLocallyManaged = useIsManagedAgent(isAgent ? pubkey : null);
+  const viewerIsOwner =
+    isAgent &&
+    (isLocallyManaged === true ||
+      (profile?.ownerPubkey != null &&
+        profile.ownerPubkey.toLowerCase() === selfPubkey?.toLowerCase()));
+
+  // Record sources. Channel membership is derived from the viewer's channel
+  // list, so private rooms only ever appear to viewers already in them.
+  const { activeCommunity, communities } = useCommunities();
+  const channelsQuery = useChannelsQuery();
+  const notesQuery = useMyNotesQuery(pubkey ?? undefined);
+  const contactsQuery = useContactListQuery(pubkey ?? undefined);
+  const memoryQuery = useAgentMemoryQuery(pubkey, { enabled: viewerIsOwner });
+  const { canOpenAgentActivity, openAgentActivity } = useOpenAgentActivity();
+  const { goChannel } = useAppNavigation();
+
+  const memberChannels = React.useMemo(() => {
+    const links = new Map<string, { id: string; name: string }>();
+    relayAgent?.channels.forEach((name, index) => {
+      const id = relayAgent.channelIds[index] ?? name;
+      links.set(id, { id, name });
+    });
+    for (const channel of channelsQuery.data ?? []) {
+      if (channel.channelType === "dm") {
+        continue;
+      }
+      const isMember = channel.memberPubkeys.some(
+        (memberPubkey) => memberPubkey.toLowerCase() === pubkeyLower,
+      );
+      if (isMember) {
+        links.set(channel.id, { id: channel.id, name: channel.name });
+      }
+    }
+    return [...links.values()].sort((left, right) =>
+      left.name.localeCompare(right.name),
+    );
+  }, [channelsQuery.data, pubkeyLower, relayAgent]);
+
+  const contactPubkeys = React.useMemo(
+    () => contactsQuery.data?.contacts.map((contact) => contact.pubkey) ?? [],
+    [contactsQuery.data],
+  );
+  const contactProfilesQuery = useUsersBatchQuery(contactPubkeys.slice(0, 12));
+
+  // Card fields, resolved the same way the passport dialog resolves them.
+  const displayName =
+    profile?.displayName?.trim() ||
+    (pubkey ? truncatePubkey(pubkey) : "Unknown");
+  const ownerProfileQuery = useUserProfileQuery(
+    profile?.ownerPubkey ?? undefined,
+  );
+  const operatorName = profile?.ownerPubkey
+    ? ownerProfileQuery.data?.nip05Handle?.trim() ||
+      ownerProfileQuery.data?.displayName?.trim() ||
+      truncatePubkey(profile.ownerPubkey)
+    : null;
+  const npub = pubkey ? (safeNpub(pubkey) ?? pubkey) : null;
+
+  const notes = notesQuery.data?.notes.slice(0, RECENT_NOTES_SHOWN) ?? [];
+  const memoryCount = memoryQuery.data
+    ? memoryQuery.data.memories.length + (memoryQuery.data.core ? 1 : 0)
+    : null;
+  const recordLoading =
+    channelsQuery.isLoading || notesQuery.isLoading || contactsQuery.isLoading;
+  const hasAgentRecord =
+    viewerIsOwner && (managedAgent !== undefined || memoryCount !== null);
+  const recordIsEmpty =
+    !recordLoading &&
+    memberChannels.length === 0 &&
+    notes.length === 0 &&
+    contactPubkeys.length === 0 &&
+    !isSelf &&
+    !hasAgentRecord;
+
+  const copyKey = async () => {
+    if (!npub) {
+      return;
+    }
+    await writeTextToClipboard(npub);
+    toast.success("Identity key copied.");
+  };
+
+  if (!pubkey) {
+    return (
+      <div className="flex min-h-0 min-w-0 flex-1 items-start justify-center overflow-y-auto p-10">
+        <Skeleton className="h-96 w-80 rounded-3xl" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto"
+      data-testid="passport-screen"
+    >
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 pb-16 pt-10 sm:px-8">
+        <header className="flex flex-col gap-1">
+          <h1 className="text-xl font-semibold tracking-tight">Passport</h1>
+          <p className="text-sm text-muted-foreground">
+            {isSelf
+              ? "Your portable identity and its record of travel across communities."
+              : `${displayName}'s portable identity — the record shows what is visible to you.`}
+          </p>
+        </header>
+
+        <div className="grid gap-10 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
+          {/* The card column stays pinned while the record scrolls. */}
+          <div className="flex flex-col items-center gap-3 lg:sticky lg:top-6 lg:self-start">
+            <PassportCard
+              avatarUrl={profile?.avatarUrl ?? null}
+              communityName={activeCommunity?.name ?? null}
+              displayName={displayName}
+              handle={profile?.nip05Handle ?? null}
+              isAgent={isAgent}
+              operatorName={operatorName}
+              pubkey={pubkey}
+            />
+            <div className="flex items-center gap-1">
+              <Button
+                className="text-muted-foreground hover:text-foreground"
+                data-testid="passport-screen-copy-key"
+                onClick={() => void copyKey()}
+                size="sm"
+                variant="ghost"
+              >
+                <Copy className="mr-2 h-3.5 w-3.5" />
+                Copy identity key
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex min-w-0 flex-col gap-8">
+            {isSelf && communities.length > 0 ? (
+              <RecordSection
+                label="Visas · Communities"
+                trailing={`${communities.length}`}
+              >
+                <StampPage>
+                  {communities.map((community, index) => (
+                    <PassportStamp
+                      index={index}
+                      key={community.id}
+                      subtitle={`since ${formatStampDate(new Date(community.addedAt))}`}
+                      testId="passport-community-stamp"
+                      title={community.name}
+                    />
+                  ))}
+                </StampPage>
+              </RecordSection>
+            ) : null}
+
+            {memberChannels.length > 0 ? (
+              <RecordSection
+                label="Stamps · Channels"
+                trailing={`${memberChannels.length}`}
+              >
+                <StampPage>
+                  {memberChannels.map((channel, index) => (
+                    <PassportStamp
+                      index={index + 2}
+                      key={channel.id}
+                      onClick={() => void goChannel(channel.id)}
+                      testId="passport-channel-stamp"
+                      title={`#${channel.name}`}
+                    />
+                  ))}
+                </StampPage>
+              </RecordSection>
+            ) : null}
+
+            {hasAgentRecord ? (
+              <RecordSection label="Agent record · Operator only">
+                <div className="flex flex-col gap-3">
+                  <dl className="grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3">
+                    {managedAgent ? (
+                      <>
+                        <AgentRecordField label="Status">
+                          {managedAgent.status}
+                        </AgentRecordField>
+                        <AgentRecordField label="Harness">
+                          {managedAgent.runtime ?? managedAgent.agentCommand}
+                        </AgentRecordField>
+                        {managedAgent.model ? (
+                          <AgentRecordField label="Model">
+                            {managedAgent.model}
+                          </AgentRecordField>
+                        ) : null}
+                      </>
+                    ) : null}
+                    {memoryCount !== null ? (
+                      <AgentRecordField label="Memories">
+                        {memoryCount}
+                      </AgentRecordField>
+                    ) : null}
+                  </dl>
+                  {canOpenAgentActivity(pubkey) ? (
+                    <div>
+                      <Button
+                        data-testid="passport-open-activity"
+                        onClick={() => openAgentActivity(pubkey)}
+                        size="sm"
+                        variant="outline"
+                      >
+                        <Activity className="mr-2 h-3.5 w-3.5" />
+                        Open activity log
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+              </RecordSection>
+            ) : null}
+
+            {notes.length > 0 ? (
+              <RecordSection label="Log · Recent notes">
+                <NoteRecordList notes={notes} />
+              </RecordSection>
+            ) : null}
+
+            {contactPubkeys.length > 0 ? (
+              <RecordSection
+                label="Traveling with · Following"
+                trailing={`${contactPubkeys.length}`}
+              >
+                <FollowingStrip
+                  contactPubkeys={contactPubkeys}
+                  profiles={contactProfilesQuery.data?.profiles ?? {}}
+                />
+              </RecordSection>
+            ) : null}
+
+            {recordLoading && memberChannels.length === 0 ? (
+              <div className="flex flex-col gap-3">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="h-16 w-full rounded-xl" />
+                <Skeleton className="h-16 w-3/4 rounded-xl" />
+              </div>
+            ) : null}
+            {recordIsEmpty ? <EmptyRecord displayName={displayName} /> : null}
+
+            {!isSelf && !viewerIsOwner ? (
+              <p className="flex items-center gap-2 text-xs text-muted-foreground">
+                <UserRound
+                  aria-hidden="true"
+                  className="h-3.5 w-3.5 shrink-0"
+                />
+                You are viewing the public record. Holders and their operators
+                see the full history — memories, activity, and communities.
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AgentRecordField({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col">
+      <dt className="text-3xs font-medium tracking-[0.25em] text-muted-foreground uppercase">
+        {label}
+      </dt>
+      <dd className="truncate text-sm font-medium text-foreground/90">
+        {children}
+      </dd>
+    </div>
+  );
+}

desktop/src/features/profile/ui/PassportDialog.tsx

@@ -1,4 +1,5 @@
-import { Copy } from "lucide-react";
+import { useNavigate } from "@tanstack/react-router";
+import { BookOpenText, Copy } from "lucide-react";
 import { toast } from "sonner";
 
 import { useCommunities } from "@/features/communities/useCommunities";
@@ -41,6 +42,7 @@ export function PassportDialog({
   ...cardProps
 }: PassportDialogProps) {
   const { activeCommunity } = useCommunities();
+  const navigate = useNavigate();
   const ownerProfileQuery = useUserProfileQuery(ownerPubkey ?? undefined);
   const operatorName = ownerPubkey
     ? ownerProfileQuery.data?.nip05Handle?.trim() ||
@@ -54,6 +56,14 @@ export function PassportDialog({
     toast.success("Identity key copied.");
   };
 
+  const openFullPassport = () => {
+    onOpenChange(false);
+    void navigate({
+      search: { pubkey: cardProps.pubkey },
+      to: "/passport",
+    });
+  };
+
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent
@@ -74,16 +84,28 @@ export function PassportDialog({
           communityName={activeCommunity?.name ?? null}
           operatorName={operatorName}
         />
-        <Button
-          className="text-muted-foreground hover:text-foreground"
-          data-testid="passport-copy-key"
-          onClick={() => void copyKey()}
-          size="sm"
-          variant="ghost"
-        >
-          <Copy className="mr-2 h-3.5 w-3.5" />
-          Copy identity key
-        </Button>
+        <div className="flex items-center gap-1">
+          <Button
+            className="text-muted-foreground hover:text-foreground"
+            data-testid="passport-copy-key"
+            onClick={() => void copyKey()}
+            size="sm"
+            variant="ghost"
+          >
+            <Copy className="mr-2 h-3.5 w-3.5" />
+            Copy identity key
+          </Button>
+          <Button
+            className="text-muted-foreground hover:text-foreground"
+            data-testid="passport-view-full"
+            onClick={openFullPassport}
+            size="sm"
+            variant="ghost"
+          >
+            <BookOpenText className="mr-2 h-3.5 w-3.5" />
+            View full passport
+          </Button>
+        </div>
       </DialogContent>
     </Dialog>
   );

desktop/tailwind.config.js

@@ -77,6 +77,13 @@ export default {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",