@agent-native/dispatch 0.6.1 → 0.8.0

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

@@ -1,21 +1,41 @@
-import { useActionMutation } from "@agent-native/core/client";
+import { useEffect, useState, type FormEvent } from "react";
+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,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import {
   isPendingBuilderHref,
@@ -34,6 +54,18 @@ export function WorkspaceAppCard({
   const openInNewTab = isPendingBuilderHref(app);
   const isPending = app.status === "pending";
   const isArchived = !!app.archived;
+  const audience = app.audience ?? "internal";
+  const [editOpen, setEditOpen] = useState(false);
+  const [draftName, setDraftName] = useState(app.name);
+  const [draftDescription, setDraftDescription] = useState(
+    app.description || "",
+  );
+
+  useEffect(() => {
+    if (editOpen) return;
+    setDraftName(app.name);
+    setDraftDescription(app.description || "");
+  }, [app.description, app.name, editOpen]);
 
   const archive = useActionMutation("archive-workspace-app", {
     onError: (err) =>
@@ -47,6 +79,14 @@ export function WorkspaceAppCard({
     onError: (err) =>
       toast.error(`Could not remove ${app.name}: ${stringifyError(err)}`),
   });
+  const updateMetadata = useActionMutation("update-workspace-app-metadata", {
+    onSuccess: () => {
+      toast.success(`Updated ${draftName.trim() || app.name}`);
+      setEditOpen(false);
+    },
+    onError: (err) =>
+      toast.error(`Could not update ${app.name}: ${stringifyError(err)}`),
+  });
 
   const handleArchive = () => {
     archive.mutate({ appId: app.id });
@@ -60,6 +100,19 @@ export function WorkspaceAppCard({
     removePending.mutate({ appId: app.id });
     toast.success(`Removed pending ${app.name}`);
   };
+  const handleMetadataSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const name = draftName.trim();
+    if (!name) {
+      toast.error("App name is required.");
+      return;
+    }
+    updateMetadata.mutate({
+      appId: app.id,
+      name,
+      description: draftDescription.trim(),
+    });
+  };
 
   return (
     <div
@@ -101,6 +154,12 @@ export function WorkspaceAppCard({
                 Hidden
               </Badge>
             ) : null}
+            {audience === "public" ? (
+              <Badge variant="outline" className="shrink-0 gap-1">
+                <IconWorld size={12} />
+                Public
+              </Badge>
+            ) : null}
           </div>
           <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
             {app.path}
@@ -117,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} />
@@ -135,6 +199,15 @@ export function WorkspaceAppCard({
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-44">
+                <DropdownMenuItem
+                  onSelect={(event) => {
+                    event.preventDefault();
+                    setEditOpen(true);
+                  }}
+                >
+                  <IconEdit size={14} className="mr-2" />
+                  Edit details
+                </DropdownMenuItem>
                 {isPending ? (
                   <DropdownMenuItem
                     onSelect={handleRemovePending}
@@ -165,10 +238,204 @@ export function WorkspaceAppCard({
           ) : null}
         </div>
       </div>
+      <Dialog open={editOpen} onOpenChange={setEditOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit app details</DialogTitle>
+          </DialogHeader>
+          <form className="space-y-4" onSubmit={handleMetadataSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor={`app-name-${app.id}`}>Name</Label>
+              <Input
+                id={`app-name-${app.id}`}
+                value={draftName}
+                maxLength={120}
+                onChange={(event) => setDraftName(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`app-description-${app.id}`}>Description</Label>
+              <Textarea
+                id={`app-description-${app.id}`}
+                value={draftDescription}
+                maxLength={500}
+                rows={4}
+                onChange={(event) => setDraftDescription(event.target.value)}
+              />
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setEditOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={updateMetadata.isPending}>
+                {updateMetadata.isPending ? "Saving..." : "Save"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
 
+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>
+  );
+}