@agent-native/core 0.76.6 → 0.76.8

package/corpus/core/src/client/sharing/ShareDialog.tsx

@@ -18,6 +18,7 @@ import { writeClipboardText } from "../clipboard.js";
 import { useActionQuery, useActionMutation } from "../use-action.js";
 import { cn } from "../utils.js";
 import { agentNativePath } from "../api-path.js";
+import { useT } from "../i18n.js";
 
 export interface ShareDialogProps {
   open: boolean;
@@ -113,37 +114,56 @@ const BUTTON_GHOST_ICON = cn(
   "h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
 );
 
-const VIS_META: Record<
-  Visibility,
-  { label: string; description: string; Icon: typeof IconLock }
-> = {
-  private: {
-    label: "Private",
-    description: "Only people with access can view",
-    Icon: IconLock,
-  },
-  org: {
-    label: "Organization",
-    description: "Anyone in your organization can view",
-    Icon: IconBuilding,
-  },
-  public: {
-    label: "Public",
-    description: "Anyone signed in with the link can view",
-    Icon: IconWorld,
-  },
+const VIS_ICONS: Record<Visibility, typeof IconLock> = {
+  private: IconLock,
+  org: IconBuilding,
+  public: IconWorld,
 };
 
-const ROLE_OPTIONS: Array<{ value: Role; label: string; description: string }> =
-  [
-    { value: "viewer", label: "Viewer", description: "Can view" },
-    { value: "editor", label: "Editor", description: "Can edit" },
+function useVisibilityMeta() {
+  const t = useT();
+  return {
+    private: {
+      label: t("share.private"),
+      description: t("share.privateDescription"),
+      Icon: VIS_ICONS.private,
+    },
+    org: {
+      label: t("share.organization"),
+      description: t("share.organizationDescription"),
+      Icon: VIS_ICONS.org,
+    },
+    public: {
+      label: t("share.public"),
+      description: t("share.publicDescription"),
+      Icon: VIS_ICONS.public,
+    },
+  } satisfies Record<
+    Visibility,
+    { label: string; description: string; Icon: typeof IconLock }
+  >;
+}
+
+function useRoleOptions() {
+  const t = useT();
+  return [
+    {
+      value: "viewer",
+      label: t("share.viewer"),
+      description: t("share.viewerDescription"),
+    },
+    {
+      value: "editor",
+      label: t("share.editor"),
+      description: t("share.editorDescription"),
+    },
     {
       value: "admin",
-      label: "Admin",
-      description: "Can edit and manage access",
+      label: t("share.admin"),
+      description: t("share.adminDescription"),
     },
-  ];
+  ] satisfies Array<{ value: Role; label: string; description: string }>;
+}
 
 /**
  * Framework share dialog. Drop into any template via
@@ -164,6 +184,7 @@ export function ShareDialog(props: ShareDialogProps) {
     embedTabContent,
     linkTabExtras,
   } = props;
+  const t = useT();
 
   const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
     resourceType,
@@ -196,8 +217,8 @@ export function ShareDialog(props: ShareDialogProps) {
   if (!open) return null;
 
   const titleText = resourceTitle
-    ? `Share "${resourceTitle}"`
-    : `Share ${resourceType}`;
+    ? t("share.titleWithResource", { title: resourceTitle })
+    : t("share.titleWithType", { type: resourceType });
 
   return createPortal(
     <div
@@ -218,13 +239,15 @@ export function ShareDialog(props: ShareDialogProps) {
             </div>
             {sharesQuery.data?.ownerEmail ? (
               <div className="mt-0.5 truncate text-xs text-muted-foreground">
-                Owner: {displayName(sharesQuery.data.ownerEmail, orgMembers)}
+                {t("share.owner", {
+                  name: displayName(sharesQuery.data.ownerEmail, orgMembers),
+                })}
               </div>
             ) : null}
           </div>
           <button
             type="button"
-            aria-label="Close"
+            aria-label={t("share.close")}
             onClick={onClose}
             className={BUTTON_GHOST_ICON}
           >
@@ -235,7 +258,7 @@ export function ShareDialog(props: ShareDialogProps) {
         {tabsEnabled ? (
           <div
             role="tablist"
-            aria-label="Share options"
+            aria-label={t("share.shareOptions")}
             className="mx-5 mt-1 flex gap-1 border-b border-border"
           >
             {hasLinkTab ? (
@@ -243,21 +266,21 @@ export function ShareDialog(props: ShareDialogProps) {
                 active={tab === "link"}
                 onClick={() => setTab("link")}
                 icon={<IconLink size={14} strokeWidth={1.75} />}
-                label="Link"
+                label={t("share.link")}
               />
             ) : null}
             <TabTrigger
               active={tab === "invite"}
               onClick={() => setTab("invite")}
               icon={<IconMail size={14} strokeWidth={1.75} />}
-              label="Invite"
+              label={t("share.invite")}
             />
             {hasEmbedTab ? (
               <TabTrigger
                 active={tab === "embed"}
                 onClick={() => setTab("embed")}
                 icon={<IconCode size={14} strokeWidth={1.75} />}
-                label="Embed"
+                label={t("share.embed")}
               />
             ) : null}
           </div>
@@ -290,7 +313,7 @@ export function ShareDialog(props: ShareDialogProps) {
 
         <div className="flex justify-end border-t border-border px-5 py-3">
           <button type="button" onClick={onClose} className={BUTTON_PRIMARY_SM}>
-            Done
+            {t("share.done")}
           </button>
         </div>
       </div>
@@ -340,13 +363,15 @@ function LinkTab(props: {
   extras?: ReactNode;
 }) {
   const { resourceType, resourceId, shareUrl, sharesQuery, extras } = props;
+  const t = useT();
+  const visibilityMeta = useVisibilityMeta();
 
   const setVisibility = useActionMutation("set-resource-visibility");
   const data = sharesQuery.data;
   const visibility: Visibility =
     (data?.visibility as Visibility | null) ?? "private";
   const canManage = data?.role === "owner" || data?.role === "admin";
-  const meta = VIS_META[visibility];
+  const meta = visibilityMeta[visibility];
 
   const handleVisibility = (next: Visibility) => {
     if (next === visibility) return;
@@ -359,7 +384,9 @@ function LinkTab(props: {
   return (
     <div className="space-y-4">
       <div>
-        <div className="mb-2 text-sm font-semibold">General access</div>
+        <div className="mb-2 text-sm font-semibold">
+          {t("share.generalAccess")}
+        </div>
         <div className="flex items-center gap-3">
           <span
             aria-hidden
@@ -380,7 +407,7 @@ function LinkTab(props: {
         </div>
       </div>
 
-      <CopyField label="Share link" value={shareUrl} />
+      <CopyField label={t("share.shareLink")} value={shareUrl} />
 
       {extras}
     </div>
@@ -407,6 +434,8 @@ function InviteTab(props: {
     showVisibility,
     orgMembers,
   } = props;
+  const t = useT();
+  const visibilityMeta = useVisibilityMeta();
 
   const share = useActionMutation("share-resource");
   const unshare = useActionMutation("unshare-resource");
@@ -422,7 +451,7 @@ function InviteTab(props: {
   const visibility: Visibility =
     (data?.visibility as Visibility | null) ?? "private";
   const canManage = data?.role === "owner" || data?.role === "admin";
-  const meta = VIS_META[visibility];
+  const meta = visibilityMeta[visibility];
 
   const handleAdd = () => {
     const trimmed = email.trim();
@@ -473,7 +502,7 @@ function InviteTab(props: {
           <div className="flex items-stretch gap-2">
             <input
               type="email"
-              placeholder="Add people by email"
+              placeholder={t("share.addPeopleByEmail")}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               onKeyDown={(e) => {
@@ -492,14 +521,16 @@ function InviteTab(props: {
                 onChange={(e) => setNotifyPeople(e.target.checked)}
                 className="h-4 w-4 rounded border-input accent-primary"
               />
-              Notify people
+              {t("share.notifyPeople")}
             </label>
           ) : null}
         </div>
       ) : null}
 
       <div>
-        <div className="mb-2 text-sm font-semibold">People with access</div>
+        <div className="mb-2 text-sm font-semibold">
+          {t("share.peopleWithAccess")}
+        </div>
         <ul className="flex flex-col gap-1 list-none p-0 m-0">
           {data?.ownerEmail ? (
             <li className="flex items-center gap-3 px-1 py-1.5 text-sm">
@@ -507,7 +538,9 @@ function InviteTab(props: {
               <span className="flex-1 min-w-0 truncate">
                 {displayName(data.ownerEmail, orgMembers)}
               </span>
-              <span className="text-xs text-muted-foreground">Owner</span>
+              <span className="text-xs text-muted-foreground">
+                {t("share.ownerRole")}
+              </span>
             </li>
           ) : null}
           {shares.map((s) => (
@@ -534,7 +567,7 @@ function InviteTab(props: {
               {canManage ? (
                 <button
                   type="button"
-                  aria-label="Remove"
+                  aria-label={t("share.remove")}
                   onClick={() => handleRemove(s)}
                   className={BUTTON_GHOST_ICON}
                 >
@@ -545,7 +578,7 @@ function InviteTab(props: {
           ))}
           {!shares.length && !data?.ownerEmail ? (
             <li className="px-1 py-1.5 text-sm text-muted-foreground">
-              No one has access yet.
+              {t("share.noAccess")}
             </li>
           ) : null}
         </ul>
@@ -553,7 +586,9 @@ function InviteTab(props: {
 
       {showVisibility ? (
         <div>
-          <div className="mb-2 text-sm font-semibold">General access</div>
+          <div className="mb-2 text-sm font-semibold">
+            {t("share.generalAccess")}
+          </div>
           <div className="flex items-center gap-3">
             <span
               aria-hidden
@@ -583,11 +618,12 @@ function InviteTab(props: {
 // ---------------------------------------------------------------------------
 
 function DefaultEmbedBody({ embedUrl }: { embedUrl: string }) {
+  const t = useT();
   const code = `<div style="position:relative;padding-bottom:56.25%;height:0"><iframe src="${embedUrl}" frameborder="0" allowfullscreen allow="autoplay; picture-in-picture" style="position:absolute;inset:0;width:100%;height:100%"></iframe></div>`;
   return (
     <div className="space-y-3">
-      <CopyField label="Embed URL" value={embedUrl} />
-      <CopyField label="Embed code" value={code} multiline />
+      <CopyField label={t("share.embedUrl")} value={embedUrl} />
+      <CopyField label={t("share.embedCode")} value={code} multiline />
     </div>
   );
 }
@@ -606,6 +642,7 @@ function CopyField({
   multiline?: boolean;
 }) {
   const [copied, setCopied] = useState(false);
+  const t = useT();
   const copy = async () => {
     if (!(await writeClipboardText(value))) {
       setCopied(false);
@@ -636,7 +673,7 @@ function CopyField({
         <button
           type="button"
           onClick={copy}
-          aria-label="Copy"
+          aria-label={t("share.copy")}
           className={cn(BUTTON_OUTLINE_SM, "w-9 px-0")}
         >
           {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
@@ -684,15 +721,17 @@ function SelectItems({
 }
 
 function RoleSelect(props: { value: Role; onChange: (v: Role) => void }) {
+  const t = useT();
+  const roleOptions = useRoleOptions();
   const current =
-    ROLE_OPTIONS.find((o) => o.value === props.value) ?? ROLE_OPTIONS[0];
+    roleOptions.find((o) => o.value === props.value) ?? roleOptions[0];
   return (
     <Select.Root
       value={props.value}
       onValueChange={(v) => props.onChange(v as Role)}
     >
       <Select.Trigger
-        aria-label="Role"
+        aria-label={t("share.role")}
         className={cn(
           BUTTON_BASE,
           "h-9 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground",
@@ -710,7 +749,7 @@ function RoleSelect(props: { value: Role; onChange: (v: Role) => void }) {
           sideOffset={4}
         >
           <Select.Viewport>
-            <SelectItems items={ROLE_OPTIONS} />
+            <SelectItems items={roleOptions} />
           </Select.Viewport>
         </Select.Content>
       </Select.Portal>
@@ -723,7 +762,9 @@ function VisibilitySelect(props: {
   onChange: (v: Visibility) => void;
   disabled?: boolean;
 }) {
-  const current = VIS_META[props.value];
+  const t = useT();
+  const visibilityMeta = useVisibilityMeta();
+  const current = visibilityMeta[props.value];
   return (
     <Select.Root
       value={props.value}
@@ -731,7 +772,7 @@ function VisibilitySelect(props: {
       disabled={props.disabled}
     >
       <Select.Trigger
-        aria-label="General access"
+        aria-label={t("share.generalAccess")}
         className={cn(
           BUTTON_BASE,
           "h-7 px-1 -ms-1 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
@@ -750,10 +791,10 @@ function VisibilitySelect(props: {
         >
           <Select.Viewport>
             <SelectItems
-              items={(Object.keys(VIS_META) as Visibility[]).map((k) => ({
+              items={(Object.keys(VIS_ICONS) as Visibility[]).map((k) => ({
                 value: k,
-                label: VIS_META[k].label,
-                description: VIS_META[k].description,
+                label: visibilityMeta[k].label,
+                description: visibilityMeta[k].description,
               }))}
             />
           </Select.Viewport>

package/corpus/core/src/styles/agent-native.css

@@ -41,6 +41,65 @@
    zoom-in/out, slide-in-from-*, spin-in, etc.). */
 @import "tw-animate-css";
 
+/* Shared agent sidebar entry/exit transitions.
+   `@starting-style` gives newly-mounted panels a real before-change style, so
+   opening animates in as reliably as closing animates out. */
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"] {
+  width: 0;
+  will-change: width;
+  transition: width 260ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"] {
+  width: var(--agent-sidebar-width);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="mobile"] {
+  transform: var(
+    --agent-sidebar-closed-transform,
+    translateX(calc(100% + 1px))
+  );
+  will-change: transform;
+  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+  transform: translateX(0);
+}
+
+.agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"] {
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+  opacity: 1;
+}
+
+@starting-style {
+  .agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"] {
+    width: 0;
+  }
+
+  .agent-sidebar-panel[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+    transform: var(
+      --agent-sidebar-closed-transform,
+      translateX(calc(100% + 1px))
+    );
+  }
+
+  .agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-sidebar-panel[data-agent-sidebar-animation],
+  .agent-sidebar-backdrop[data-agent-sidebar-animation] {
+    transition: none;
+  }
+}
+
 @theme inline {
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));

package/corpus/core/src/templates/default/app/i18n/ar-SA.ts

@@ -71,6 +71,161 @@ const messages = {
       suggestionRouteSlack: "Route Slack mentions to my analytics app",
       suggestionGrantKey: "Grant my OpenAI key to this app",
     },
+    pages: {
+      appsDescription:
+        "Open workspace apps and start new app creation from Dispatch.",
+      appsDescriptionWithWorkspace:
+        'Apps in the "{{workspace}}" workspace. Each app gets its own route under this workspace and shares its database, auth, and agent chat.',
+      appsInWorkspace: "Apps in {{workspace}}",
+      workspaceApps: "Workspace apps",
+      activeCount: "{{count}} active",
+      hiddenCount: "{{count}} hidden",
+      createApp: "Create app",
+      templates: "Templates",
+      checkingTemplates: "Checking available templates",
+      templatesAvailable: "{{count}} available to scaffold",
+      hide: "Hide",
+      show: "Show",
+      hiddenApps: "Hidden apps",
+      hiddenAppCount: "{{count}} hidden apps",
+      workspaceAppFallback: "Workspace App",
+      workspaceAppDescription:
+        "Open a deployed app or check the status of an app being created.",
+      pageNotFound: "Page not found",
+      pageNotFoundDescription:
+        "This route is not in the workspace app list yet.",
+      browseApps: "Browse apps",
+      newApp: "New App",
+      newAppDescription:
+        "Create a workspace app from a prompt and apply the workspace vault policy.",
+      destinationsDescription:
+        "Saved outbound Slack channels, Telegram chats, and thread targets.",
+      savedDestinations: "Saved destinations",
+      addDestination: "Add destination",
+      quickTestMessage: "Quick test message",
+      send: "Send",
+      delete: "Delete",
+      cancel: "Cancel",
+      messageSent: "Message sent",
+      unableToSendMessage: "Unable to send message",
+      destinationSaved: "Destination saved",
+      destinationRemoved: "Destination removed",
+      deleteDestinationTitle: "Delete destination?",
+      deleteDestinationDescription:
+        '"{{name}}" will be removed. Any saved workflows or jobs that target this destination will start failing on the next send.',
+      noDestinations:
+        "No destinations saved yet. Add your first Slack channel or Telegram chat on the right.",
+      dailyDigestChannel: "Daily digest channel",
+      optionalThreadOrTopicId: "Optional thread or topic id",
+      destinationNotes: "What should use this destination?",
+      saveDestination: "Save destination",
+      noWorkspaceApps: "No workspace apps yet",
+      noWorkspaceAppsDescription:
+        "Create an app when a workflow needs its own focused place to live.",
+      appNotFound: "App not found",
+      building: "Building",
+      appBuildingPrefix: "This app is being created. It will be available at",
+      appBuildingSuffix:
+        "after its branch is merged and the workspace deploy finishes.",
+      branch: "Branch: {{branch}}",
+      openBuilderBranch: "Open Builder branch",
+      openingApp: "Opening {{name}}",
+      redirectingTo: "Redirecting to",
+      openApp: "Open app",
+      notDispatchOrWorkspaceApp:
+        " a Dispatch tab or a workspace app in this workspace.",
+      agentsDescription:
+        "Dispatch can delegate to the built-in app suite over A2A by default. Add extra agents here only if you want to route work to apps outside that built-in set.",
+      mcpAccessUpdated: "MCP app access updated",
+      selectAppForMcp: "Select at least one app, or expose all apps.",
+      mcpUrlCopied: "MCP URL copied",
+      mcpUrlCopyFailed: "Could not copy MCP URL",
+      unifiedMcpGateway: "Unified MCP gateway",
+      unifiedMcpGatewayDescription:
+        "Connect external agents to Dispatch once, then route to granted workspace apps through",
+      allApps: "All apps",
+      selectedApps: "Selected apps",
+      loading: "Loading",
+      grantedCount: "{{count}} granted",
+      exposeAllAppsMcp: "Expose all apps through Dispatch MCP",
+      copyUrl: "Copy URL",
+      metricsUnavailable: "Metrics unavailable",
+      unableToLoadUsage: "Unable to load usage.",
+      metricsDescriptionBuilder:
+        "Workspace-wide Builder.io credit spend, chat volume, user activity, and app access.",
+      metricsDescriptionLlm:
+        "Workspace-wide LLM spend, chat volume, user activity, and app access.",
+      llmCalls: "LLM calls",
+      activeUsers: "Active users",
+      workspaceAppsStat: "Workspace apps",
+      chatThreads: "Chat threads",
+    },
+  },
+  agentPanel: {
+    useBuilder: "Use Builder",
+    openDesktopToEditCode: "Open Desktop to edit code",
+    codeUnavailableDescription:
+      "Source-code changes and CLI access are available in the Agent Native Desktop app.",
+    downloadDesktop: "Download Desktop",
+    chatMode: "Chat mode",
+    chat: "Chat",
+    cliTerminalMode: "CLI terminal mode",
+    cli: "CLI",
+    workspaceMode: "Workspace files, agents, skills, and tasks",
+    workspace: "Workspace",
+    newChat: "New chat",
+    newTerminal: "New terminal",
+    panelOptions: "Agent panel options",
+    collapseSidebar: "Collapse sidebar",
+    hideChats: "Hide chats",
+    allChats: "All chats",
+    settings: "Settings",
+    feedback: "Feedback",
+    exitFullscreen: "Exit fullscreen",
+    fullscreen: "Fullscreen",
+    closeTab: "Close tab",
+    closeOtherTabs: "إغلاق علامات التبويب الأخرى",
+    closeAllTabs: "إغلاق كل علامات التبويب",
+    clearChat: "مسح الدردشة",
+    cliRequiresDevMode: "CLI requires dev mode",
+    cliRequiresDevModeDescription:
+      "Run this app locally with pnpm dev or use Builder.io to access the CLI terminal.",
+    toggleAgent: "Toggle agent",
+  },
+  share: {
+    titleWithResource: 'Share "{{title}}"',
+    titleWithType: "Share {{type}}",
+    owner: "Owner: {{name}}",
+    close: "Close",
+    shareOptions: "Share options",
+    link: "Link",
+    invite: "Invite",
+    embed: "Embed",
+    done: "Done",
+    generalAccess: "General access",
+    shareLink: "Share link",
+    addPeopleByEmail: "Add people by email",
+    notifyPeople: "Notify people",
+    peopleWithAccess: "People with access",
+    ownerRole: "Owner",
+    remove: "Remove",
+    noAccess: "No one has access yet.",
+    embedUrl: "Embed URL",
+    embedCode: "Embed code",
+    copy: "Copy",
+    role: "Role",
+    private: "Private",
+    privateDescription: "Only people with access can view",
+    organization: "Organization",
+    organizationDescription: "Anyone in your organization can view",
+    public: "Public",
+    publicDescription: "Anyone signed in with the link can view",
+    viewer: "Viewer",
+    viewerDescription: "Can view",
+    editor: "Editor",
+    editorDescription: "Can edit",
+    admin: "Admin",
+    adminDescription: "Can edit and manage access",
   },
   runsTray: {
     runs: "Runs",