@agent-native/creative-context 0.7.18 → 0.7.19-nightly-20260902002038

package/src/client/CreativeContextShareTab.tsx

@@ -1,3 +1,7 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { docsUrl } from "@agent-native/core/shared";
+import { cn } from "@agent-native/toolkit";
+import { ShareDisclosureSection } from "@agent-native/toolkit/sharing";
 import {
   Badge,
   Button,
@@ -10,23 +14,11 @@ import {
   SelectValue,
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetHeader,
   SheetTitle,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
   Textarea,
 } from "@agent-native/toolkit/ui";
-import {
-  IconCheck,
-  IconFileText,
-  IconLink,
-  IconPlus,
-  IconShieldCheck,
-  IconX,
-} from "@tabler/icons-react";
+import { IconCheck, IconFileText, IconPlus, IconX } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 
 import {
@@ -38,7 +30,6 @@ import {
   useManageCreativeContext,
   type CreativeContextMembership,
   type CreativeContextMembershipRank,
-  type CreativeContextPolicy,
   type CreativeContextSummary,
 } from "./actions.js";
 
@@ -83,6 +74,7 @@ export function normalizeCreativeContextResources(
 }
 
 const VISIBILITY_RANK = { private: 0, org: 1, public: 2 } as const;
+type CreativeContextTranslate = ReturnType<typeof useT>;
 
 export function requiresBroaderPublication(
   resource: CreativeContextResourceDescriptor,
@@ -111,27 +103,6 @@ export function creativeContextSafePreviewUrl(url: string | undefined) {
   }
 }
 
-function policyCopy(policy: CreativeContextPolicy) {
-  switch (policy) {
-    case "review":
-      return "New resources wait for reviewer approval before they are reused.";
-    case "admins-only":
-      return "Only administrators can approve or remove resources.";
-    default:
-      return "New resources are published after submission.";
-  }
-}
-
-function formatResourceTimestamp(value: string | undefined) {
-  if (!value) return null;
-  const date = new Date(value);
-  if (!Number.isFinite(date.getTime())) return null;
-  return new Intl.DateTimeFormat(undefined, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(date);
-}
-
 function ResourcePreview({
   resource,
 }: {
@@ -143,13 +114,13 @@ function ResourcePreview({
       <img
         src={imageUrl}
         alt={resource.preview?.alt ?? ""}
-        className="size-11 rounded-md border border-border object-cover"
+        className="size-9 rounded-md border border-border object-cover"
       />
     );
   }
   return (
-    <div className="flex size-11 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
-      <IconFileText className="size-5" />
+    <div className="flex size-9 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
+      <IconFileText className="size-4" />
     </div>
   );
 }
@@ -210,6 +181,7 @@ export async function submitCreativeContextResources({
 
 function MembershipRow({
   membership,
+  t,
   updateAvailable,
   canReview,
   canWithdraw,
@@ -218,6 +190,7 @@ function MembershipRow({
   onAction,
 }: {
   membership: CreativeContextMembership;
+  t: CreativeContextTranslate;
   updateAvailable: boolean;
   canReview: boolean;
   canWithdraw: boolean;
@@ -228,45 +201,71 @@ function MembershipRow({
   ) => void;
 }) {
   const pending = Boolean(membership.pendingSubmissionId);
+  const rankLabel = {
+    canonical: t("creativeContext.share.canonical", {
+      defaultValue: "Canonical",
+    }),
+    exemplar: t("creativeContext.exemplar"),
+    normal: t("creativeContext.share.reference", {
+      defaultValue: "Reference",
+    }),
+  }[membership.rank];
   return (
-    <article className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border p-3">
-      <div>
-        <p className="text-sm font-medium">
-          {pending ? "Pending resource" : "Published resource"}
-        </p>
-        <p className="mt-0.5 text-xs text-muted-foreground">
-          {membership.rank}{" "}
-          {membership.purpose ? `· ${membership.purpose}` : ""}
-        </p>
+    <article className="flex flex-wrap items-center justify-between gap-2 border-t border-border/60 py-2.5 first:border-t-0">
+      <div className="flex min-w-0 items-center gap-2">
+        <Badge variant={pending ? "outline" : "secondary"} className="shrink-0">
+          {pending
+            ? t("creativeContext.share.pendingResource", {
+                defaultValue: "Pending resource",
+              })
+            : t("creativeContext.share.publishedResource", {
+                defaultValue: "Published resource",
+              })}
+        </Badge>
+        <span className="min-w-0 truncate text-xs text-muted-foreground">
+          {membership.purpose ?? rankLabel}
+        </span>
+        {updateAvailable ? (
+          <span className="shrink-0 text-xs text-muted-foreground">
+            {t("creativeContext.updateAvailable")}
+          </span>
+        ) : null}
       </div>
-      <div className="flex flex-wrap gap-2">
+      <div className="flex flex-wrap justify-end gap-1">
         {pending ? (
-          <Badge variant="outline">Pending review</Badge>
+          <Badge variant="outline">
+            {t("creativeContext.share.pendingReview", {
+              defaultValue: "Pending review",
+            })}
+          </Badge>
         ) : (
-          <Badge variant="secondary">Published</Badge>
+          <span className="sr-only">
+            {t("creativeContext.share.published", {
+              defaultValue: "Published",
+            })}
+          </span>
         )}
-        {updateAvailable ? (
-          <Badge variant="outline">Update available</Badge>
-        ) : null}
         {pending && canWithdraw ? (
           <Button
             type="button"
             variant="outline"
             size="sm"
+            className="h-8 px-2 text-xs"
             disabled={busy}
             onClick={() => onAction("withdraw")}
           >
-            Withdraw
+            {t("creativeContext.share.withdraw", { defaultValue: "Withdraw" })}
           </Button>
         ) : null}
         {pending && canReview ? (
           <Button
             type="button"
             size="sm"
+            className="h-8 px-2 text-xs"
             disabled={busy}
             onClick={() => onAction("approve")}
           >
-            <IconCheck /> Approve
+            <IconCheck /> {t("creativeContext.approve")}
           </Button>
         ) : null}
         {pending && canReview ? (
@@ -274,10 +273,13 @@ function MembershipRow({
             type="button"
             size="sm"
             variant="outline"
+            className="h-8 px-2 text-xs"
             disabled={busy}
             onClick={() => onAction("request-changes")}
           >
-            Request changes
+            {t("creativeContext.share.requestChanges", {
+              defaultValue: "Request changes",
+            })}
           </Button>
         ) : null}
         {canRemove ? (
@@ -285,10 +287,12 @@ function MembershipRow({
             type="button"
             size="sm"
             variant="ghost"
+            className="h-8 px-2 text-xs"
             disabled={busy}
             onClick={() => onAction("remove")}
           >
-            <IconX /> Remove
+            <IconX />{" "}
+            {t("creativeContext.share.remove", { defaultValue: "Remove" })}
           </Button>
         ) : null}
       </div>
@@ -299,16 +303,24 @@ function MembershipRow({
 function ContextSelect({
   contexts,
   contextId,
+  t,
   onValueChange,
+  disabled = false,
 }: {
   contexts: CreativeContextSummary[];
   contextId: string;
+  t: CreativeContextTranslate;
   onValueChange: (value: string) => void;
+  disabled?: boolean;
 }) {
   return (
     <Select value={contextId} onValueChange={onValueChange}>
-      <SelectTrigger>
-        <SelectValue placeholder="Choose a context" />
+      <SelectTrigger className="w-full" disabled={disabled}>
+        <SelectValue
+          placeholder={t("creativeContext.share.chooseContext", {
+            defaultValue: "Choose a context",
+          })}
+        />
       </SelectTrigger>
       {/* This tab is embedded inside ShareButton's high z-index popover
           (see z-[100010]+ overrides in design/content/slides toolbars).
@@ -332,6 +344,7 @@ export function CreativeContextShareTab({
   resources,
   className,
 }: CreativeContextShareTabProps) {
+  const t = useT();
   const contextsQuery = useCreativeContexts();
   const manageContext = useManageCreativeContext();
   const manageMembership = useManageContextMembership();
@@ -341,7 +354,6 @@ export function CreativeContextShareTab({
     resources,
   );
   const primaryResource = selectedResources[0];
-  const updatedAt = formatResourceTimestamp(primaryResource?.updatedAt);
   const [contextId, setContextId] = useState("");
   const membershipsQuery = useContextMemberships(
     contextId ? { contextId } : null,
@@ -360,7 +372,9 @@ export function CreativeContextShareTab({
     useState(false);
   const busy = manageContext.isPending || manageMembership.isPending;
   const selectedContext = contexts.find((context) => context.id === contextId);
-  const canCreateContext = contexts.some((context) => context.access.canAdmin);
+  const canCreateContext =
+    contextsQuery.data?.canCreateContext === true &&
+    contexts.some((context) => context.access.canAdmin);
   const needsBroaderPublicationConfirmation = selectedResources.some((item) =>
     requiresBroaderPublication(item, selectedContext),
   );
@@ -398,12 +412,28 @@ export function CreativeContextShareTab({
       setConfirmedBroaderPublication(false);
       setSubmitSummary(
         result.failed
-          ? `${result.submitted} submitted; ${result.failed} could not be submitted.`
-          : `${result.submitted} ${result.submitted === 1 ? "resource" : "resources"} submitted.`,
+          ? t("creativeContext.share.partialSubmission", {
+              submitted: result.submitted,
+              failed: result.failed,
+              defaultValue:
+                "{{submitted}} submitted; {{failed}} could not be submitted.",
+            })
+          : t(
+              result.submitted === 1
+                ? "creativeContext.share.resourceSubmitted"
+                : "creativeContext.share.resourcesSubmitted",
+              {
+                count: result.submitted,
+                defaultValue:
+                  result.submitted === 1
+                    ? "{{count}} resource submitted."
+                    : "{{count}} resources submitted.",
+              },
+            ),
       );
       await refresh();
     } catch {
-      setError("Could not submit this resource to the selected context.");
+      setError(t("creativeContext.submitUpdateFailed"));
     }
   }
 
@@ -421,7 +451,7 @@ export function CreativeContextShareTab({
       await contextsQuery.refetch();
       if (result.context?.id) setContextId(result.context.id);
     } catch {
-      setError("Could not create a context.");
+      setError(t("creativeContext.saveFailed"));
     }
   }
 
@@ -439,97 +469,83 @@ export function CreativeContextShareTab({
       });
       await refresh();
     } catch {
-      setError("Could not update this context membership.");
+      setError(t("creativeContext.saveFailed"));
     }
   }
 
   return (
-    <section className={className} aria-label="Creative context">
-      <div className="flex items-start gap-3 border-b border-border/70 pb-4">
-        {primaryResource ? (
+    <section
+      className={cn("space-y-3", className)}
+      aria-label={t("creativeContext.share.title", {
+        defaultValue: "Creative context",
+      })}
+    >
+      {primaryResource ? (
+        <div className="flex min-w-0 items-center gap-2 border-b border-border/70 pb-3">
           <ResourcePreview resource={primaryResource} />
-        ) : null}
-        <div className="min-w-0">
-          <p className="truncate text-sm font-medium">
+          <p className="min-w-0 truncate text-sm font-medium">
             {selectedResources.length === 1
-              ? primaryResource?.title
-              : `${selectedResources.length} selected resources`}
+              ? primaryResource.title
+              : t("creativeContext.share.selectedResources", {
+                  count: selectedResources.length,
+                  defaultValue: "{{count}} selected resources",
+                })}
           </p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            {selectedResources.length === 1
-              ? (primaryResource?.preview?.label ??
-                primaryResource?.resourceType)
-              : "Each resource is submitted separately"}
-          </p>
-          {selectedResources.length === 1 && updatedAt ? (
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Current version · {updatedAt}
-            </p>
-          ) : null}
         </div>
-      </div>
-      <Tabs defaultValue="contexts" className="mt-4">
-        <TabsList className="w-full justify-start">
-          <TabsTrigger value="contexts">Contexts</TabsTrigger>
-          <TabsTrigger value="policy">Policy</TabsTrigger>
-        </TabsList>
-        <TabsContent value="contexts" className="space-y-3">
-          <ContextSelect
-            contexts={contexts}
-            contextId={contextId}
-            onValueChange={setContextId}
-          />
-          {selectedContext ? (
-            <p className="text-xs text-muted-foreground">
-              {selectedContext.description ||
-                `${selectedContext.memberCount} published resources`}{" "}
-              · {policyCopy(selectedContext.approvalPolicy)}
-            </p>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              No contexts are available yet.
-            </p>
-          )}
-          {contextId && selectedResources.length === 1 ? (
-            <div className="space-y-2">
-              {memberships.map((membership) => (
-                <MembershipRow
-                  key={membership.id}
-                  membership={membership}
-                  updateAvailable={Boolean(
-                    primaryResource?.updatedAt &&
-                    membership.publishedItem?.sourceModifiedAt &&
-                    primaryResource.updatedAt !==
-                      membership.publishedItem.sourceModifiedAt,
-                  )}
-                  canReview={selectedContext?.access.canReview === true}
-                  canWithdraw={
-                    selectedContext?.access.canReview === true ||
-                    selectedContext?.access.canSubmit === true
-                  }
-                  canRemove={selectedContext?.access.canAdmin === true}
-                  busy={busy}
-                  onAction={(operation) => void act(membership.id, operation)}
-                />
-              ))}
-              {!memberships.length && !membershipsQuery.isLoading ? (
-                <p className="text-sm text-muted-foreground">
-                  This resource has not been submitted to this context.
-                </p>
-              ) : null}
-            </div>
-          ) : null}
-          {contextId && selectedResources.length ? (
-            <div className="rounded-md border border-dashed border-border p-3">
-              <p className="text-sm font-medium">
-                {memberships.some((membership) => membership.publishedItem)
-                  ? "Submit update for "
-                  : "Add "}
-                {selectedResources.length === 1
-                  ? "this resource"
-                  : `${selectedResources.length} resources`}
-              </p>
-              <div className="mt-2 grid gap-2 sm:grid-cols-2">
+      ) : null}
+      {contexts.length ? (
+        <ContextSelect
+          contexts={contexts}
+          contextId={contextId}
+          t={t}
+          onValueChange={setContextId}
+          disabled={busy}
+        />
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          {t("creativeContext.share.noContexts", {
+            defaultValue: "No contexts are available yet.",
+          })}
+        </p>
+      )}
+      {contextId && selectedResources.length === 1 && memberships.length ? (
+        <div>
+          {memberships.map((membership) => (
+            <MembershipRow
+              key={membership.id}
+              membership={membership}
+              t={t}
+              updateAvailable={Boolean(
+                primaryResource?.updatedAt &&
+                membership.publishedItem?.sourceModifiedAt &&
+                primaryResource.updatedAt !==
+                  membership.publishedItem.sourceModifiedAt,
+              )}
+              canReview={selectedContext?.access.canReview === true}
+              canWithdraw={
+                selectedContext?.access.canReview === true ||
+                selectedContext?.access.canSubmit === true
+              }
+              canRemove={selectedContext?.access.canAdmin === true}
+              busy={busy}
+              onAction={(operation) => void act(membership.id, operation)}
+            />
+          ))}
+        </div>
+      ) : null}
+      {contextId && selectedResources.length ? (
+        <div className="border-t border-border/60 pt-3">
+          <div className="mb-3 flex items-start gap-2">
+            <ShareDisclosureSection
+              label={
+                memberships.some((membership) => membership.publishedItem)
+                  ? t("creativeContext.submitUpdate")
+                  : t("creativeContext.addToContext")
+              }
+              className="min-w-0 flex-1"
+              contentClassName="space-y-2"
+            >
+              <div className="grid gap-2 sm:grid-cols-2">
                 <Select
                   value={rank}
                   onValueChange={(value) =>
@@ -543,94 +559,114 @@ export function CreativeContextShareTab({
                     data-agent-native-share-overlay=""
                     className="z-[100020]"
                   >
-                    <SelectItem value="canonical">Canonical</SelectItem>
-                    <SelectItem value="exemplar">Exemplar</SelectItem>
-                    <SelectItem value="normal">Reference</SelectItem>
+                    <SelectItem value="canonical">
+                      {t("creativeContext.share.canonical", {
+                        defaultValue: "Canonical",
+                      })}
+                    </SelectItem>
+                    <SelectItem value="exemplar">
+                      {t("creativeContext.exemplar")}
+                    </SelectItem>
+                    <SelectItem value="normal">
+                      {t("creativeContext.share.reference", {
+                        defaultValue: "Reference",
+                      })}
+                    </SelectItem>
                   </SelectContent>
                 </Select>
                 <Input
                   value={purpose}
                   onChange={(event) => setPurpose(event.target.value)}
-                  placeholder="Purpose"
+                  placeholder={t("creativeContext.share.purpose", {
+                    defaultValue: "Purpose",
+                  })}
                 />
               </div>
               <Textarea
-                className="mt-2"
                 value={note}
                 onChange={(event) => setNote(event.target.value)}
-                placeholder="Note for reviewers"
+                placeholder={t("creativeContext.share.reviewerNote", {
+                  defaultValue: "Note for reviewers",
+                })}
                 rows={2}
               />
-              {needsBroaderPublicationConfirmation ? (
-                <label className="mt-3 flex items-start gap-2 text-xs text-muted-foreground">
-                  <Checkbox
-                    checked={confirmedBroaderPublication}
-                    onCheckedChange={(checked) =>
-                      setConfirmedBroaderPublication(checked === true)
-                    }
-                  />
-                  <span>
-                    This context is shared more broadly than this resource.
-                    Publishing creates a governed copy available to the
-                    context's audience.
-                  </span>
-                </label>
-              ) : null}
-              <Button
-                type="button"
-                className="mt-3"
-                size="sm"
-                disabled={
-                  busy ||
-                  selectedContext?.access.canSubmit !== true ||
-                  (needsBroaderPublicationConfirmation &&
-                    !confirmedBroaderPublication)
+            </ShareDisclosureSection>
+            <Button
+              type="button"
+              size="sm"
+              className="shrink-0"
+              disabled={
+                busy ||
+                selectedContext?.access.canSubmit !== true ||
+                (needsBroaderPublicationConfirmation &&
+                  !confirmedBroaderPublication)
+              }
+              onClick={() => void submit()}
+            >
+              {t("creativeContext.share.submit", { defaultValue: "Submit" })}
+            </Button>
+          </div>
+          {needsBroaderPublicationConfirmation ? (
+            <label className="flex items-start gap-2 text-xs text-muted-foreground">
+              <Checkbox
+                checked={confirmedBroaderPublication}
+                onCheckedChange={(checked) =>
+                  setConfirmedBroaderPublication(checked === true)
                 }
-                onClick={() => void submit()}
-              >
-                <IconLink /> Submit
-              </Button>
-            </div>
-          ) : null}
-          {canCreateContext ? (
-            <div className="flex gap-2 border-t border-border/60 pt-3">
-              <Input
-                value={newContextName}
-                onChange={(event) => setNewContextName(event.target.value)}
-                placeholder="New context name"
               />
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                disabled={busy || !newContextName.trim()}
-                onClick={() => void createContext()}
-              >
-                <IconPlus /> New
-              </Button>
-            </div>
+              <span>
+                {t("creativeContext.share.broaderPublication", {
+                  defaultValue:
+                    "This context is shared more broadly than this resource. Publishing creates a governed copy available to the context's audience.",
+                })}
+              </span>
+            </label>
           ) : null}
-          {error ? <p className="text-xs text-destructive">{error}</p> : null}
-          {submitSummary ? (
-            <p className="text-xs text-muted-foreground">{submitSummary}</p>
-          ) : null}
-        </TabsContent>
-        <TabsContent
-          value="policy"
-          className="space-y-3 text-sm text-muted-foreground"
+        </div>
+      ) : null}
+      {canCreateContext ? (
+        <ShareDisclosureSection
+          label={t("creativeContext.share.newContextName", {
+            defaultValue: "New context name",
+          })}
         >
-          <div className="flex gap-2 rounded-md border border-border p-3">
-            <IconShieldCheck className="mt-0.5 size-4 shrink-0" />
-            <p>
-              Open contexts publish submitted resources, review contexts wait
-              for approval, and admins-only contexts require an administrator.
-            </p>
+          <div className="flex gap-2">
+            <Input
+              value={newContextName}
+              onChange={(event) => setNewContextName(event.target.value)}
+              placeholder={t("creativeContext.share.newContextName", {
+                defaultValue: "New context name",
+              })}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={busy || !newContextName.trim()}
+              onClick={() => void createContext()}
+            >
+              <IconPlus />{" "}
+              {t("creativeContext.share.new", { defaultValue: "New" })}
+            </Button>
           </div>
-          {selectedContext ? (
-            <p>{policyCopy(selectedContext.approvalPolicy)}</p>
-          ) : null}
-        </TabsContent>
-      </Tabs>
+        </ShareDisclosureSection>
+      ) : null}
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+      {submitSummary ? (
+        <p className="text-xs text-muted-foreground">{submitSummary}</p>
+      ) : null}
+      <a
+        href={docsUrl("toolkit-capability-packages", {
+          hash: "package-maturity-and-ownership",
+        })}
+        target="_blank"
+        rel="noreferrer"
+        className="inline-flex text-xs font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {t("creativeContext.share.documentation", {
+          defaultValue: "Creative Context documentation",
+        })}
+      </a>
     </section>
   );
 }
@@ -645,14 +681,16 @@ export function CreativeContextShareSheet({
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }) {
+  const t = useT();
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-lg">
         <SheetHeader>
-          <SheetTitle>Creative context</SheetTitle>
-          <SheetDescription>
-            Place this resource in a governed context for future reuse.
-          </SheetDescription>
+          <SheetTitle>
+            {t("creativeContext.share.title", {
+              defaultValue: "Creative context",
+            })}
+          </SheetTitle>
         </SheetHeader>
         <CreativeContextShareTab
           resource={resource}