@agent-native/dispatch 0.6.1 → 0.8.0

package/src/routes/pages/workspace.tsx

@@ -1,19 +1,25 @@
-import { useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
 import { toast } from "sonner";
 import {
+  IconAlertCircle,
   IconBook,
   IconChevronDown,
   IconChevronRight,
+  IconCircleCheck,
   IconCode,
+  IconEdit,
   IconFileText,
   IconPlus,
-  IconRefresh,
   IconTrash,
   IconUser,
   IconX,
 } from "@tabler/icons-react";
 import { DispatchShell } from "@/components/dispatch-shell";
+import {
+  ImpactPreview,
+  workspaceResourceMutationMessage,
+} from "@/components/workspace-resource-impact-preview";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -58,31 +64,252 @@ const KIND_CONFIG = {
     label: "Skill",
     icon: IconCode,
     pathPrefix: "skills/",
-    description: "Agent skills — detailed guidance for patterns and workflows",
+    description:
+      "Agent skills - on-demand guidance available across workspace apps",
   },
   instruction: {
     label: "Instruction",
     icon: IconBook,
-    pathPrefix: "",
-    description:
-      "Agent instructions — operational rules and behavioral guidance",
+    pathPrefix: "instructions/",
+    description: "Global instructions - guardrails loaded by every app agent",
   },
   agent: {
     label: "Agent",
     icon: IconUser,
     pathPrefix: "agents/",
     description:
-      "Reusable agent profiles — specialist agents shared across apps",
+      "Reusable agent profiles - specialist agents shared across apps",
   },
   knowledge: {
     label: "Knowledge",
     icon: IconFileText,
     pathPrefix: "context/",
     description:
-      "Knowledge packs — reusable GTM, product, and domain context for apps",
+      "Reference resources - brand, positioning, persona, and domain context",
   },
 } as const;
 
+const STARTER_GLOBAL_CONTEXT = [
+  {
+    path: "context/company.md",
+    label: "Company",
+    kind: "knowledge",
+    description: "Company facts, ICP, products, and canonical links",
+  },
+  {
+    path: "context/brand.md",
+    label: "Brand",
+    kind: "knowledge",
+    description: "Voice, visual identity, naming, and style rules",
+  },
+  {
+    path: "context/messaging.md",
+    label: "Messaging",
+    kind: "knowledge",
+    description: "Positioning, value props, proof points, and objections",
+  },
+  {
+    path: "instructions/guardrails.md",
+    label: "Guardrails",
+    kind: "instruction",
+    description: "Always-on rules loaded by every app agent",
+  },
+  {
+    path: "skills/company-voice/SKILL.md",
+    label: "Company Voice",
+    kind: "skill",
+    description: "On-demand guidance for customer-facing writing",
+  },
+] as const;
+
+function resourceSlug(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function defaultResourcePath(kind: string, name: string): string {
+  const slug = resourceSlug(name) || "example";
+  if (kind === "skill") return `skills/${slug}/SKILL.md`;
+  if (kind === "instruction") return `instructions/${slug}.md`;
+  if (kind === "agent") return `agents/${slug}.md`;
+  if (kind === "knowledge") return `context/${slug}.md`;
+  return `${slug}.md`;
+}
+
+function isAutoLoadedInstruction(resource: any): boolean {
+  return (
+    resource.kind === "instruction" &&
+    (resource.path === "AGENTS.md" ||
+      String(resource.path).startsWith("instructions/"))
+  );
+}
+
+function formatTimestamp(value?: number | null): string {
+  if (!value) return "Not present";
+  return new Date(value).toLocaleString();
+}
+
+function availabilityLabel(value?: string): string {
+  switch (value) {
+    case "all-apps":
+      return "Inherited by all apps";
+    case "selected-granted":
+      return "Granted to selected app";
+    case "selected-not-granted":
+      return "Not granted to this app";
+    case "selected-no-app":
+      return "Select an app to check grant";
+    case "path-not-managed":
+      return "Path is not a Dispatch resource";
+    default:
+      return "Checking availability";
+  }
+}
+
+function layerState(layer: any): {
+  label: string;
+  className: string;
+} {
+  if (layer.effective) {
+    return {
+      label: "Active",
+      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",
+  };
+}
+
+function EditResourceDialog({
+  resource,
+  trigger,
+}: {
+  resource: any;
+  trigger?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState(resource.name || "");
+  const [description, setDescription] = useState(resource.description || "");
+  const [content, setContent] = useState(resource.content || "");
+  const [scope, setScope] = useState(resource.scope || "all");
+
+  useEffect(() => {
+    if (!open) return;
+    setName(resource.name || "");
+    setDescription(resource.description || "");
+    setContent(resource.content || "");
+    setScope(resource.scope || "all");
+  }, [open, resource]);
+
+  const update = useActionMutation("update-workspace-resource", {
+    onSuccess: (result: any) => {
+      toast.success(
+        workspaceResourceMutationMessage(result, "Resource updated"),
+      );
+      setOpen(false);
+    },
+    onError: (err) => toast.error(String(err)),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm">
+            <IconEdit size={14} className="mr-1.5" />
+            Edit
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Edit workspace resource</DialogTitle>
+          <DialogDescription>
+            Updates apply immediately anywhere this workspace resource is
+            inherited. App shared or personal resources can override it locally.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Name</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label>Scope</Label>
+              <Select value={scope} onValueChange={setScope}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All apps</SelectItem>
+                  <SelectItem value="selected">Selected apps only</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Path</Label>
+            <Input
+              value={resource.path}
+              disabled
+              className="font-mono text-sm"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Description</Label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Content</Label>
+            <Textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              rows={14}
+              className="font-mono text-sm"
+            />
+          </div>
+          <ImpactPreview
+            operation="update"
+            resourceId={resource.id}
+            scope={scope as "all" | "selected"}
+            enabled={open}
+          />
+        </div>
+        <DialogFooter>
+          <Button
+            onClick={() =>
+              update.mutate({
+                id: resource.id,
+                name,
+                description,
+                content,
+                scope: scope as "all" | "selected",
+              })
+            }
+            disabled={!name.trim() || update.isPending}
+          >
+            {update.isPending ? "Saving..." : "Save changes"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function AddResourceDialog() {
   const [open, setOpen] = useState(false);
   const [kind, setKind] = useState<string>("skill");
@@ -93,8 +320,10 @@ function AddResourceDialog() {
   const [scope, setScope] = useState<string>("all");
 
   const create = useActionMutation("create-workspace-resource", {
-    onSuccess: () => {
-      toast.success("Resource created");
+    onSuccess: (result: any) => {
+      toast.success(
+        workspaceResourceMutationMessage(result, "Resource created"),
+      );
       setOpen(false);
       setKind("skill");
       setName("");
@@ -106,8 +335,6 @@ function AddResourceDialog() {
     onError: (err) => toast.error(String(err)),
   });
 
-  const kindInfo = KIND_CONFIG[kind as keyof typeof KIND_CONFIG];
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -120,8 +347,8 @@ function AddResourceDialog() {
         <DialogHeader>
           <DialogTitle>Add workspace resource</DialogTitle>
           <DialogDescription>
-            Create a skill, instruction, or agent profile that can be shared
-            across workspace apps.
+            Create a skill, instruction, agent profile, or reference resource
+            that can be shared across workspace apps.
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-2">
@@ -172,14 +399,15 @@ function AddResourceDialog() {
           <div className="space-y-2">
             <Label>Path</Label>
             <Input
-              placeholder={`${kindInfo?.pathPrefix || ""}${name.toLowerCase().replace(/\s+/g, "-") || "example"}.md`}
+              placeholder={defaultResourcePath(kind, name)}
               value={path}
               onChange={(e) => setPath(e.target.value)}
               className="font-mono text-sm"
             />
             <p className="text-xs text-muted-foreground">
-              Resource path in target apps. Skills go in skills/, agents in
-              agents/, knowledge packs in context/.
+              Skills use skills/name/SKILL.md. Guardrails in AGENTS.md or
+              instructions/ auto-load in app chat. Reference resources in
+              context/ are indexed so agents can read them when relevant.
             </p>
           </div>
           <div className="space-y-2">
@@ -200,7 +428,7 @@ function AddResourceDialog() {
                     ? "---\nname: Research Specialist\ndescription: Handles research tasks\n---\n\n# Instructions\n\n..."
                     : kind === "knowledge"
                       ? "# Core GTM Messaging\n\n## Positioning\n\n## ICP\n\n## Proof points\n\n## Source\n\n"
-                      : "# Instructions\n\nBehavioral rules and guidance for agents across apps..."
+                      : "# Instructions\n\nAlways-on guardrails for agents across apps..."
               }
               value={content}
               onChange={(e) => setContent(e.target.value)}
@@ -208,6 +436,12 @@ function AddResourceDialog() {
               className="font-mono text-sm"
             />
           </div>
+          <ImpactPreview
+            operation="create"
+            path={path || defaultResourcePath(kind, name)}
+            scope={scope as "all" | "selected"}
+            enabled={open && Boolean(name.trim())}
+          />
         </div>
         <DialogFooter>
           <Button
@@ -216,9 +450,7 @@ function AddResourceDialog() {
                 kind: kind as "skill" | "instruction" | "agent" | "knowledge",
                 name,
                 description: description || undefined,
-                path:
-                  path ||
-                  `${kindInfo?.pathPrefix || ""}${name.toLowerCase().replace(/\s+/g, "-")}.md`,
+                path: path || defaultResourcePath(kind, name),
                 content,
                 scope: scope as "all" | "selected",
               })
@@ -300,29 +532,159 @@ function GrantDialog({
   );
 }
 
+function EffectiveContextPreview({ resource }: { resource: any }) {
+  const [appId, setAppId] = useState("__any__");
+  const [userEmail, setUserEmail] = useState("");
+  const selectedAppId = appId === "__any__" ? undefined : appId;
+  const normalizedUserEmail = userEmail.trim() || undefined;
+  const { data: apps } = useActionQuery("list-workspace-apps", {
+    includeAgentCards: false,
+  });
+  const { data: context, isLoading } = useActionQuery(
+    "get-workspace-resource-effective-context",
+    {
+      resourceId: resource.id,
+      appId: selectedAppId,
+      userEmail: normalizedUserEmail,
+    },
+  );
+
+  const visibleApps = ((apps || []) as any[]).filter(
+    (app) => !app.isDispatch && app.status !== "pending",
+  );
+  const layers = ((context as any)?.layers || []) as any[];
+  const active = (context as any)?.effectiveResource;
+  const availability = (context as any)?.availability;
+
+  return (
+    <div className="rounded-lg border bg-background p-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h4 className="text-xs font-semibold uppercase text-muted-foreground">
+            Effective in app
+          </h4>
+          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+            Preview the runtime stack for this path: workspace default,
+            organization/app override, then personal override.
+          </p>
+        </div>
+        <Badge variant="outline">{availabilityLabel(availability)}</Badge>
+      </div>
+
+      <div className="mt-3 grid gap-3 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor={`resource-app-${resource.id}`}>App</Label>
+          <Select value={appId} onValueChange={setAppId}>
+            <SelectTrigger id={`resource-app-${resource.id}`}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__any__">Any app</SelectItem>
+              {visibleApps.map((app) => (
+                <SelectItem key={app.id} value={app.id}>
+                  {app.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`resource-user-${resource.id}`}>User email</Label>
+          <Input
+            id={`resource-user-${resource.id}`}
+            value={userEmail}
+            onChange={(event) => setUserEmail(event.target.value)}
+            placeholder="Current Dispatch user"
+          />
+        </div>
+      </div>
+
+      {resource.scope === "selected" ? (
+        <div className="mt-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-relaxed text-amber-800 dark:text-amber-200">
+          Selected resources are app-specific exceptions. Use All apps for
+          company-wide context that should be inherited everywhere without copy
+          or sync.
+        </div>
+      ) : null}
+
+      {isLoading ? (
+        <div className="mt-3 grid gap-2 md:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton key={index} className="h-28 rounded-lg" />
+          ))}
+        </div>
+      ) : (
+        <div className="mt-3 grid gap-2 md:grid-cols-3">
+          {layers.map((layer) => {
+            const state = layerState(layer);
+            return (
+              <div key={layer.scope} className="rounded-lg border p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <span className="text-sm font-medium text-foreground">
+                    {layer.label}
+                  </span>
+                  <Badge variant="outline" className={state.className}>
+                    {state.label}
+                  </Badge>
+                </div>
+                <div className="mt-2 truncate font-mono text-[11px] text-muted-foreground">
+                  {layer.owner}
+                </div>
+                {layer.resource ? (
+                  <div className="mt-2 space-y-1 text-xs text-muted-foreground">
+                    <div className="truncate font-mono">
+                      {layer.resource.path}
+                    </div>
+                    <div>{formatTimestamp(layer.resource.updatedAt)}</div>
+                  </div>
+                ) : (
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    No resource exists at this layer.
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="mt-3 rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+        {active ? (
+          <>
+            Active file:{" "}
+            <span className="font-mono text-foreground">
+              {active.owner}/{active.path}
+            </span>
+          </>
+        ) : (
+          "No active resource exists for this path yet."
+        )}
+      </div>
+    </div>
+  );
+}
+
 function ResourceRow({ resource, grants }: { resource: any; grants: any[] }) {
   const [expanded, setExpanded] = useState(false);
 
   const deleteResource = useActionMutation("delete-workspace-resource", {
-    onSuccess: () => toast.success("Resource deleted"),
+    onSuccess: (result: any) =>
+      toast.success(
+        workspaceResourceMutationMessage(result, "Resource deleted"),
+      ),
     onError: (err) => toast.error(String(err)),
   });
   const revokeGrant = useActionMutation("revoke-workspace-resource-grant", {
     onSuccess: () => toast.success("Grant revoked"),
     onError: (err) => toast.error(String(err)),
   });
-  const syncToApp = useActionMutation("sync-workspace-resources-to-app", {
-    onSuccess: (data: any) =>
-      toast.success(`Synced ${data.synced} resource(s) to ${data.appId}`),
-    onError: (err) => toast.error(String(err)),
-  });
 
   const kindInfo = KIND_CONFIG[resource.kind as keyof typeof KIND_CONFIG];
   const KindIcon = kindInfo?.icon || IconCode;
   const activeGrants = grants.filter((g) => g.status === "active");
 
   return (
-    <div className="rounded-xl border bg-card">
+    <div className="rounded-lg border bg-card">
       <button
         type="button"
         className="flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer"
@@ -352,6 +714,11 @@ function ResourceRow({ resource, grants }: { resource: any; grants: any[] }) {
             >
               {resource.scope === "all" ? "All apps" : "Selected"}
             </Badge>
+            {isAutoLoadedInstruction(resource) && (
+              <Badge variant="outline" className="text-xs">
+                Auto-loaded
+              </Badge>
+            )}
           </div>
           <div className="mt-0.5 font-mono text-xs text-muted-foreground">
             {resource.path}
@@ -381,6 +748,8 @@ function ResourceRow({ resource, grants }: { resource: any; grants: any[] }) {
             </pre>
           </div>
 
+          <EffectiveContextPreview resource={resource} />
+
           {resource.scope === "selected" && (
             <div className="space-y-2">
               <div className="flex items-center justify-between">
@@ -404,22 +773,10 @@ function ResourceRow({ resource, grants }: { resource: any; grants: any[] }) {
                           {grant.appId}
                         </span>
                         <span className="ml-2 text-xs text-muted-foreground">
-                          {grant.syncedAt
-                            ? `synced ${new Date(grant.syncedAt).toLocaleString()}`
-                            : "not synced"}
+                          selected grant
                         </span>
                       </div>
                       <div className="flex gap-1.5">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() =>
-                            syncToApp.mutate({ appId: grant.appId })
-                          }
-                          disabled={syncToApp.isPending}
-                        >
-                          <IconRefresh size={14} />
-                        </Button>
                         <Button
                           variant="ghost"
                           size="sm"
@@ -447,36 +804,44 @@ function ResourceRow({ resource, grants }: { resource: any; grants: any[] }) {
               Created by {resource.createdBy} ·{" "}
               {new Date(resource.createdAt).toLocaleString()}
             </div>
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  disabled={deleteResource.isPending}
-                >
-                  <IconTrash size={14} className="mr-1" />
-                  Delete
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Delete this resource?</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    Removing "{resource.name}" revokes all of its grants. Apps
-                    that depended on this resource will lose access on the next
-                    sync. This cannot be undone.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={() => deleteResource.mutate({ id: resource.id })}
+            <div className="flex gap-2">
+              <EditResourceDialog resource={resource} />
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    disabled={deleteResource.isPending}
                   >
-                    Delete resource
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+                    <IconTrash size={14} className="mr-1" />
+                    Delete
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete this resource?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Removing "{resource.name}" revokes all of its grants and
+                      removes inherited workspace access immediately. This
+                      cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <ImpactPreview
+                    operation="delete"
+                    resourceId={resource.id}
+                    enabled
+                  />
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={() => deleteResource.mutate({ id: resource.id })}
+                    >
+                      Delete resource
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
           </div>
         </div>
       )}
@@ -484,6 +849,143 @@ function ResourceRow({ resource, grants }: { resource: any; grants: any[] }) {
   );
 }
 
+function GlobalContextSection({ resources }: { resources: any[] }) {
+  const byPath = new Map(
+    resources.map((resource) => [resource.path, resource]),
+  );
+  const missingPaths = STARTER_GLOBAL_CONTEXT.filter(
+    (item) => !byPath.has(item.path),
+  ).map((item) => item.path);
+  const presentCount = STARTER_GLOBAL_CONTEXT.length - missingPaths.length;
+  const restoreStarter = useActionMutation(
+    "restore-starter-workspace-resources",
+    {
+      onSuccess: (result: any) => {
+        const restored = result?.restored?.length ?? 0;
+        const existing = result?.existing?.length ?? 0;
+        toast.success(
+          restored > 0
+            ? `Restored ${restored} starter resource${restored === 1 ? "" : "s"}`
+            : `Starter resources already present (${existing})`,
+        );
+      },
+      onError: (err) => toast.error(String(err)),
+    },
+  );
+
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">
+            Global context
+          </h2>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Starter resources every workspace can use for company facts, brand,
+            messaging, guardrails, and voice.
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            All-app resources live once at workspace scope and are inherited by
+            every app agent at runtime.
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {missingPaths.length > 0 ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => restoreStarter.mutate({ paths: missingPaths })}
+              disabled={restoreStarter.isPending}
+            >
+              <IconPlus size={14} className="mr-1.5" />
+              {restoreStarter.isPending ? "Restoring..." : "Restore missing"}
+            </Button>
+          ) : null}
+          <Badge variant="outline">
+            {presentCount}/{STARTER_GLOBAL_CONTEXT.length} ready
+          </Badge>
+        </div>
+      </div>
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
+        {STARTER_GLOBAL_CONTEXT.map((item) => {
+          const resource = byPath.get(item.path);
+          const exists = !!resource;
+          const global = resource?.scope === "all";
+          return (
+            <div key={item.path} className="rounded-lg border bg-card p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    {exists ? (
+                      <IconCircleCheck
+                        size={15}
+                        className="shrink-0 text-green-600 dark:text-green-400"
+                      />
+                    ) : (
+                      <IconAlertCircle
+                        size={15}
+                        className="shrink-0 text-amber-600 dark:text-amber-400"
+                      />
+                    )}
+                    <h3 className="truncate text-sm font-medium text-foreground">
+                      {item.label}
+                    </h3>
+                  </div>
+                  <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                    {item.description}
+                  </p>
+                </div>
+                {resource ? (
+                  <EditResourceDialog
+                    resource={resource}
+                    trigger={
+                      <Button variant="ghost" size="sm" className="h-7 px-2">
+                        <span className="sr-only">Edit {item.label}</span>
+                        <IconEdit size={14} />
+                      </Button>
+                    }
+                  />
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2"
+                    onClick={() =>
+                      restoreStarter.mutate({ paths: [item.path] })
+                    }
+                    disabled={restoreStarter.isPending}
+                    aria-label={`Restore ${item.label}`}
+                  >
+                    <IconPlus size={14} />
+                  </Button>
+                )}
+              </div>
+              <div className="mt-3 space-y-2">
+                <div className="truncate font-mono text-[11px] text-muted-foreground">
+                  {item.path}
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  <Badge variant={exists ? "secondary" : "outline"}>
+                    {exists ? "Present" : "Missing"}
+                  </Badge>
+                  {exists ? (
+                    <Badge variant="outline">
+                      {global ? "All apps" : "Selected"}
+                    </Badge>
+                  ) : null}
+                  {resource && isAutoLoadedInstruction(resource) ? (
+                    <Badge variant="outline">Auto-loaded</Badge>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
 export default function WorkspaceRoute() {
   const { data: resources, isLoading } = useActionQuery(
     "list-workspace-resources",
@@ -491,19 +993,6 @@ export default function WorkspaceRoute() {
   );
   const { data: grants } = useActionQuery("list-workspace-resource-grants", {});
 
-  const syncAll = useActionMutation("sync-workspace-resources-to-all", {
-    onSuccess: (data: any) => {
-      const total = (data || []).reduce(
-        (sum: number, r: any) => sum + r.synced,
-        0,
-      );
-      toast.success(
-        `Synced resources to ${data?.length || 0} apps (${total} total pushes)`,
-      );
-    },
-    onError: (err) => toast.error(String(err)),
-  });
-
   const grantsByResource = (grants || []).reduce(
     (acc: Record<string, any[]>, g: any) => {
       if (!acc[g.resourceId]) acc[g.resourceId] = [];
@@ -535,7 +1024,7 @@ export default function WorkspaceRoute() {
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className="rounded-2xl border bg-card px-5 py-4 space-y-2"
+              className="rounded-lg border bg-card px-5 py-4 space-y-2"
             >
               <Skeleton className="h-4 w-1/3" />
               <Skeleton className="h-3 w-2/3" />
@@ -546,7 +1035,7 @@ export default function WorkspaceRoute() {
     }
     if (items.length === 0) {
       return (
-        <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+        <div className="rounded-lg border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
           {emptyText}
         </div>
       );
@@ -567,7 +1056,7 @@ export default function WorkspaceRoute() {
   return (
     <DispatchShell
       title="Workspace Resources"
-      description="Share skills, instructions, agent profiles, and knowledge packs across workspace apps. Scope to all apps or grant per-app."
+      description="Manage inherited workspace skills, guardrail instructions, agent profiles, and reference resources. All-app resources are available to every app without syncing."
     >
       <div className="flex items-center justify-between">
         <div className="text-sm text-muted-foreground">
@@ -578,21 +1067,12 @@ export default function WorkspaceRoute() {
           )}
         </div>
         <div className="flex gap-2">
-          <Button
-            variant="outline"
-            onClick={() => syncAll.mutate({})}
-            disabled={syncAll.isPending || (resources?.length || 0) === 0}
-          >
-            <IconRefresh
-              size={16}
-              className={syncAll.isPending ? "mr-1.5 animate-spin" : "mr-1.5"}
-            />
-            Sync all
-          </Button>
           <AddResourceDialog />
         </div>
       </div>
 
+      <GlobalContextSection resources={resources || []} />
+
       <Tabs defaultValue="skills">
         <TabsList>
           <TabsTrigger value="skills">