@agent-native/dispatch 0.7.0 → 0.8.0

package/src/components/approval-value-block.spec.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  ApprovalValueBlock,
+  approvalValuePreview,
+  parseApprovalValue,
+} from "./approval-value-block";
+
+describe("approval value display", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("parses serialized approval values and preserves plain strings", () => {
+    expect(
+      parseApprovalValue('{"scope":"all","path":"context/brand.md"}'),
+    ).toEqual({
+      scope: "all",
+      path: "context/brand.md",
+    });
+    expect(parseApprovalValue("plain text")).toBe("plain text");
+    expect(parseApprovalValue(null)).toBeNull();
+  });
+
+  it("formats before/after payloads for readable approval review", () => {
+    expect(approvalValuePreview(null)).toBe("None");
+    expect(approvalValuePreview("plain text")).toBe("plain text");
+    expect(approvalValuePreview({ scope: "all" })).toBe(
+      JSON.stringify({ scope: "all" }, null, 2),
+    );
+
+    act(() => {
+      root.render(
+        <ApprovalValueBlock
+          label="After"
+          value={{ path: "context/brand.md", scope: "all" }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("After");
+    expect(container.textContent).toContain('"path": "context/brand.md"');
+    expect(container.textContent).toContain('"scope": "all"');
+  });
+});

package/src/components/approval-value-block.tsx

@@ -0,0 +1,33 @@
+export function parseApprovalValue(value: string | null | undefined): unknown {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+export function approvalValuePreview(value: unknown): string {
+  if (value === null || value === undefined) return "None";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+
+export function ApprovalValueBlock({
+  label,
+  value,
+}: {
+  label: string;
+  value: unknown;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[11px] font-medium uppercase text-muted-foreground">
+        {label}
+      </div>
+      <pre className="max-h-40 overflow-auto rounded-lg border bg-background p-2 text-[11px] leading-relaxed text-foreground">
+        {approvalValuePreview(value)}
+      </pre>
+    </div>
+  );
+}

package/src/components/create-app-popover.tsx

@@ -108,6 +108,7 @@ function buildAppCreationPrompt(input: {
     `If the user mentions a product or company such as Granola, Loom, Superhuman, Linear, or Notion, treat it as product inspiration unless they explicitly ask to connect to that service. Do not invent or require third-party API keys like GRANOLA_API_KEY just because a product is named.`,
     grantRequest,
     `Requested Dispatch workspace resources for this app:\n${resourceList}`,
+    `Dispatch workspace resources with scope=all are inherited workspace context. Do not copy or sync them into the new app; every workspace app reads them at runtime and may override with app shared or personal resources.`,
     ``,
     `Pick a starter template that fits the user's prompt — analytics, calendar, content, design, dispatch, forms, mail, slides, clips, or starter when none of the others fit.`,
     `Use the workspace app layout: create it under apps/${input.appId}, mount it at /${input.appId}, keep it on the shared workspace database/hosting model, and avoid table-name collisions by namespacing any new domain tables to the app.`,
@@ -125,8 +126,8 @@ function buildAppCreationPrompt(input: {
         ? `After the app exists, grant the selected Dispatch vault keys to appId "${input.appId}" and sync them once the app server is available. Treat these as requested grants, not active grants before creation succeeds.`
         : `Do not grant any Dispatch vault keys unless the user asks later.`,
     input.selectedResources.length
-      ? `After the app exists, grant the selected Dispatch workspace resources to appId "${input.appId}" and sync them once the app server is available. Add a short note to apps/${input.appId}/AGENTS.md telling the app agent to read relevant shared resources under context/ or the selected resource paths before doing GTM/domain work.`
-      : `Do not grant any Dispatch workspace resources unless the user asks later.`,
+      ? `After the app exists, grant the selected Dispatch workspace resources to appId "${input.appId}". Do not sync All-app workspace resources; they are inherited.`
+      : `Do not grant any selected-only Dispatch workspace resources unless the user asks later.`,
     ``,
     `App readiness requirements before handing off:`,
     `- Ensure apps/${input.appId}/package.json exists with displayName/name and a concise description; Dispatch discovers workspace apps from apps/<app-id>/package.json, not a separate app registry.`,

package/src/components/layout/Layout.tsx

@@ -12,6 +12,7 @@ import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
 import {
   IconArrowUpRight,
   IconApps,
+  IconBrain,
   IconChartBar,
   IconBrandTelegram,
   IconKey,
@@ -151,6 +152,13 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconHistory,
     section: "operations",
   },
+  {
+    id: "dreams",
+    to: "/dreams",
+    label: "Dreams",
+    icon: IconBrain,
+    section: "operations",
+  },
   {
     id: "thread-debug",
     to: "/thread-debug",

package/src/components/workspace-app-card.tsx

@@ -1,25 +1,31 @@
 import { useEffect, useState, type FormEvent } from "react";
-import { useActionMutation } from "@agent-native/core/client";
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
 import {
   IconArrowUpRight,
+  IconChevronDown,
+  IconChevronRight,
   IconClockHour4,
   IconDots,
   IconEdit,
   IconEye,
   IconEyeOff,
+  IconFileText,
   IconWorld,
   IconTrash,
 } from "@tabler/icons-react";
 import { toast } from "sonner";
 import { AppKeysPopover } from "@/components/app-keys-popover";
+import { AppResourceEffectiveStack } from "@/components/workspace-resource-effective-stack";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import {
   DropdownMenu,
@@ -170,6 +176,11 @@ export function WorkspaceAppCard({
           ) : null}
         </div>
         <div className="flex shrink-0 items-center gap-1">
+          {!isPending && !isArchived ? (
+            <div className="pointer-events-auto">
+              <AppResourcesDialog app={app} />
+            </div>
+          ) : null}
           {!isPending && !isArchived ? (
             <div className="pointer-events-auto">
               <AppKeysPopover appId={app.id} appName={app.name} />
@@ -271,6 +282,160 @@ export function WorkspaceAppCard({
   );
 }
 
+function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
+  const [open, setOpen] = useState(false);
+  const [inspectedResourceId, setInspectedResourceId] = useState<string | null>(
+    null,
+  );
+  const { data, isLoading } = useActionQuery(
+    "list-workspace-resources-for-app",
+    { appId: app.id },
+    { enabled: open },
+  );
+
+  const resources = ((data as any)?.resources ?? []) as any[];
+  const counts = (data as any)?.counts;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) setInspectedResourceId(null);
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2 text-xs"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <IconFileText size={14} className="mr-1" />
+          Context
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{app.name} workspace resources</DialogTitle>
+          <DialogDescription>
+            Workspace-level resources are inherited at runtime. App shared and
+            personal resources can override them locally.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="rounded-lg border bg-muted/30 px-3 py-2 text-xs leading-relaxed text-muted-foreground">
+            All-app resources live once at workspace scope and are read by each
+            app agent when it builds context. Nothing is copied into this app.
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="secondary">{counts?.total ?? 0} total</Badge>
+            <Badge variant="outline">
+              {counts?.workspace ?? counts?.global ?? 0} workspace
+            </Badge>
+            <Badge variant="outline">{counts?.granted ?? 0} granted</Badge>
+            <Badge variant="outline">
+              {counts?.autoLoaded ?? 0} auto-loaded
+            </Badge>
+          </div>
+
+          {isLoading ? (
+            <div className="space-y-2">
+              <div className="h-14 rounded-lg border bg-muted/30" />
+              <div className="h-14 rounded-lg border bg-muted/30" />
+              <div className="h-14 rounded-lg border bg-muted/30" />
+            </div>
+          ) : resources.length === 0 ? (
+            <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+              No workspace or granted resources are visible to this app yet.
+            </div>
+          ) : (
+            <div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
+              {resources.map((resource) => {
+                const inspected = inspectedResourceId === resource.id;
+                return (
+                  <div
+                    key={resource.id}
+                    className="rounded-lg border px-3 py-3"
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-medium text-foreground">
+                            {resource.name}
+                          </span>
+                          <Badge variant="secondary">{resource.kind}</Badge>
+                          <Badge variant="outline">
+                            {resource.source === "workspace"
+                              ? "All apps"
+                              : "Granted"}
+                          </Badge>
+                          {resource.autoLoaded ? (
+                            <Badge variant="outline">Auto-loaded</Badge>
+                          ) : null}
+                        </div>
+                        <div className="mt-1 truncate font-mono text-xs text-muted-foreground">
+                          {resource.path}
+                        </div>
+                      </div>
+                      <div className="flex shrink-0 flex-col items-end gap-2">
+                        {resource.source === "grant" ? (
+                          <div className="text-right text-[11px] text-muted-foreground">
+                            Selected grant
+                          </div>
+                        ) : null}
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 px-2 text-xs"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setInspectedResourceId(
+                              inspected ? null : resource.id,
+                            );
+                          }}
+                        >
+                          {inspected ? (
+                            <IconChevronDown size={14} className="mr-1" />
+                          ) : (
+                            <IconChevronRight size={14} className="mr-1" />
+                          )}
+                          Stack
+                        </Button>
+                      </div>
+                    </div>
+
+                    {resource.description ? (
+                      <p className="mt-2 line-clamp-2 text-xs text-muted-foreground">
+                        {resource.description}
+                      </p>
+                    ) : null}
+
+                    {inspected ? (
+                      <AppResourceEffectiveStack
+                        appId={app.id}
+                        resource={resource}
+                      />
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button type="button" onClick={() => setOpen(false)}>
+            Done
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function stringifyError(err: unknown): string {
   if (err instanceof Error) return err.message;
   return String(err);

package/src/components/workspace-resource-effective-stack.spec.tsx

@@ -0,0 +1,125 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  AppResourceEffectiveStack,
+  appAvailabilityLabel,
+  appLayerState,
+} from "./workspace-resource-effective-stack";
+
+const queryState = vi.hoisted(() => ({
+  result: { data: null as any, isLoading: false },
+  calls: [] as any[],
+}));
+
+vi.mock("@agent-native/core/client", () => ({
+  useActionQuery: (...args: any[]) => {
+    queryState.calls.push(args);
+    return queryState.result;
+  },
+}));
+
+describe("AppResourceEffectiveStack", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    queryState.calls = [];
+    queryState.result = { data: null, isLoading: false };
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders the effective layer stack and winning override", () => {
+    queryState.result = {
+      isLoading: false,
+      data: {
+        availability: "all-apps",
+        effectiveResource: {
+          owner: "person@example.test",
+          path: "context/brand.md",
+        },
+        layers: [
+          {
+            scope: "workspace",
+            label: "Workspace default",
+            owner: "__workspace__",
+            resource: {
+              path: "context/brand.md",
+              updatedAt: 1,
+            },
+            exists: true,
+            effective: false,
+            overridden: true,
+          },
+          {
+            scope: "shared",
+            label: "Organization/app override",
+            owner: "__shared__",
+            resource: null,
+            exists: false,
+            effective: false,
+            overridden: false,
+          },
+          {
+            scope: "personal",
+            label: "Personal override",
+            owner: "person@example.test",
+            resource: {
+              path: "context/brand.md",
+              updatedAt: 2,
+            },
+            exists: true,
+            effective: true,
+            overridden: false,
+          },
+        ],
+      },
+    };
+
+    act(() => {
+      root.render(
+        <AppResourceEffectiveStack
+          appId="analytics"
+          resource={{ id: "resource_1", path: "context/brand.md" }}
+        />,
+      );
+    });
+
+    expect(queryState.calls[0]).toEqual([
+      "get-workspace-resource-effective-context",
+      { resourceId: "resource_1", appId: "analytics" },
+      { enabled: true },
+    ]);
+    expect(container.textContent).toContain("Effective context stack");
+    expect(container.textContent).toContain("Inherited by all apps");
+    expect(container.textContent).toContain("Workspace default");
+    expect(container.textContent).toContain("Organization/app override");
+    expect(container.textContent).toContain("Personal override");
+    expect(container.textContent).toContain("Overridden");
+    expect(container.textContent).toContain("Wins");
+    expect(container.textContent).toContain("No file at this layer");
+    expect(container.textContent).toContain(
+      "person@example.test/context/brand.md",
+    );
+  });
+
+  it("keeps availability and layer-state labels stable", () => {
+    expect(appAvailabilityLabel("selected-granted")).toBe(
+      "Granted to this app",
+    );
+    expect(appAvailabilityLabel("selected-not-granted")).toBe("Not granted");
+    expect(appLayerState({ effective: true }).label).toBe("Wins");
+    expect(appLayerState({ overridden: true }).label).toBe("Overridden");
+    expect(appLayerState({}).label).toBe("Missing");
+  });
+});

package/src/components/workspace-resource-effective-stack.tsx

@@ -0,0 +1,141 @@
+import { useActionQuery } from "@agent-native/core/client";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function appAvailabilityLabel(value?: string) {
+  switch (value) {
+    case "all-apps":
+      return "Inherited by all apps";
+    case "selected-granted":
+      return "Granted to this app";
+    case "selected-not-granted":
+      return "Not granted";
+    case "selected-no-app":
+      return "Select app";
+    case "path-not-managed":
+      return "Not managed";
+    default:
+      return "Checking";
+  }
+}
+
+export function appLayerState(layer: any): {
+  label: string;
+  className: string;
+} {
+  if (layer.effective) {
+    return {
+      label: "Wins",
+      className: "border-green-500/30 bg-green-500/10 text-green-700",
+    };
+  }
+  if (layer.overridden) {
+    return {
+      label: "Overridden",
+      className: "border-amber-500/30 bg-amber-500/10 text-amber-700",
+    };
+  }
+  return {
+    label: "Missing",
+    className: "text-muted-foreground",
+  };
+}
+
+export function formatResourceTimestamp(value?: number | null): string {
+  if (!value) return "not present";
+  return new Date(value).toLocaleString();
+}
+
+export function AppResourceEffectiveStack({
+  appId,
+  resource,
+}: {
+  appId: string;
+  resource: any;
+}) {
+  const { data: context, isLoading } = useActionQuery(
+    "get-workspace-resource-effective-context",
+    { resourceId: resource.id, appId },
+    { enabled: !!resource.id },
+  );
+  const layers = ((context as any)?.layers ?? []) as any[];
+  const active = (context as any)?.effectiveResource;
+  const availability = (context as any)?.availability;
+
+  if (isLoading && !context) {
+    return (
+      <div className="mt-3 rounded-lg border bg-muted/20 p-3">
+        <div className="h-3 w-44 animate-pulse rounded bg-muted-foreground/10" />
+        <div className="mt-3 grid gap-2 sm:grid-cols-3">
+          <div className="h-20 animate-pulse rounded-md bg-muted-foreground/10" />
+          <div className="h-20 animate-pulse rounded-md bg-muted-foreground/10" />
+          <div className="h-20 animate-pulse rounded-md bg-muted-foreground/10" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-3 rounded-lg border bg-muted/20 p-3">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-xs font-semibold uppercase text-muted-foreground">
+            Effective context stack
+          </div>
+          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
+            {resource.path}
+          </div>
+        </div>
+        <Badge variant="outline">{appAvailabilityLabel(availability)}</Badge>
+      </div>
+
+      <div className="mt-3 grid gap-2 sm:grid-cols-3">
+        {layers.map((layer) => {
+          const state = appLayerState(layer);
+          return (
+            <div
+              key={layer.scope}
+              className={cn("rounded-md border bg-background/70 p-2", {
+                "border-green-500/30 bg-green-500/10": layer.effective,
+              })}
+            >
+              <div className="flex items-start justify-between gap-2">
+                <span className="text-xs font-medium text-foreground">
+                  {layer.label}
+                </span>
+                <Badge variant="outline" className={state.className}>
+                  {state.label}
+                </Badge>
+              </div>
+              <div className="mt-1 truncate font-mono text-[10px] text-muted-foreground">
+                {layer.owner}
+              </div>
+              {layer.resource ? (
+                <div className="mt-2 text-[11px] text-muted-foreground">
+                  Updated {formatResourceTimestamp(layer.resource.updatedAt)}
+                </div>
+              ) : (
+                <div className="mt-2 text-[11px] text-muted-foreground">
+                  No file at this layer
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="mt-3 rounded-md bg-background/70 px-3 py-2 text-xs text-muted-foreground">
+        {active ? (
+          <>
+            Winning layer:{" "}
+            <span className="font-mono text-foreground">
+              {active.owner}/{active.path}
+            </span>
+          </>
+        ) : (
+          "No active resource exists for this path yet."
+        )}
+      </div>
+    </div>
+  );
+}