feat(permissions): delegated dashboard access + route-derived permission registry

apps/dashboard/src/client/features/overview/components/AccessSummary.tsx

@@ -0,0 +1,57 @@
+import { Link } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Card } from "../../../shared/ui/card";
+import { Badge } from "../../../shared/ui/badge";
+import { Icon } from "../../../shared/components/Icon";
+import { navItems } from "../../../shared/lib/navigation";
+import { usePermissions } from "../../permissions/hooks/usePermissions";
+
+/**
+ * Landing content for someone whose access is delegated: overview analytics are
+ * permission-gated, so without them the page would otherwise be empty. Shows
+ * what they can actually open, and which dashboard roles got them here.
+ */
+export function AccessSummary({ guildId }: { guildId: string }) {
+  const { t } = useTranslation(["overview", "common"]);
+  const { can, roles } = usePermissions(guildId);
+
+  const available = navItems.filter(
+    (item) => item.permission && can(item.permission),
+  );
+
+  return (
+    <Card className="p-6" data-testid="access-summary">
+      <h2 className="text-lg font-bold tracking-tight">{t("overview:access.title")}</h2>
+      <p className="mt-1 text-sm text-text-muted">{t("overview:access.subtitle")}</p>
+
+      {roles.length > 0 && (
+        <div className="mt-4 flex flex-wrap gap-1">
+          {roles.map((role) => (
+            <Badge key={role.id} variant="outline">
+              {role.name}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {available.length === 0 ? (
+        <p className="mt-6 text-sm text-text-muted">{t("overview:access.empty")}</p>
+      ) : (
+        <ul className="mt-6 grid grid-cols-1 gap-2 sm:grid-cols-2">
+          {available.map((item) => (
+            <li key={item.path}>
+              <Link
+                to={item.path}
+                params={{ guildId }}
+                className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-surface-high"
+              >
+                <Icon name={item.icon} size={18} />
+                {t(`common:${item.i18nKey}`)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Card>
+  );
+}

apps/dashboard/src/client/features/overview/hooks/useAnalytics.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { apiFetch } from "../../../shared/lib/client";
 import { AnalyticsResponseSchema, type AnalyticsResponse } from "../../../shared/lib/schemas";
 
-export function useAnalytics(guildId: string, days: number = 7) {
+export function useAnalytics(guildId: string, days: number = 7, enabled = true) {
   return useQuery<AnalyticsResponse>({
     queryKey: ["guilds", guildId, "actions", "analytics", { days }],
     queryFn: async () => {
@@ -11,5 +11,6 @@ export function useAnalytics(guildId: string, days: number = 7) {
       );
       return AnalyticsResponseSchema.parse(data);
     },
+    enabled: enabled && Boolean(guildId),
   });
 }

apps/dashboard/src/client/features/permissions/components/RoleMemberPicker.tsx

@@ -0,0 +1,65 @@
+import { useId, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../shared/ui/popover";
+import { Icon } from "../../../shared/components/Icon";
+import { MemberSearchList } from "../../../shared/ui/member-search-list";
+import type { GuildMember } from "../../../shared/lib/schemas";
+
+interface RoleMemberPickerProps {
+  guildId: string;
+  /** Ids to hide from results: members already on the role, plus the caller's
+   * own id when they are not the owner (the self-assign 403 stays unreachable
+   * rather than merely explained). */
+  excludeIds: string[];
+  disabled?: boolean;
+  onSelect: (member: GuildMember) => void;
+}
+
+/**
+ * Single-select "add a member to this role" control.
+ *
+ * A slimmed-down sibling of MemberMultiSelect: both are thin popover shells
+ * around the shared `MemberSearchList` (search input, debounce, results).
+ * This one resolves the pending action on a single pick and closes the
+ * popover immediately — there is no multi-chip state to manage here, since
+ * the role's assigned-member list is rendered separately by the caller, with
+ * provenance, from `useRoleMembers`.
+ */
+export function RoleMemberPicker({ guildId, excludeIds, disabled, onSelect }: RoleMemberPickerProps) {
+  const { t } = useTranslation("permissions");
+  const [open, setOpen] = useState(false);
+  const triggerId = useId();
+
+  function handleSelect(member: GuildMember) {
+    onSelect(member);
+    setOpen(false);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          id={triggerId}
+          type="button"
+          disabled={disabled}
+          className="flex h-9 w-full items-center gap-2 rounded-sm border border-dashed border-outline-variant/40 px-3 text-sm text-text-muted transition-colors hover:bg-surface-high/50 hover:text-text focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:w-72"
+        >
+          <Icon name="person_add" size={16} />
+          {t("roleEditor.membersSection.addPlaceholder")}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-72 p-2">
+        <MemberSearchList
+          guildId={guildId}
+          excludeIds={excludeIds}
+          onSelect={handleSelect}
+          searchPlaceholder={t("roleEditor.membersSection.searchPlaceholder")}
+          emptyQueryHint={t("roleEditor.membersSection.searchHint")}
+          loadingLabel={t("roleEditor.membersSection.searchLoading")}
+          noResultsLabel={t("roleEditor.membersSection.searchNoResults")}
+          listAriaLabel={t("roleEditor.membersSection.addPlaceholder")}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/dashboard/src/client/features/permissions/hooks/usePermissions.ts

@@ -6,16 +6,18 @@ import {
   DashboardRoleListSchema,
   DashboardGuildSettingsSchema,
   DashboardAuditResponseSchema,
+  PermissionRegistrySchema,
   type MyPermissions,
   type DashboardRole,
   type DashboardGuildSettings,
   type DashboardAuditResponse,
   type DashboardRoleMember,
+  type PermissionModuleView,
 } from "../../../shared/lib/schemas";
 
 // ─── Permission Matching (client-side mirror of server logic) ───
 
-function matchPermission(granted: Set<string>, required: string): boolean {
+export function matchPermission(granted: Set<string>, required: string): boolean {
   if (granted.has("*")) return true;
   if (granted.has(required)) return true;
 
@@ -83,6 +85,26 @@ export function usePermissions(guildId: string) {
   };
 }
 
+// ─── Permission Registry ───
+
+/**
+ * The permission vocabulary, served from the route table rather than a static
+ * list, so the grid can never offer a permission no route enforces.
+ */
+export function usePermissionRegistry(guildId: string) {
+  return useQuery<PermissionModuleView[]>({
+    queryKey: ["guilds", guildId, "permission-registry"],
+    queryFn: async () => {
+      const raw = await apiFetch<unknown>(
+        `/api/guilds/${guildId}/permission-registry`,
+      );
+      return PermissionRegistrySchema.parse(raw);
+    },
+    staleTime: Infinity,
+    enabled: Boolean(guildId),
+  });
+}
+
 // ─── Dashboard Roles ───
 
 export function useDashboardRoles(guildId: string) {

apps/dashboard/src/client/features/permissions/lookupsWarning.ts

@@ -0,0 +1,15 @@
+import { matchPermission } from "./hooks/usePermissions";
+
+/**
+ * Channel/role/member pickers on nearly every page call the Discord lookup
+ * routes, which require dashboard.lookups.view. A role that can configure
+ * things but cannot use pickers renders empty dropdowns — worth warning about
+ * while the role is being edited rather than after it is assigned.
+ */
+export function needsLookupsPermission(granted: Set<string>): boolean {
+  if (matchPermission(granted, "dashboard.lookups.view")) return false;
+
+  return [...granted].some(
+    (perm) => perm.endsWith(".manage") || perm.endsWith(".*") || perm === "*",
+  );
+}

apps/dashboard/src/client/routes/guild/$guildId/overview.tsx

@@ -3,23 +3,50 @@ import { useParams } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import { useAnalytics } from "../../../features/overview/hooks/useAnalytics";
 import { useConstants } from "../../../shared/hooks/useConstants";
+import { usePermissions } from "../../../features/permissions/hooks/usePermissions";
 import { PageHeader } from "../../../shared/components/PageHeader";
 import { CardGridSkeleton } from "../../../shared/ui/skeletons";
+import { Card } from "../../../shared/ui/card";
 import { StatsCard } from "../../../shared/components/StatsCard";
 import { ExecutionChart } from "../../../features/overview/components/ExecutionChart";
 import { EventDistributionChart } from "../../../features/overview/components/EventDistributionChart";
 import { RecentActivityFeed } from "../../../features/overview/components/RecentActivityFeed";
+import { AccessSummary } from "../../../features/overview/components/AccessSummary";
 import { Button } from "../../../shared/ui/button";
 import { Zap, CheckCircle, BarChart3, Target, RefreshCw } from "lucide-react";
 
 export function OverviewPage() {
   const { t } = useTranslation(["overview", "common"]);
   const { guildId } = useParams({ from: "/guild/$guildId" });
   const [days, setDays] = useState(7);
-  const { data: analytics, isLoading, isFetching } = useAnalytics(guildId, days);
+  const { can, isLoading: permissionsLoading } = usePermissions(guildId);
+  const canViewAnalytics = can("actions.analytics.view");
+  const { data: analytics, isLoading, isError, isFetching } = useAnalytics(guildId, days, canViewAnalytics);
   const { data: constants } = useConstants();
 
-  if (isLoading || !analytics) return <CardGridSkeleton />;
+  if (permissionsLoading) return <CardGridSkeleton />;
+
+  if (!canViewAnalytics) {
+    return (
+      <div className="space-y-8">
+        <PageHeader title={t("title")} subtitle={t("subtitle")} />
+        <AccessSummary guildId={guildId} />
+      </div>
+    );
+  }
+
+  if (isLoading) return <CardGridSkeleton />;
+
+  if (isError || !analytics) {
+    return (
+      <div className="space-y-8">
+        <PageHeader title={t("title")} subtitle={t("subtitle")} />
+        <Card className="p-6 text-sm text-text-muted" data-testid="analytics-error">
+          {t("errors.analyticsUnavailable")}
+        </Card>
+      </div>
+    );
+  }
 
   const { summary } = analytics;
 
@@ -30,7 +57,7 @@ export function OverviewPage() {
         subtitle={t("subtitle")}
       />
 
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4" data-testid="analytics-stats">
         <StatsCard
           label={t("stats.actionRules")}
           value={summary.totalRules}