orionfold-relay 0.25.1 → 0.27.0

package/dist/cli.js

@@ -1186,7 +1186,7 @@ var CURRENT_PLUGIN_API_VERSION, CAPABILITY_VALUES, ORIGIN_VALUES, PrimitivesBund
 var init_types = __esm({
   "src/lib/plugins/sdk/types.ts"() {
     "use strict";
-    CURRENT_PLUGIN_API_VERSION = "0.25";
+    CURRENT_PLUGIN_API_VERSION = "0.27";
     CAPABILITY_VALUES = ["fs", "net", "child_process", "env"];
     ORIGIN_VALUES = ["ainative-internal", "third-party"];
     PrimitivesBundleManifestSchema = z.object({
@@ -12982,7 +12982,7 @@ var init_registry6 = __esm({
     init_registry5();
     init_installer();
     init_schedule_spec();
-    SUPPORTED_API_VERSIONS = /* @__PURE__ */ new Set([CURRENT_PLUGIN_API_VERSION, "0.24"]);
+    SUPPORTED_API_VERSIONS = /* @__PURE__ */ new Set([CURRENT_PLUGIN_API_VERSION, "0.26"]);
     pluginCache = null;
     lastLoadedPluginIds = /* @__PURE__ */ new Set();
     PluginTableSchema = z16.object({
@@ -25913,8 +25913,8 @@ import { execFileSync as execFileSync3 } from "child_process";
 import yaml12 from "js-yaml";
 import semver from "semver";
 function relayCoreVersion() {
-  if (semver.valid("0.25.1")) {
-    return "0.25.1";
+  if (semver.valid("0.27.0")) {
+    return "0.27.0";
   }
   try {
     const root = getAppRoot(import.meta.dirname, 3);
@@ -26092,6 +26092,11 @@ async function installPack(source, options = {}) {
       const { reloadBlueprints: reloadBlueprints2 } = await Promise.resolve().then(() => (init_registry3(), registry_exports3));
       reloadBlueprints2();
     }
+    try {
+      const { revalidateTag } = await import("next/cache");
+      revalidateTag(`app-runtime:${pack.meta.id}`, { expire: 0 });
+    } catch {
+    }
     return {
       packId: pack.meta.id,
       packVersion: pack.meta.version,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionfold-relay",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "description": "Orionfold Relay — a local-first, multi-agent orchestration runtime and builder scaffold for AI-native work.",
   "keywords": [
     "ai",

package/src/app/api/data/clear/route.ts

@@ -4,7 +4,14 @@ import { isDataOpsAllowed } from "@/lib/data/staging-gate";
 
 export async function POST() {
   if (!isDataOpsAllowed()) {
-    return NextResponse.json(null, { status: 404 });
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          "Clearing data is a staging-only tool and is disabled on this build.",
+      },
+      { status: 403 }
+    );
   }
 
   try {

package/src/app/api/data/seed/route.ts

@@ -4,7 +4,14 @@ import { isDataOpsAllowed } from "@/lib/data/staging-gate";
 
 export async function POST() {
   if (!isDataOpsAllowed()) {
-    return NextResponse.json(null, { status: 404 });
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          "Sample data seeding is a staging-only tool and is disabled on this build.",
+      },
+      { status: 403 }
+    );
   }
 
   try {

package/src/app/profiles/page.tsx

@@ -1,5 +1,6 @@
 import { listProfiles, isBuiltin } from "@/lib/agents/profiles/registry";
 import { sortProfilesByName } from "@/lib/agents/profiles/sort";
+import { listApps } from "@/lib/apps/registry";
 import { ProfileBrowser } from "@/components/profiles/profile-browser";
 import { PageShell } from "@/components/shared/page-shell";
 
@@ -13,12 +14,17 @@ export default async function ProfilesPage() {
     }))
   );
 
+  // Installed packs — the source-of-truth set the client resolves each
+  // profile's pack provenance against (FEAT-8 pill / FEAT-7 filter via
+  // packOf). Just {id, name}; the pill renders the name, packOf gates on the id.
+  const installedPacks = listApps().map((a) => ({ id: a.id, name: a.name }));
+
   return (
     <PageShell
       title="Profiles"
       description="Browse and inspect agent profiles without blur-heavy detail surfaces."
     >
-      <ProfileBrowser initialProfiles={profiles} />
+      <ProfileBrowser initialProfiles={profiles} installedPacks={installedPacks} />
     </PageShell>
   );
 }

package/src/app/settings/page.tsx

@@ -14,10 +14,12 @@ import { ChannelsSection } from "@/components/settings/channels-section";
 import { InstanceSection } from "@/components/instance/instance-section";
 import { LicenseSection } from "@/components/settings/license-section";
 import { PageShell } from "@/components/shared/page-shell";
+import { isDataOpsAllowed } from "@/lib/data/staging-gate";
 
 export const dynamic = "force-dynamic";
 
 export default function SettingsPage() {
+  const dataOpsAllowed = isDataOpsAllowed();
   return (
     <PageShell
       title="Settings"
@@ -38,7 +40,7 @@ export default function SettingsPage() {
         <BudgetGuardrailsSection />
         <PermissionsSections />
         <DatabaseSnapshotsSection />
-        <DataManagementSection />
+        <DataManagementSection allowed={dataOpsAllowed} />
       </div>
     </PageShell>
   );

package/src/app/tables/page.tsx

@@ -1,6 +1,7 @@
 import { listTables } from "@/lib/data/tables";
 import { db } from "@/lib/db";
 import { projects } from "@/lib/db/schema";
+import { listApps } from "@/lib/apps/registry";
 import { TableBrowser } from "@/components/tables/table-browser";
 import { PageShell } from "@/components/shared/page-shell";
 
@@ -13,9 +14,17 @@ export default async function TablesPage() {
     .select({ id: projects.id, name: projects.name })
     .from(projects);
 
+  // Installed packs — mark tables whose projectId is a pack with a pack pill
+  // (FEAT-8) instead of the plain project name.
+  const installedPacks = listApps().map((a) => ({ id: a.id, name: a.name }));
+
   return (
     <PageShell title="Tables">
-      <TableBrowser initialTables={tables} projects={projectList} />
+      <TableBrowser
+        initialTables={tables}
+        projects={projectList}
+        installedPacks={installedPacks}
+      />
     </PageShell>
   );
 }

package/src/components/apps/kit-view/slots/header.tsx

@@ -22,8 +22,8 @@ interface HeaderSlotProps {
 export function HeaderSlotView({ slot, manifestPane }: HeaderSlotProps) {
   const { title, description, status, actions, cadenceChip, runNowBlueprintId, runNowVariables, periodChip, triggerSourceChip } = slot;
   return (
-    <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-      <div className="min-w-0 flex-1">
+    <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-x-4 sm:gap-y-2">
+      <div className="min-w-0 flex-1 sm:min-w-[16rem]">
         <h1 className="text-xl font-semibold tracking-tight line-clamp-2" title={title}>
           {title}
         </h1>
@@ -33,7 +33,13 @@ export function HeaderSlotView({ slot, manifestPane }: HeaderSlotProps) {
           </p>
         )}
       </div>
-      <div className="flex flex-wrap items-center gap-2 mt-2 sm:mt-0 sm:flex-nowrap sm:shrink-0">
+      {/*
+       * Action group stays a single non-wrapping row (chips + Run + manifest
+       * never split across lines). When the title can't yield enough inline
+       * space, the PARENT's flex-wrap drops this whole group to its own row —
+       * an intentional stack, not an accidental two-line break (FEAT-4).
+       */}
+      <div className="flex flex-nowrap items-center gap-2 sm:shrink-0">
         {status && <StatusChip status={status} size="md" />}
         {cadenceChip && (
           <ScheduleCadenceChip

package/src/components/apps/run-now-button.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Play } from "lucide-react";
 import { toast } from "sonner";
 import { RunNowSheet } from "./run-now-sheet";
+import { toastDraftCreated } from "./run-now-toast";
 import type { BlueprintVariable } from "@/lib/workflows/blueprints/types";
 
 interface RunNowButtonProps {
@@ -63,12 +64,15 @@ export function RunNowButton({
       });
       if (!res.ok) {
         const err = (await res.json().catch(() => ({}))) as { error?: string };
-        toast.error(err.error ?? `Failed to start (${res.status})`);
+        toast.error(err.error ?? `Failed to create draft (${res.status})`);
         return;
       }
-      toast.success("Run started");
+      const body = (await res.json().catch(() => ({}))) as {
+        workflowId?: string;
+      };
+      toastDraftCreated(body.workflowId);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Run failed");
+      toast.error(err instanceof Error ? err.message : "Could not create draft");
     } finally {
       setPending(false);
     }

package/src/components/apps/run-now-sheet.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/sheet";
 import { VariableInput } from "@/components/workflows/variable-input";
 import { validateVariables } from "@/lib/workflows/blueprints/validate-variables";
+import { toastDraftCreated } from "./run-now-toast";
 import type { BlueprintVariable } from "@/lib/workflows/blueprints/types";
 
 interface RunNowSheetProps {
@@ -74,10 +75,13 @@ export function RunNowSheet({
         }
         return;
       }
-      toast.success("Run started");
+      const body = (await res.json().catch(() => ({}))) as {
+        workflowId?: string;
+      };
+      toastDraftCreated(body.workflowId);
       setOpen(false);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Run failed");
+      toast.error(err instanceof Error ? err.message : "Could not create draft");
     } finally {
       setPending(false);
     }

package/src/components/apps/run-now-toast.ts

@@ -0,0 +1,27 @@
+import { toast } from "sonner";
+
+/**
+ * BUG-4: "Run now" POSTs the blueprint instantiate endpoint, which creates a
+ * `draft` workflow and does NOT dispatch it. The old toast said "Run started",
+ * which is a lie — nothing runs until the user hits Execute on the workflow
+ * detail page. Surface the truth: a draft was created, and deep-link to where
+ * it can be executed.
+ *
+ * Shared by `run-now-button.tsx` (direct POST) and `run-now-sheet.tsx`
+ * (variable path) so the honest copy can't drift between the two.
+ */
+export function toastDraftCreated(workflowId: string | undefined): void {
+  if (!workflowId) {
+    // No id to link to — still don't claim it started.
+    toast.success("Draft created. Open it in Workflows to Execute.");
+    return;
+  }
+  toast.success("Draft created. Open it in Workflows to Execute.", {
+    action: {
+      label: "Open workflow",
+      onClick: () => {
+        window.location.assign(`/workflows/${workflowId}`);
+      },
+    },
+  });
+}

package/src/components/profiles/profile-browser.tsx

@@ -17,18 +17,52 @@ import { ProfileCard } from "@/components/profiles/profile-card";
 import { ProfileImportDialog } from "@/components/profiles/profile-import-dialog";
 import { RepoImportWizard } from "@/components/profiles/repo-import-wizard";
 import type { AgentProfile } from "@/lib/agents/profiles/types";
+import { packOf } from "@/lib/apps/pack-of";
 
 interface ProfileWithBuiltin extends AgentProfile {
   isBuiltin?: boolean;
 }
 
+/** The installed-pack identity a profile carries (FEAT-8). {id, name} only. */
+export interface InstalledPackRef {
+  id: string;
+  name: string;
+}
+
 interface ProfileBrowserProps {
   initialProfiles: AgentProfile[];
+  /** Installed packs — resolves each profile's pack provenance (FEAT-8). */
+  installedPacks?: InstalledPackRef[];
 }
 
-export function ProfileBrowser({ initialProfiles }: ProfileBrowserProps) {
+export function ProfileBrowser({
+  initialProfiles,
+  installedPacks = [],
+}: ProfileBrowserProps) {
   const router = useRouter();
   const [profiles, setProfiles] = useState<ProfileWithBuiltin[]>(initialProfiles);
+
+  // Stable {id → display name} lookup + the gated id-set for packOf. Rebuilt
+  // only when the installed packs change (never on a profile refresh), so the
+  // pill survives refreshProfiles — which recomputes from the refreshed id.
+  const packNameById = useMemo(
+    () => new Map(installedPacks.map((p) => [p.id, p.name])),
+    [installedPacks]
+  );
+  const installedPackIds = useMemo(
+    () => new Set(installedPacks.map((p) => p.id)),
+    [installedPacks]
+  );
+  const packNameFor = useCallback(
+    (profile: AgentProfile): string | null => {
+      const packId = packOf(
+        { kind: "profile", id: profile.id },
+        installedPackIds
+      );
+      return packId ? packNameById.get(packId) ?? null : null;
+    },
+    [installedPackIds, packNameById]
+  );
   const [search, setSearch] = useState("");
   const [domainFilter, setDomainFilter] = useState<
     "all" | "work" | "personal"
@@ -201,6 +235,7 @@ export function ProfileBrowser({ initialProfiles }: ProfileBrowserProps) {
               key={profile.id}
               profile={profile}
               isBuiltin={profile.isBuiltin}
+              packName={packNameFor(profile)}
               onClick={() => router.push(`/profiles/${profile.id}`)}
             />
           ))}

package/src/components/profiles/profile-card.tsx

@@ -6,11 +6,14 @@ import { Download } from "lucide-react";
 import type { AgentRuntimeId } from "@/lib/agents/runtime/catalog";
 import { getSupportedRuntimes } from "@/lib/agents/profiles/compatibility";
 import { IconCircle, getProfileIcon, getDomainColors } from "@/lib/constants/card-icons";
+import { PackPill } from "@/components/shared/pack-pill";
 import type { AgentProfile } from "@/lib/agents/profiles/types";
 
 interface ProfileCardProps {
   profile: AgentProfile;
   isBuiltin?: boolean;
+  /** Display name of the pack that installed this profile, or null (FEAT-8). */
+  packName?: string | null;
   onClick: () => void;
 }
 
@@ -30,7 +33,7 @@ const RUNTIME_SHORT_LABEL: Record<AgentRuntimeId, string> = {
   ollama: "Ollama (Local)",
 };
 
-export function ProfileCard({ profile, isBuiltin = false, onClick }: ProfileCardProps) {
+export function ProfileCard({ profile, isBuiltin = false, packName = null, onClick }: ProfileCardProps) {
 
   return (
     <Card
@@ -83,7 +86,11 @@ export function ProfileCard({ profile, isBuiltin = false, onClick }: ProfileCard
         </div>
 
         <div className="flex items-center gap-3 text-xs text-muted-foreground">
-          {profile.importMeta ? (
+          {/* Pack provenance outranks every other origin: a pack-installed
+              profile is never "Custom"/"Discovered" — it belongs to its pack. */}
+          {packName ? (
+            <PackPill packName={packName} />
+          ) : profile.importMeta ? (
             <span className="flex items-center gap-1.5">
               <Badge variant="outline" className="border-purple-200 text-purple-600 dark:border-purple-800 dark:text-purple-400">
                 <Download className="mr-1 h-3 w-3" />

package/src/components/schedules/schedule-list.tsx

@@ -11,6 +11,8 @@ import { ScheduleStatusBadge } from "./schedule-status-badge";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
 import { EmptyState } from "@/components/shared/empty-state";
 import { describeCron } from "@/lib/schedules/interval-parser";
+import { PackPill } from "@/components/shared/pack-pill";
+import { packOf } from "@/lib/apps/pack-of";
 import { Clock, Heart, Pause, Play, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -39,6 +41,9 @@ interface ScheduleListProps {
 
 export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps) {
   const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [installedPacks, setInstalledPacks] = useState<
+    { id: string; name: string }[]
+  >([]);
   const [loaded, setLoaded] = useState(false);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
   const [selectedScheduleId, setSelectedScheduleId] = useState<string | null>(
@@ -57,6 +62,24 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
     refresh();
   }, [refresh]);
 
+  // Installed packs — a pack schedule's id is `app:<packId>:<sid>`, so packOf
+  // resolves provenance from the id alone (FEAT-8).
+  useEffect(() => {
+    fetch("/api/apps")
+      .then((r) => (r.ok ? r.json() : []))
+      .then((apps: Array<{ id: string; name: string }>) =>
+        setInstalledPacks(apps.map((a) => ({ id: a.id, name: a.name })))
+      )
+      .catch(() => {});
+  }, []);
+
+  const installedPackIds = new Set(installedPacks.map((p) => p.id));
+  const packNameById = new Map(installedPacks.map((p) => [p.id, p.name]));
+  const packNameForSchedule = (id: string): string | null => {
+    const packId = packOf({ kind: "schedule", id }, installedPackIds);
+    return packId ? packNameById.get(packId) ?? null : null;
+  };
+
   async function handlePauseResume(id: string, currentStatus: string) {
     const newStatus = currentStatus === "active" ? "paused" : "active";
     const res = await fetch(`/api/schedules/${id}`, {
@@ -163,7 +186,13 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
                     )}
                     {sched.name}
                   </CardTitle>
-                  <ScheduleStatusBadge status={sched.status} />
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    {(() => {
+                      const packName = packNameForSchedule(sched.id);
+                      return packName ? <PackPill packName={packName} /> : null;
+                    })()}
+                    <ScheduleStatusBadge status={sched.status} />
+                  </div>
                 </div>
               </CardHeader>
               <CardContent>

package/src/components/settings/data-management-section.tsx

@@ -15,7 +15,35 @@ import { ConfirmDialog } from "@/components/shared/confirm-dialog";
 import { toast } from "sonner";
 import { Loader2, Trash2, Database } from "lucide-react";
 
-export function DataManagementSection() {
+/**
+ * Reads a JSON body defensively. A gated route returns an explanatory
+ * `{success:false,error}` body with a non-2xx status; a genuine network/parse
+ * failure has no parseable body. Distinguishing the two is what stops a
+ * deliberate gate (403) from being disguised as "Network error" (BUG-5).
+ */
+async function readResult(
+  res: Response
+): Promise<{ ok: boolean; body: Record<string, unknown> | null }> {
+  let body: Record<string, unknown> | null = null;
+  try {
+    body = (await res.json()) as Record<string, unknown> | null;
+  } catch {
+    body = null;
+  }
+  return { ok: res.ok, body };
+}
+
+/** Prefer the route's explanatory reason; fall back to the HTTP status. */
+function failureMessage(
+  res: Response,
+  body: Record<string, unknown> | null,
+  fallback: string
+): string {
+  if (body && typeof body.error === "string") return body.error;
+  return `${fallback} (HTTP ${res.status})`;
+}
+
+export function DataManagementSection({ allowed = true }: { allowed?: boolean }) {
   const [clearOpen, setClearOpen] = useState(false);
   const [seedOpen, setSeedOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -24,14 +52,14 @@ export function DataManagementSection() {
     setLoading(true);
     try {
       const res = await fetch("/api/data/clear", { method: "POST" });
-      const data = await res.json();
-      if (data.success) {
-        const d = data.deleted;
+      const { ok, body } = await readResult(res);
+      if (ok && body?.success) {
+        const d = body.deleted as Record<string, number>;
         toast.success(
           `Cleared ${d.projects} projects, ${d.tasks} tasks, ${d.workflows} workflows, ${d.schedules} schedules, ${d.documents} documents, ${d.conversations} conversations, ${d.chatMessages} messages, ${d.learnedContext} learned context, ${d.views} views, ${d.usageLedger} usage entries, ${d.agentLogs} logs, ${d.notifications} notifications, ${d.sampleProfiles} sample profiles, ${d.files} files`
         );
       } else {
-        toast.error(`Clear failed: ${data.error}`);
+        toast.error(failureMessage(res, body, "Clear failed"));
       }
     } catch {
       toast.error("Clear failed. Network error");
@@ -44,14 +72,14 @@ export function DataManagementSection() {
     setLoading(true);
     try {
       const res = await fetch("/api/data/seed", { method: "POST" });
-      const data = await res.json();
-      if (data.success) {
-        const s = data.seeded;
+      const { ok, body } = await readResult(res);
+      if (ok && body?.success) {
+        const s = body.seeded as Record<string, number>;
         toast.success(
           `Seeded ${s.profiles} profiles, ${s.projects} projects, ${s.tasks} tasks, ${s.workflows} workflows, ${s.schedules} schedules, ${s.documents} documents, ${s.userTables} tables (${s.userTableRows} rows, ${s.tableViews} views, ${s.tableTriggers} triggers, ${s.tableRelationships} links), ${s.conversations} conversations, ${s.chatMessages} messages, ${s.agentMemory} memories, ${s.agentMessages} handoffs, ${s.channelConfigs} channels (${s.channelBindings} bindings), ${s.environmentScans} scans (${s.environmentArtifacts} artifacts, ${s.environmentCheckpoints} checkpoints, ${s.environmentTemplates} templates), ${s.workflowExecutionStats} workflow-stats, ${s.scheduleFiringMetrics} firing-metrics, ${s.usageLedger} usage entries, ${s.learnedContext} learned context, ${s.views} views, ${s.profileTestResults} test results, ${s.repoImports} repo imports, ${s.agentLogs} logs, ${s.notifications} notifications`
         );
       } else {
-        toast.error(`Seed failed: ${data.error}`);
+        toast.error(failureMessage(res, body, "Seed failed"));
       }
     } catch {
       toast.error("Seed failed. Network error");
@@ -60,6 +88,25 @@ export function DataManagementSection() {
     }
   }
 
+  if (!allowed) {
+    return (
+      <Card className="surface-card">
+        <CardHeader>
+          <CardTitle>Data Management</CardTitle>
+          <CardDescription>
+            Reset or populate your Orionfold Relay instance
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Seeding and clearing sample data are staging-only tools. They are
+            turned off on this build so your real data stays safe.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
   return (
     <>
       <Card className="surface-card">

package/src/components/shared/pack-pill.tsx

@@ -0,0 +1,39 @@
+import { Package } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface PackPillProps {
+  /** The installed pack's display name (e.g. "Relay Agency"), from its manifest. */
+  packName: string;
+  className?: string;
+}
+
+/**
+ * PackPill — provenance label marking a primitive (profile, blueprint, table,
+ * schedule) as installed by a pack (FEAT-8, spec:
+ * features/fix-app-shell-activation-redesign.md).
+ *
+ * Deliberately NOT a StatusChip / status-family: pack provenance is an open-set
+ * identity ("which pack"), not one of the 5 fixed status dimensions. It shares
+ * the visual system by building on the same `Badge` primitive StatusChip uses,
+ * with its own icon (package) and a distinct amber color family so it reads as
+ * a provenance marker — the sibling of the card's existing Imported/Discovered/
+ * Built-in badges, and outranks the "Custom" fallback (a pack-installed
+ * primitive is never "Custom").
+ */
+export function PackPill({ packName, className }: PackPillProps) {
+  return (
+    <Badge
+      data-testid="pack-pill"
+      variant="outline"
+      title={`Installed by the ${packName} pack`}
+      className={cn(
+        "border-amber-200 text-amber-700 dark:border-amber-800 dark:text-amber-400",
+        className
+      )}
+    >
+      <Package className="mr-1 h-3 w-3" />
+      {packName}
+    </Badge>
+  );
+}

package/src/components/tables/table-browser.tsx

@@ -19,15 +19,37 @@ import { TableCreateSheet } from "./table-create-sheet";
 import { FilterBar } from "@/components/shared/filter-bar";
 import { EmptyState } from "@/components/shared/empty-state";
 import { Table2 } from "lucide-react";
+import { packOf } from "@/lib/apps/pack-of";
 import type { TableWithRelations } from "./types";
 
 interface TableBrowserProps {
   initialTables: TableWithRelations[];
   projects: { id: string; name: string }[];
+  /** Installed packs — marks tables whose project is a pack (FEAT-8). */
+  installedPacks?: { id: string; name: string }[];
 }
 
-export function TableBrowser({ initialTables, projects }: TableBrowserProps) {
+export function TableBrowser({
+  initialTables,
+  projects,
+  installedPacks = [],
+}: TableBrowserProps) {
   const [tables, setTables] = useState(initialTables);
+  // {projectId → pack name} for pack-installed projects, via the shared
+  // resolver (tables associate to a pack by projectId === packId).
+  const installedPackIds = new Set(installedPacks.map((p) => p.id));
+  const packNameById = new Map(installedPacks.map((p) => [p.id, p.name]));
+  const packNameForProject = useCallback(
+    (projectId: string | null | undefined): string | null => {
+      const packId = packOf(
+        { kind: "table", id: "", projectId: projectId ?? undefined },
+        installedPackIds
+      );
+      return packId ? packNameById.get(packId) ?? null : null;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [installedPacks]
+  );
   const [view, setView] = useState<"table" | "grid">("table");
   const [search, setSearch] = useState("");
   const [sourceFilter, setSourceFilter] = useState<string>("all");
@@ -214,12 +236,14 @@ export function TableBrowser({ initialTables, projects }: TableBrowserProps) {
           onToggleSelectAll={toggleSelectAll}
           onSelect={navigate}
           onOpen={navigate}
+          packNameForProject={packNameForProject}
         />
       ) : (
         <TableGrid
           tables={filtered}
           onSelect={navigate}
           onOpen={navigate}
+          packNameForProject={packNameForProject}
         />
       )}
 

package/src/components/tables/table-grid.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Table2 } from "lucide-react";
 import { tableSourceVariant } from "@/lib/constants/table-status";
+import { PackPill } from "@/components/shared/pack-pill";
 import { formatRowCount, formatColumnCount } from "./utils";
 import type { TableWithRelations } from "./types";
 
@@ -11,9 +12,16 @@ interface TableGridProps {
   tables: TableWithRelations[];
   onSelect: (id: string) => void;
   onOpen: (id: string) => void;
+  /** Resolves a projectId to its pack display name, or null (FEAT-8). */
+  packNameForProject?: (projectId: string | null | undefined) => string | null;
 }
 
-export function TableGrid({ tables, onSelect, onOpen }: TableGridProps) {
+export function TableGrid({
+  tables,
+  onSelect,
+  onOpen,
+  packNameForProject,
+}: TableGridProps) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {tables.map((t) => (
@@ -49,9 +57,13 @@ export function TableGrid({ tables, onSelect, onOpen }: TableGridProps) {
             <div className="flex items-center gap-3 text-xs text-muted-foreground">
               <span>{formatColumnCount(t.columnCount)}</span>
               <span>{formatRowCount(t.rowCount)}</span>
-              {t.projectName && (
-                <span className="truncate">{t.projectName}</span>
-              )}
+              {(() => {
+                const packName = packNameForProject?.(t.projectId);
+                if (packName) return <PackPill packName={packName} />;
+                return t.projectName ? (
+                  <span className="truncate">{t.projectName}</span>
+                ) : null;
+              })()}
             </div>
           </CardContent>
         </Card>