@agent-native/core 0.76.7 → 0.76.9

package/corpus/core/src/client/i18n.tsx

@@ -17,6 +17,7 @@ import {
 } from "react-i18next";
 import { callAction } from "./use-action.js";
 import { setClientAppState } from "./application-state.js";
+import defaultEnglishMessages from "../templates/default/app/i18n/en-US.js";
 import {
   DEFAULT_LOCALE,
   LOCALE_HYDRATION_GLOBAL,
@@ -79,6 +80,7 @@ export interface AgentNativeI18nProviderProps {
 
 interface LocaleContextValue {
   locale: LocaleCode;
+  sourceLocale: LocaleCode;
   preference: LocalePreference;
   dir: "ltr" | "rtl";
   metadata: LocaleMetadata;
@@ -437,13 +439,14 @@ export function AgentNativeI18nProvider({
   const context = useMemo<LocaleContextValue>(
     () => ({
       locale,
+      sourceLocale,
       preference,
       dir: localeDirection(locale),
       metadata: LOCALE_METADATA[locale],
       setPreference,
       loading,
     }),
-    [loading, locale, preference, setPreference],
+    [loading, locale, preference, setPreference, sourceLocale],
   );
 
   return (
@@ -517,8 +520,56 @@ const CORE_FALLBACK_MESSAGES: Record<string, string> = {
   "codeRequired.setupRequired": "Setup required",
   "codeRequired.branchCreated": "Branch created",
   "codeRequired.close": "Close",
+  "agentPanel.useBuilder": "Use Builder",
+  "agentPanel.openDesktopToEditCode": "Open Desktop to edit code",
+  "agentPanel.codeUnavailableDescription":
+    "Source-code changes and CLI access are available in the Agent Native Desktop app.",
+  "agentPanel.downloadDesktop": "Download Desktop",
+  "agentPanel.chatMode": "Chat mode",
+  "agentPanel.chat": "Chat",
+  "agentPanel.cliTerminalMode": "CLI terminal mode",
+  "agentPanel.cli": "CLI",
+  "agentPanel.workspaceMode": "Workspace files, agents, skills, and tasks",
+  "agentPanel.workspace": "Workspace",
+  "agentPanel.newChat": "New chat",
+  "agentPanel.newTerminal": "New terminal",
+  "agentPanel.panelOptions": "Agent panel options",
+  "agentPanel.collapseSidebar": "Collapse sidebar",
+  "agentPanel.hideChats": "Hide chats",
+  "agentPanel.allChats": "All chats",
+  "agentPanel.settings": "Settings",
+  "agentPanel.feedback": "Feedback",
+  "agentPanel.exitFullscreen": "Exit fullscreen",
+  "agentPanel.fullscreen": "Fullscreen",
+  "agentPanel.closeTab": "Close tab",
+  "agentPanel.closeOtherTabs": "Close other tabs",
+  "agentPanel.closeAllTabs": "Close all tabs",
+  "agentPanel.clearChat": "Clear chat",
+  "agentPanel.cliRequiresDevMode": "CLI requires dev mode",
+  "agentPanel.cliRequiresDevModeDescription":
+    "Run this app locally with pnpm dev or use Builder.io to access the CLI terminal.",
+  "agentPanel.toggleAgent": "Toggle agent",
 };
 
+function flattenMessages(
+  value: unknown,
+  prefix = "",
+  out: Record<string, string> = {},
+) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return out;
+  for (const [key, child] of Object.entries(value)) {
+    const nextKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof child === "string") {
+      out[nextKey] = child;
+    } else {
+      flattenMessages(child, nextKey, out);
+    }
+  }
+  return out;
+}
+
+const DEFAULT_ENGLISH_MESSAGES = flattenMessages(defaultEnglishMessages);
+
 function interpolateFallbackMessage(
   template: string,
   options?: Record<string, unknown>,
@@ -534,18 +585,29 @@ function fallbackMessage(key: string, options?: Record<string, unknown>) {
   const pluralKey =
     Number.isFinite(count) && count === 1 ? `${key}_one` : `${key}_other`;
   const template =
-    CORE_FALLBACK_MESSAGES[pluralKey] ?? CORE_FALLBACK_MESSAGES[key];
+    DEFAULT_ENGLISH_MESSAGES[pluralKey] ??
+    DEFAULT_ENGLISH_MESSAGES[key] ??
+    CORE_FALLBACK_MESSAGES[pluralKey] ??
+    CORE_FALLBACK_MESSAGES[key];
   return template ? interpolateFallbackMessage(template, options) : key;
 }
 
 export function useT() {
-  const { t } = useTranslation();
+  const { i18n, t } = useTranslation();
+  const context = useContext(LocaleContext);
+  const sourceLocale = context?.sourceLocale ?? DEFAULT_LOCALE;
   return useCallback(
     (key: string, options?: Record<string, unknown>) => {
       const translated = t(key, options);
-      return translated === key ? fallbackMessage(key, options) : translated;
+      if (translated !== key) return translated;
+      const getFixedT = (
+        i18n as { getFixedT?: (locale: LocaleCode) => typeof t }
+      ).getFixedT;
+      const sourceFallback = getFixedT?.(sourceLocale)(key, options);
+      if (sourceFallback && sourceFallback !== key) return sourceFallback;
+      return fallbackMessage(key, options);
     },
-    [t],
+    [i18n, sourceLocale, t],
   );
 }
 

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/server/agent-chat-plugin.ts

@@ -7877,6 +7877,32 @@ Non-code requests are still fine on this surface: read data, navigate the UI, su
           (event as any).context = (event as any).context ?? {};
           (event as any).context.__agentChatBackgroundBody = prepared.body;
 
+          // DURABLE OWNER CONTEXT: this self-dispatch is cookieless (HMAC-only —
+          // the foreground POST carried the user's session, but this background-
+          // function invocation does not). Without a session, resolveOwnerContext()
+          // falls through to its 401 "Unauthenticated" throw and the worker dies
+          // before it can even claim the run (observed in prod as the `route_threw`
+          // diag stage — every durable run only completed via the foreground
+          // circuit-breaker's inline recovery). The run's chat thread already
+          // records the authenticated owner (written by the foreground under the
+          // signed-in user), so resolve the owner from the run row — NOT from the
+          // request body, which the HMAC does not cover and a caller could forge —
+          // and pre-seed the owner context the handler reads (resolveOwnerContext
+          // returns it before attempting any session lookup).
+          try {
+            const { getRunOwnerEmail } = await import("../agent/run-store.js");
+            const backgroundOwner = await getRunOwnerEmail(prepared.runId);
+            if (backgroundOwner) {
+              (event as any).context[OWNER_CONTEXT_KEY] = {
+                owner: backgroundOwner,
+                anonymous: false,
+              };
+            }
+          } catch {
+            // Best-effort: if the lookup fails, resolveOwnerContext runs as before
+            // and throws its normal 401, surfaced via the route_threw diagnostic.
+          }
+
           try {
             return await invokeAgentChatHandler(event);
           } catch (err: any) {

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));