@stigmer/react 3.31.0 → 3.33.0

package/src/iam-policy/useRoleSelector.ts

@@ -12,6 +12,9 @@ import {
   type GranteeKind,
 } from "@stigmer/sdk";
 
+/** The default for `omit`: one shared empty list, so the options never recompute for it. */
+const NOTHING_OMITTED: readonly IamRole[] = [];
+
 /** A single role option with display metadata. */
 export interface RoleOption {
   /** The IamRole enum value. */
@@ -52,6 +55,11 @@ export interface UseRoleSelectorReturn {
  * @param defaultRole - Optional initial selection.
  * @param granteeKind - Who the role is for: a person (the default) may
  *   hold any grantable role, a team only the kind's team roles.
+ * @param omit - Roles to leave out even though the kind grants them: the
+ *   ones the caller may not assign (an organization's `owner`, for anyone
+ *   who is not its owner). The server refuses them anyway; leaving them out
+ *   keeps a choice off the screen that could only fail. Pass a stable list
+ *   (a constant, or a memoized one): the options follow its identity.
  *
  * @example
  * ```tsx
@@ -68,6 +76,7 @@ export function useRoleSelector(
   kind: ApiResourceKind | null,
   defaultRole?: IamRole,
   granteeKind: GranteeKind = "identity_account",
+  omit: readonly IamRole[] = NOTHING_OMITTED,
 ): UseRoleSelectorReturn {
   const [selected, setSelected] = useState<IamRole | null>(
     defaultRole ?? null,
@@ -75,15 +84,17 @@ export function useRoleSelector(
 
   const options = useMemo<readonly RoleOption[]>(() => {
     if (kind === null) return [];
-    const roles =
-      granteeKind === "team" ? getTeamGrantableRoles(kind) : getGrantableRoles(kind);
+    const left = new Set(omit);
+    const roles = (
+      granteeKind === "team" ? getTeamGrantableRoles(kind) : getGrantableRoles(kind)
+    ).filter((role) => !left.has(role));
     return roles.map((role) => ({
       role,
       label: iamRoleDisplayName(role),
       description: iamRoleDescription(role),
       value: iamRoleToString(role),
     }));
-  }, [kind, granteeKind]);
+  }, [kind, granteeKind, omit]);
 
   const selectedValue = useMemo(
     () => (selected !== null ? iamRoleToString(selected) : ""),

package/src/internal/LastUsedLabel.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { Timestamp } from "@bufbuild/protobuf/wkt";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+
+/** Props for {@link LastUsedLabel}. */
+export interface LastUsedLabelProps {
+  /** The credential's `status.last_used_at`; absent means it was never used. */
+  readonly at: Timestamp | undefined;
+  /** Frozen clock for tests; defaults to the wall clock. */
+  readonly now?: Date;
+}
+
+/**
+ * When a credential was last used, said one way on every surface that
+ * lists credentials (API keys, platform clients): "Used 5m" in the SDK's
+ * compact relative vocabulary, with the exact instant in a tooltip, or
+ * "Never used". The label names what the time is, because it sits beside
+ * other dates (created, expires) in the same row.
+ *
+ * The server records a use at most once a minute, so "Used now" means
+ * within the last minute or so.
+ */
+export function LastUsedLabel({ at, now }: LastUsedLabelProps) {
+  if (at === undefined) {
+    return <span>Never used</span>;
+  }
+  const date = timestampDate(at);
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<time dateTime={date.toISOString()} />}>
+        {`Used ${formatRelativeTime(date, now)}`}
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {`Last used ${date.toISOString()}`}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/invitation/InvitationManager.tsx

@@ -18,6 +18,7 @@ import { useRevokeInvitation } from "./useRevokeInvitation.js";
 import { InvitationCreatedAlert } from "./InvitationCreatedAlert.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { RoleSelector } from "../iam-policy/RoleSelector.js";
+import { useOwnerAssignment } from "../iam-policy/useOwnerAssignment.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
@@ -237,6 +238,9 @@ function CreateInvitationForm({
   onCancel: () => void;
 }) {
   const { create, isCreating, error, clearError } = useCreateInvitation();
+  // An invitation grants with its creator's authority: only an owner may
+  // invite an owner, and the server refuses anyone else.
+  const { unassignable } = useOwnerAssignment(org);
   const baseId = useId();
 
   const [label, setLabel] = useState("");
@@ -303,6 +307,7 @@ function CreateInvitationForm({
         kind={ApiResourceKind.organization}
         selected={role}
         onSelect={(r) => setRole(r)}
+        omitRoles={unassignable}
         disabled={isCreating}
       />
 

package/src/platform-client/PlatformClientDetailPanel.tsx

@@ -11,7 +11,10 @@ import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/ia
 import { useUpdatePlatformClient } from "./useUpdatePlatformClient.js";
 import { useRotatePlatformClientSecret } from "./useRotatePlatformClientSecret.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { isPlatformClientExpired } from "./expiry.js";
 
 /** Props for {@link PlatformClientDetailPanel}. */
 export interface PlatformClientDetailPanelProps {
@@ -32,14 +35,24 @@ export interface PlatformClientDetailPanelProps {
   readonly onBack?: () => void;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Reference instant for the "last used" relative stamp. Defaults to
+   * the live clock. **Deterministic hosts (documentation embeds, video
+   * export) must pass a frozen instant** — otherwise a depicted client's
+   * "2h ago" drifts with every replay.
+   */
+  readonly now?: Date;
 }
 
 /**
  * View and edit panel for an existing platform client.
  *
  * In **view mode**, displays all configuration fields in a structured
- * label/value layout with "Edit", "Rotate Secret", and "Delete"
- * actions.
+ * label/value layout, with when the client last minted a token, and
+ * "Edit", "Rotate Secret", and "Delete" actions offered only to a caller
+ * the server allows: `can_edit` for Edit and Rotate, `can_delete` for
+ * Delete. The organization's admins may view a client they did not
+ * create, and see no actions on it.
  *
  * In **edit mode**, mutable spec fields become editable: JIT
  * provisioning toggles, expiry, auto-grant role, and allowed
@@ -70,11 +83,18 @@ export function PlatformClientDetailPanel({
   onDeleted,
   onBack,
   className,
+  now,
 }: PlatformClientDetailPanelProps) {
   const baseId = useId();
   const spec = platformClient.spec;
   const meta = platformClient.metadata;
 
+  const resource = meta?.id ? { kind: "platform_client", id: meta.id } : null;
+  const editCheck = useCheckPermission(resource, "can_edit");
+  const deleteCheck = useCheckPermission(resource, "can_delete");
+  const canEdit = !editCheck.isLoading && editCheck.allowed;
+  const canDelete = !deleteCheck.isLoading && deleteCheck.allowed;
+
   const { update, isUpdating, error: updateError, clearError: clearUpdateError } =
     useUpdatePlatformClient();
   const { rotateSecret, isRotating, error: rotateError, clearError: clearRotateError } =
@@ -87,6 +107,8 @@ export function PlatformClientDetailPanel({
   const [confirmingRotate, setConfirmingRotate] = useState(false);
 
   const isBusy = isUpdating || isRotating || isDeleting;
+  // Rotating never revives an expired client: only a later expiry does.
+  const expired = isPlatformClientExpired(spec);
 
   // Edit form state
   const [neverExpires, setNeverExpires] = useState(
@@ -236,6 +258,7 @@ export function PlatformClientDetailPanel({
 
   const createdAt = platformClient.status?.audit?.specAudit?.createdAt;
   const updatedAt = platformClient.status?.audit?.specAudit?.updatedAt;
+  const lastUsedAt = platformClient.status?.lastUsedAt;
 
   return (
     <div className={cn("stg:space-y-4", className)}>
@@ -269,7 +292,7 @@ export function PlatformClientDetailPanel({
           </div>
         </div>
 
-        {mode === "view" && (
+        {mode === "view" && canEdit && (
           <button
             type="button"
             onClick={enterEdit}
@@ -290,6 +313,8 @@ export function PlatformClientDetailPanel({
           spec={spec}
           createdAt={createdAt}
           updatedAt={updatedAt}
+          lastUsedAt={lastUsedAt}
+          now={now}
         />
       ) : (
         <form onSubmit={handleSave} className="stg:space-y-3">
@@ -496,17 +521,23 @@ export function PlatformClientDetailPanel({
         </form>
       )}
 
-      {/* Actions bar (view mode only) */}
-      {mode === "view" && (
+      {/* Actions bar (view mode only, and only the actions the caller may take) */}
+      {mode === "view" && (canEdit || canDelete) && (
         <div className="stg:space-y-2 stg:pt-2">
           <hr className="stg:border-border-muted" />
 
           {/* Rotate Secret */}
-          {confirmingRotate ? (
+          {!canEdit ? null : confirmingRotate ? (
             <div className="stg:flex stg:items-center stg:justify-between stg:rounded-md stg:border stg:border-warning/30 stg:bg-warning/5 stg:px-3 stg:py-2">
               <p className="stg:text-xs stg:text-foreground">
                 Rotate secret? The current secret will be
                 <span className="stg:font-medium"> permanently invalidated</span>.
+                {expired && (
+                  <span className="stg:mt-1 stg:block stg:text-destructive">
+                    This client has expired. Rotating does not extend it; edit its
+                    expiry instead.
+                  </span>
+                )}
               </p>
               <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
                 <button
@@ -561,7 +592,7 @@ export function PlatformClientDetailPanel({
           )}
 
           {/* Delete */}
-          {confirmingDelete ? (
+          {!canDelete ? null : confirmingDelete ? (
             <div className="stg:flex stg:items-center stg:justify-between stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2">
               <div className="stg:min-w-0 stg:flex-1">
                 <p className="stg:text-xs stg:text-foreground">
@@ -632,10 +663,14 @@ function ViewMode({
   spec,
   createdAt,
   updatedAt,
+  lastUsedAt,
+  now,
 }: {
   spec: PlatformClient["spec"];
   createdAt?: Timestamp;
   updatedAt?: Timestamp;
+  lastUsedAt?: Timestamp;
+  now?: Date;
 }) {
   return (
     <dl className="stg:space-y-2.5">
@@ -654,10 +689,18 @@ function ViewMode({
       {spec?.neverExpires ? (
         <Field label="Expiry" value="Never expires" />
       ) : spec?.expiresAt ? (
-        <Field
-          label="Expires"
-          value={formatDate(timestampDate(spec.expiresAt))}
-        />
+        isPlatformClientExpired(spec) ? (
+          <Field
+            label="Expired"
+            value={formatDate(timestampDate(spec.expiresAt))}
+            tone="destructive"
+          />
+        ) : (
+          <Field
+            label="Expires"
+            value={formatDate(timestampDate(spec.expiresAt))}
+          />
+        )
       ) : null}
 
       {/* JIT provisioning */}
@@ -713,6 +756,14 @@ function ViewMode({
             value={formatDate(timestampDate(updatedAt))}
           />
         )}
+        <Field
+          label="Last used"
+          value={
+            lastUsedAt
+              ? formatRelativeTime(timestampDate(lastUsedAt), now)
+              : "Never"
+          }
+        />
       </div>
     </dl>
   );
@@ -726,10 +777,13 @@ function Field({
   label,
   value,
   mono,
+  tone,
 }: {
   label: string;
   value?: string;
   mono?: boolean;
+  /** `destructive` for a value that needs action (an expired client). */
+  tone?: "destructive";
 }) {
   if (!value) return null;
   return (
@@ -739,7 +793,10 @@ function Field({
       </dt>
       <dd
         className={cn(
-          "stg:text-foreground stg:mt-0.5 stg:break-all stg:text-xs",
+          "stg:mt-0.5 stg:break-all stg:text-xs",
+          tone === "destructive"
+            ? "stg:text-destructive stg:font-medium"
+            : "stg:text-foreground",
           mono && "stg:font-mono",
         )}
       >

package/src/platform-client/PlatformClientListPanel.tsx

@@ -1,14 +1,18 @@
 "use client";
 
 import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
+import { PermissionGate } from "../iam-policy/PermissionGate.js";
+import { LastUsedLabel } from "../internal/LastUsedLabel.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { usePlatformClientList } from "./usePlatformClientList.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { isPlatformClientExpired } from "./expiry.js";
 
 /** Props for {@link PlatformClientListPanel}. */
 export interface PlatformClientListPanelProps {
@@ -18,8 +22,22 @@ export interface PlatformClientListPanelProps {
   readonly onEdit?: (pc: PlatformClient) => void;
   /** Expose the refetch function so parents can trigger a list refresh. */
   readonly onRefetchRef?: (refetch: () => void) => void;
+  /**
+   * Shown when the list is empty. Defaults to "No platform clients
+   * configured." The list holds only the clients the caller may view (each
+   * client's creator and the organization's admins), so a host that knows
+   * the caller may not manage platform clients should say who does instead.
+   */
+  readonly emptyState?: ReactNode;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Reference instant for the "last used" relative stamp. Defaults to
+   * the live clock. **Deterministic hosts (documentation embeds, video
+   * export) must pass a frozen instant** — otherwise a depicted client's
+   * "2h ago" drifts with every replay.
+   */
+  readonly now?: Date;
 }
 
 /**
@@ -27,8 +45,9 @@ export interface PlatformClientListPanelProps {
  * organization with inline delete confirmation.
  *
  * Each row shows the client name, `client_id` (monospace), secret
- * fingerprint, expiry status, and creation date. A delete button
- * triggers an inline confirmation flow.
+ * fingerprint, expiry status, creation date and when the client last
+ * minted a token. Edit and delete are offered only to a caller the
+ * server allows (`can_edit`, `can_delete`); delete confirms inline.
  *
  * Platform clients are admin-level resources with small cardinality
  * (typically 1–5 per org), so the list is rendered without pagination.
@@ -53,7 +72,9 @@ export function PlatformClientListPanel({
   org,
   onEdit,
   onRefetchRef,
+  emptyState = "No platform clients configured.",
   className,
+  now,
 }: PlatformClientListPanelProps) {
   const { platformClients, isLoading, error, refetch } =
     usePlatformClientList(org);
@@ -96,7 +117,7 @@ export function PlatformClientListPanel({
           className,
         )}
       >
-        No platform clients configured.
+        {emptyState}
       </p>
     );
   }
@@ -114,6 +135,7 @@ export function PlatformClientListPanel({
             key={id}
             platformClient={pc}
             isConfirming={confirmingId === id}
+            now={now}
             onEdit={onEdit ? () => onEdit(pc) : undefined}
             onConfirmDelete={() => setConfirmingId(id)}
             onCancelDelete={() => setConfirmingId(null)}
@@ -135,6 +157,7 @@ export function PlatformClientListPanel({
 function PlatformClientRow({
   platformClient,
   isConfirming,
+  now,
   onEdit,
   onConfirmDelete,
   onCancelDelete,
@@ -142,6 +165,7 @@ function PlatformClientRow({
 }: {
   platformClient: PlatformClient;
   isConfirming: boolean;
+  now?: Date;
   onEdit?: () => void;
   onConfirmDelete: () => void;
   onCancelDelete: () => void;
@@ -157,6 +181,7 @@ function PlatformClientRow({
   const fingerprint = spec?.secretFingerprint ?? "";
   const createdAt =
     platformClient.status?.audit?.specAudit?.createdAt;
+  const lastUsedAt = platformClient.status?.lastUsedAt;
 
   const handleDelete = useCallback(async () => {
     try {
@@ -268,35 +293,46 @@ function PlatformClientRow({
             </TooltipContent>
           </Tooltip>
         )}
+        <LastUsedLabel at={lastUsedAt} now={now} />
       </div>
 
       <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
         {onEdit && (
+          <PermissionGate
+            resource={{ kind: "platform_client", id }}
+            relation="can_edit"
+          >
+            <button
+              type="button"
+              onClick={onEdit}
+              aria-label={`Edit ${name}`}
+              className={cn(
+                "stg:shrink-0 stg:rounded stg:p-1",
+                "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+                "stg:transition-colors",
+              )}
+            >
+              <PencilIcon />
+            </button>
+          </PermissionGate>
+        )}
+        <PermissionGate
+          resource={{ kind: "platform_client", id }}
+          relation="can_delete"
+        >
           <button
             type="button"
-            onClick={onEdit}
-            aria-label={`Edit ${name}`}
+            onClick={onConfirmDelete}
+            aria-label={`Delete ${name}`}
             className={cn(
               "stg:shrink-0 stg:rounded stg:p-1",
-              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:text-muted-foreground stg:hover:text-destructive stg:hover:bg-destructive-subtle",
               "stg:transition-colors",
             )}
           >
-            <PencilIcon />
+            <TrashIcon />
           </button>
-        )}
-        <button
-          type="button"
-          onClick={onConfirmDelete}
-          aria-label={`Delete ${name}`}
-          className={cn(
-            "stg:shrink-0 stg:rounded stg:p-1",
-            "stg:text-muted-foreground stg:hover:text-destructive stg:hover:bg-destructive-subtle",
-            "stg:transition-colors",
-          )}
-        >
-          <TrashIcon />
-        </button>
+        </PermissionGate>
       </div>
     </div>
   );
@@ -314,7 +350,7 @@ function ExpiryBadge({ spec }: { spec: PlatformClient["spec"] }) {
   }
   if (spec?.expiresAt) {
     const date = timestampDate(spec.expiresAt);
-    const isExpired = date < new Date();
+    const isExpired = isPlatformClientExpired(spec);
     return (
       <Tooltip>
         <TooltipTrigger

package/src/platform-client/__tests__/PlatformClientDetailPanel.test.tsx

@@ -1,12 +1,14 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { create } from "@bufbuild/protobuf";
+import { clone, create } from "@bufbuild/protobuf";
 import { timestampFromDate } from "@bufbuild/protobuf/wkt";
 import {
   PlatformClientSchema,
+  PlatformClientStatusSchema,
   type PlatformClient,
 } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import type { CheckMyPermissionInput } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import type { PlatformClientInput } from "@stigmer/sdk";
 import { StigmerContext } from "../../context";
@@ -18,6 +20,18 @@ import { PlatformClientDetailPanel } from "../PlatformClientDetailPanel";
  * NEVER sent `environment_refs` — saving any edit silently wiped the
  * client's credential-delivery environment bindings. The panel must
  * spread `toPlatformClientUpdateInput` and override only what it edits.
+ *
+ * Also pins how the panel presents an expired client (#1254): the view
+ * says "Expired", and the rotate confirmation says rotating will not help,
+ * because rotation leaves the expiry as it is. A live client shows
+ * neither.
+ *
+ * And what the view offers (stigmer/stigmer#1302): Edit and Rotate secret
+ * only with `can_edit`, Delete only with `can_delete` on the client, so an
+ * organization admin who may view a client they did not create reads it
+ * with no actions at all; and when the client last minted a token, or
+ * "Never" (stigmer/stigmer#1255). The permission check runs through the
+ * real hook over a stubbed `checkMyPermission`.
  */
 
 const PLATFORM_CLIENT: PlatformClient = create(PlatformClientSchema, {
@@ -41,17 +55,41 @@ const PLATFORM_CLIENT: PlatformClient = create(PlatformClientSchema, {
   },
 });
 
-function renderPanel(update: ReturnType<typeof vi.fn>) {
+const ALLOW_ALL = async (_input: CheckMyPermissionInput) => ({
+  isAuthorized: true,
+});
+
+function renderPanel(
+  update: ReturnType<typeof vi.fn>,
+  platformClient: PlatformClient = PLATFORM_CLIENT,
+  checkMyPermission: (
+    input: CheckMyPermissionInput,
+  ) => Promise<{ isAuthorized: boolean }> = ALLOW_ALL,
+  now?: Date,
+) {
   const client = {
     platformclient: { update },
+    iamPolicy: { checkMyPermission },
   } as never;
   return render(
     <StigmerContext.Provider value={client}>
-      <PlatformClientDetailPanel platformClient={PLATFORM_CLIENT} />
+      <PlatformClientDetailPanel platformClient={platformClient} now={now} />
     </StigmerContext.Provider>,
   );
 }
 
+/** PLATFORM_CLIENT with an expiry a day from now (+1) or a day ago (-1). */
+function clientExpiringInDays(days: 1 | -1): PlatformClient {
+  const platformClient = clone(PlatformClientSchema, PLATFORM_CLIENT);
+  platformClient.spec!.expiresAt = timestampFromDate(
+    new Date(Date.now() + days * 86_400_000),
+  );
+  return platformClient;
+}
+
+const ROTATE_WILL_NOT_HELP =
+  "This client has expired. Rotating does not extend it; edit its expiry instead.";
+
 afterEach(cleanup);
 
 describe("PlatformClientDetailPanel save payload", () => {
@@ -59,7 +97,7 @@ describe("PlatformClientDetailPanel save payload", () => {
     const update = vi.fn(async (_input: PlatformClientInput) => PLATFORM_CLIENT);
     renderPanel(update);
 
-    fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
     fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
 
     await waitFor(() => expect(update).toHaveBeenCalledTimes(1));
@@ -80,3 +118,100 @@ describe("PlatformClientDetailPanel save payload", () => {
     expect(input.name).toBe("Embed Client");
   });
 });
+
+describe("PlatformClientDetailPanel expiry", () => {
+  it("an expired client reads Expired, and its rotate confirmation says rotating will not help", async () => {
+    renderPanel(vi.fn(), clientExpiringInDays(-1));
+
+    expect(screen.getByText("Expired")).toBeTruthy();
+    expect(screen.queryByText("Expires")).toBeNull();
+
+    fireEvent.click(await screen.findByRole("button", { name: "Rotate secret" }));
+    expect(screen.getByText(ROTATE_WILL_NOT_HELP)).toBeTruthy();
+  });
+
+  it("a live client reads Expires, and its rotate confirmation carries no expiry warning", async () => {
+    renderPanel(vi.fn(), clientExpiringInDays(1));
+
+    expect(screen.getByText("Expires")).toBeTruthy();
+    expect(screen.queryByText("Expired")).toBeNull();
+
+    fireEvent.click(await screen.findByRole("button", { name: "Rotate secret" }));
+    expect(screen.queryByText(ROTATE_WILL_NOT_HELP)).toBeNull();
+  });
+});
+
+describe("PlatformClientDetailPanel actions by permission", () => {
+  it("asks can_edit and can_delete on the client", async () => {
+    const checkMyPermission = vi.fn(ALLOW_ALL);
+    renderPanel(vi.fn(), PLATFORM_CLIENT, checkMyPermission);
+
+    await screen.findByRole("button", { name: "Edit" });
+    const asked = checkMyPermission.mock.calls.map(
+      ([input]) =>
+        `${input.resource?.kind}:${input.resource?.id}:${input.relation}`,
+    );
+    expect(asked.sort()).toEqual([
+      "platform_client:pc-1:can_delete",
+      "platform_client:pc-1:can_edit",
+    ]);
+  });
+
+  it("offers Edit and Rotate secret only with can_edit, Delete only with can_delete", async () => {
+    renderPanel(vi.fn(), PLATFORM_CLIENT, async (input) => ({
+      isAuthorized: input.relation === "can_delete",
+    }));
+
+    await screen.findByRole("button", { name: "Delete platform client" });
+    expect(screen.queryByRole("button", { name: "Edit" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Rotate secret" })).toBeNull();
+  });
+
+  it("an admin who did not create the client reads it with no actions at all", async () => {
+    const checkMyPermission = vi.fn(async (_input: CheckMyPermissionInput) => ({
+      isAuthorized: false,
+    }));
+    const { container } = renderPanel(vi.fn(), PLATFORM_CLIENT, checkMyPermission);
+
+    await waitFor(() => expect(checkMyPermission).toHaveBeenCalledTimes(2));
+    // The configuration stays readable; only the change affordances are withheld.
+    expect(screen.getByText("client-abc")).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.queryByRole("button", { name: "Edit" })).toBeNull();
+      expect(screen.queryByRole("button", { name: "Rotate secret" })).toBeNull();
+      expect(
+        screen.queryByRole("button", { name: "Delete platform client" }),
+      ).toBeNull();
+    });
+    const withoutActions = container.querySelectorAll("hr").length;
+    cleanup();
+
+    const allowed = renderPanel(vi.fn());
+    await screen.findByRole("button", { name: "Delete platform client" });
+    expect(
+      withoutActions,
+      "no empty actions bar is left behind: only the actions bar's divider goes",
+    ).toBe(allowed.container.querySelectorAll("hr").length - 1);
+  });
+});
+
+describe("PlatformClientDetailPanel last use", () => {
+  it("reads Never for a client that never minted a token", () => {
+    renderPanel(vi.fn());
+    expect(screen.getByText("Last used").nextElementSibling?.textContent).toBe(
+      "Never",
+    );
+  });
+
+  it("reads how long ago the client last minted a token", () => {
+    const used = clone(PlatformClientSchema, PLATFORM_CLIENT);
+    const now = new Date("2026-09-28T12:00:00Z");
+    used.status = create(PlatformClientStatusSchema, {
+      lastUsedAt: timestampFromDate(new Date(now.getTime() - 5 * 60_000)),
+    });
+    renderPanel(vi.fn(), used, ALLOW_ALL, now);
+    expect(screen.getByText("Last used").nextElementSibling?.textContent).toBe(
+      "5m",
+    );
+  });
+});