@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/src/client/observability/ObservabilityDashboard.tsx

@@ -17,6 +17,7 @@ import {
   IconAlertTriangle,
 } from "@tabler/icons-react";
 import { cn } from "../utils.js";
+import { useT } from "../i18n.js";
 import {
   useObservabilityOverview,
   useTraces,
@@ -170,40 +171,41 @@ function LoadingState() {
 // ─── Tab: Overview ──────────────────────────────────────────────────────
 
 function OverviewTab({ days }: { days: number }) {
+  const t = useT();
   const { data, isLoading } = useObservabilityOverview(days);
 
   if (isLoading) return <LoadingState />;
-  if (!data) return <EmptyState message="No data available" />;
+  if (!data) return <EmptyState message={t("observability.noData")} />;
 
   return (
     <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
       <MetricCard
-        label="Total runs"
+        label={t("observability.totalRuns")}
         value={String(data.totalRuns)}
         icon={<IconActivity size={16} />}
       />
       <MetricCard
-        label="Total cost"
+        label={t("observability.totalCost")}
         value={formatCostCents(data.totalCostCents)}
         icon={<IconCoin size={16} />}
       />
       <MetricCard
-        label="Avg latency"
+        label={t("observability.avgLatency")}
         value={formatDuration(data.avgDurationMs)}
         icon={<IconClock size={16} />}
       />
       <MetricCard
-        label="Tool success"
+        label={t("observability.toolSuccess")}
         value={formatPercent(data.toolSuccessRate)}
         icon={<IconTool size={16} />}
       />
       <MetricCard
-        label="Thumbs up"
+        label={t("observability.thumbsUp")}
         value={formatPercent(data.thumbsUpRate)}
         icon={<IconThumbUp size={16} />}
       />
       <MetricCard
-        label="Avg eval score"
+        label={t("observability.avgEvalScore")}
         value={data.avgEvalScore.toFixed(2)}
         icon={<IconMoodSmile size={16} />}
       />
@@ -214,6 +216,7 @@ function OverviewTab({ days }: { days: number }) {
 // ─── Tab: Conversations ─────────────────────────────────────────────────
 
 function ConversationsTab({ days }: { days: number }) {
+  const t = useT();
   const { data: traces, isLoading } = useTraces(days);
   const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
 
@@ -228,7 +231,7 @@ function ConversationsTab({ days }: { days: number }) {
 
   if (isLoading) return <LoadingState />;
   if (!traces || traces.length === 0)
-    return <EmptyState message="No conversations recorded yet" />;
+    return <EmptyState message={t("observability.noConversations")} />;
 
   return (
     <div className="rounded-lg border border-border overflow-hidden">
@@ -236,55 +239,57 @@ function ConversationsTab({ days }: { days: number }) {
         <thead>
           <tr className="border-b border-border bg-muted/30">
             <th className="px-3 py-2 font-medium text-muted-foreground w-[15%]">
-              Run
+              {t("observability.run")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground w-[20%]">
-              Model
+              {t("observability.model")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Duration
+              {t("observability.duration")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Cost
+              {t("observability.cost")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Tools
+              {t("observability.tools")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Time
+              {t("observability.time")}
             </th>
             <th className="w-8" />
           </tr>
         </thead>
         <tbody>
-          {traces.map((t: TraceSummary) => (
+          {traces.map((trace: TraceSummary) => (
             <tr
-              key={t.runId}
-              onClick={() => setSelectedRunId(t.runId)}
+              key={trace.runId}
+              onClick={() => setSelectedRunId(trace.runId)}
               className="border-b border-border last:border-b-0 cursor-pointer hover:bg-accent/30"
             >
               <td className="px-3 py-2 font-mono text-foreground truncate">
-                {truncateId(t.runId)}
+                {truncateId(trace.runId)}
               </td>
               <td className="px-3 py-2 text-muted-foreground truncate">
-                {t.model || "unknown"}
+                {trace.model || "unknown"}
               </td>
               <td className="px-3 py-2 tabular-nums text-muted-foreground">
-                {formatDuration(t.totalDurationMs)}
+                {formatDuration(trace.totalDurationMs)}
               </td>
               <td className="px-3 py-2 tabular-nums text-muted-foreground">
-                {formatCost(t.totalCostCentsX100)}
+                {formatCost(trace.totalCostCentsX100)}
               </td>
               <td className="px-3 py-2 tabular-nums text-muted-foreground">
-                {t.toolCalls}
-                {t.failedTools > 0 && (
+                {trace.toolCalls}
+                {trace.failedTools > 0 && (
                   <span className="ml-1 text-red-500">
-                    ({t.failedTools} failed)
+                    {t("observability.failedCount", {
+                      count: trace.failedTools,
+                    })}
                   </span>
                 )}
               </td>
               <td className="px-3 py-2 text-muted-foreground truncate">
-                {timeAgo(t.createdAt)}
+                {timeAgo(trace.createdAt)}
               </td>
               <td className="px-3 py-2">
                 <IconChevronRight size={14} className="text-muted-foreground" />
@@ -304,6 +309,7 @@ function TraceDetailView({
   runId: string;
   onBack: () => void;
 }) {
+  const t = useT();
   const { data, isLoading } = useTraceDetail(runId);
 
   return (
@@ -313,7 +319,7 @@ function TraceDetailView({
         className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mb-3"
       >
         <IconArrowLeft size={14} />
-        Back to list
+        {t("observability.backToList")}
       </button>
 
       {isLoading && <LoadingState />}
@@ -323,7 +329,7 @@ function TraceDetailView({
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
             <div className="rounded-lg border border-border p-3">
               <div className="text-[10px] text-muted-foreground mb-1">
-                Model
+                {t("observability.model")}
               </div>
               <div className="text-sm font-medium text-foreground truncate">
                 {data.summary.model || "unknown"}
@@ -331,21 +337,23 @@ function TraceDetailView({
             </div>
             <div className="rounded-lg border border-border p-3">
               <div className="text-[10px] text-muted-foreground mb-1">
-                Duration
+                {t("observability.duration")}
               </div>
               <div className="text-sm font-medium tabular-nums text-foreground">
                 {formatDuration(data.summary.totalDurationMs)}
               </div>
             </div>
             <div className="rounded-lg border border-border p-3">
-              <div className="text-[10px] text-muted-foreground mb-1">Cost</div>
+              <div className="text-[10px] text-muted-foreground mb-1">
+                {t("observability.cost")}
+              </div>
               <div className="text-sm font-medium tabular-nums text-foreground">
                 {formatCost(data.summary.totalCostCentsX100)}
               </div>
             </div>
             <div className="rounded-lg border border-border p-3">
               <div className="text-[10px] text-muted-foreground mb-1">
-                Spans
+                {t("observability.spans")}
               </div>
               <div className="text-sm font-medium tabular-nums text-foreground">
                 {data.summary.totalSpans}
@@ -358,19 +366,19 @@ function TraceDetailView({
               <thead>
                 <tr className="border-b border-border bg-muted/30">
                   <th className="px-3 py-2 font-medium text-muted-foreground w-[15%]">
-                    Type
+                    {t("observability.type")}
                   </th>
                   <th className="px-3 py-2 font-medium text-muted-foreground w-[35%]">
-                    Name
+                    {t("observability.name")}
                   </th>
                   <th className="px-3 py-2 font-medium text-muted-foreground">
-                    Duration
+                    {t("observability.duration")}
                   </th>
                   <th className="px-3 py-2 font-medium text-muted-foreground">
-                    Tokens
+                    {t("observability.tokens")}
                   </th>
                   <th className="px-3 py-2 font-medium text-muted-foreground">
-                    Status
+                    {t("observability.status")}
                   </th>
                 </tr>
               </thead>
@@ -413,11 +421,12 @@ function TraceDetailView({
 // ─── Tab: Evals ─────────────────────────────────────────────────────────
 
 function EvalsTab({ days }: { days: number }) {
+  const t = useT();
   const { data, isLoading } = useEvalStats(days);
 
   if (isLoading) return <LoadingState />;
   if (!data || data.totalEvals === 0)
-    return <EmptyState message="No eval results recorded yet" />;
+    return <EmptyState message={t("observability.noEvals")} />;
 
   const maxCount = Math.max(...data.byCriteria.map((c) => c.count), 1);
 
@@ -425,12 +434,12 @@ function EvalsTab({ days }: { days: number }) {
     <div className="space-y-4">
       <div className="grid grid-cols-2 gap-3">
         <MetricCard
-          label="Total evals"
+          label={t("observability.totalEvals")}
           value={String(data.totalEvals)}
           icon={<IconChartBar size={16} />}
         />
         <MetricCard
-          label="Avg score"
+          label={t("observability.avgScore")}
           value={data.avgScore.toFixed(2)}
           icon={<IconMoodSmile size={16} />}
         />
@@ -439,7 +448,7 @@ function EvalsTab({ days }: { days: number }) {
       {data.byCriteria.length > 0 && (
         <div>
           <h3 className="text-xs font-medium text-foreground mb-2">
-            Scores by criteria
+            {t("observability.scoresByCriteria")}
           </h3>
           <div className="space-y-2">
             {data.byCriteria.map((c) => (
@@ -470,6 +479,7 @@ function EvalsTab({ days }: { days: number }) {
 // ─── Tab: Experiments ───────────────────────────────────────────────────
 
 function ExperimentsTab() {
+  const t = useT();
   const { data: experiments, isLoading } = useExperiments();
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
@@ -484,7 +494,7 @@ function ExperimentsTab() {
 
   if (isLoading) return <LoadingState />;
   if (!experiments || experiments.length === 0)
-    return <EmptyState message="No experiments created yet" />;
+    return <EmptyState message={t("observability.noExperiments")} />;
 
   return (
     <div className="rounded-lg border border-border overflow-hidden">
@@ -492,16 +502,16 @@ function ExperimentsTab() {
         <thead>
           <tr className="border-b border-border bg-muted/30">
             <th className="px-3 py-2 font-medium text-muted-foreground w-[40%]">
-              Name
+              {t("observability.name")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Status
+              {t("observability.status")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Variants
+              {t("observability.variants")}
             </th>
             <th className="px-3 py-2 font-medium text-muted-foreground">
-              Created
+              {t("observability.created")}
             </th>
             <th className="w-8" />
           </tr>
@@ -543,6 +553,7 @@ function ExperimentDetailView({
   id: string;
   onBack: () => void;
 }) {
+  const t = useT();
   const { data: exp, isLoading } = useExperimentDetail(id);
   const { data: results } = useExperimentResults(id);
 
@@ -553,7 +564,7 @@ function ExperimentDetailView({
         className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mb-3"
       >
         <IconArrowLeft size={14} />
-        Back to experiments
+        {t("observability.backToExperiments")}
       </button>
 
       {isLoading && <LoadingState />}
@@ -570,7 +581,7 @@ function ExperimentDetailView({
           <div className="grid grid-cols-3 gap-3">
             <div className="rounded-lg border border-border p-3">
               <div className="text-[10px] text-muted-foreground mb-1">
-                Variants
+                {t("observability.variants")}
               </div>
               <div className="text-sm font-medium tabular-nums text-foreground">
                 {exp.variants.length}
@@ -578,7 +589,7 @@ function ExperimentDetailView({
             </div>
             <div className="rounded-lg border border-border p-3">
               <div className="text-[10px] text-muted-foreground mb-1">
-                Metrics
+                {t("observability.metrics")}
               </div>
               <div className="text-sm font-medium tabular-nums text-foreground">
                 {exp.metrics.length}
@@ -586,7 +597,7 @@ function ExperimentDetailView({
             </div>
             <div className="rounded-lg border border-border p-3">
               <div className="text-[10px] text-muted-foreground mb-1">
-                Level
+                {t("observability.level")}
               </div>
               <div className="text-sm font-medium text-foreground capitalize">
                 {exp.assignmentLevel}
@@ -597,7 +608,7 @@ function ExperimentDetailView({
           {exp.variants.length > 0 && (
             <div>
               <h4 className="text-xs font-medium text-foreground mb-2">
-                Variants
+                {t("observability.variants")}
               </h4>
               <div className="space-y-1">
                 {exp.variants.map((v) => (
@@ -620,20 +631,20 @@ function ExperimentDetailView({
           {results && results.length > 0 && (
             <div>
               <h4 className="text-xs font-medium text-foreground mb-2">
-                Results
+                {t("observability.results")}
               </h4>
               <div className="rounded-lg border border-border overflow-hidden">
                 <table className="w-full table-fixed text-left text-xs">
                   <thead>
                     <tr className="border-b border-border bg-muted/30">
                       <th className="px-3 py-2 font-medium text-muted-foreground w-[20%]">
-                        Variant
+                        {t("observability.variant")}
                       </th>
                       <th className="px-3 py-2 font-medium text-muted-foreground w-[25%]">
-                        Metric
+                        {t("observability.metric")}
                       </th>
                       <th className="px-3 py-2 font-medium text-muted-foreground">
-                        Value
+                        {t("observability.value")}
                       </th>
                       <th className="px-3 py-2 font-medium text-muted-foreground">
                         CI
@@ -681,6 +692,7 @@ function ExperimentDetailView({
 // ─── Tab: Feedback ──────────────────────────────────────────────────────
 
 function FeedbackTab({ days }: { days: number }) {
+  const t = useT();
   const { data: stats, isLoading: statsLoading } = useFeedbackStats(days);
   const { data: entries, isLoading: listLoading } = useFeedbackList(days);
   const { data: satisfaction } = useSatisfaction(days);
@@ -700,22 +712,22 @@ function FeedbackTab({ days }: { days: number }) {
     <div className="space-y-4">
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
         <MetricCard
-          label="Total feedback"
+          label={t("observability.totalFeedback")}
           value={String(stats?.total ?? 0)}
           icon={<IconMessageReport size={16} />}
         />
         <MetricCard
-          label="Thumbs up"
+          label={t("observability.thumbsUp")}
           value={String(stats?.thumbsUp ?? 0)}
           icon={<IconThumbUp size={16} />}
         />
         <MetricCard
-          label="Thumbs down"
+          label={t("observability.thumbsDown")}
           value={String(stats?.thumbsDown ?? 0)}
           icon={<IconThumbDown size={16} />}
         />
         <MetricCard
-          label="Frustration"
+          label={t("observability.frustration")}
           value={avgFrustration.toFixed(2)}
           icon={<IconAlertTriangle size={16} />}
         />
@@ -724,7 +736,7 @@ function FeedbackTab({ days }: { days: number }) {
       {thumbsTotal > 0 && (
         <div className="rounded-lg border border-border p-3">
           <div className="text-xs text-muted-foreground mb-2">
-            Thumbs up rate
+            {t("observability.thumbsUpRate")}
           </div>
           <div className="flex items-center gap-3">
             <div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
@@ -743,7 +755,7 @@ function FeedbackTab({ days }: { days: number }) {
       {stats?.categories && Object.keys(stats.categories).length > 0 && (
         <div>
           <h3 className="text-xs font-medium text-foreground mb-2">
-            Categories
+            {t("observability.categories")}
           </h3>
           <div className="flex flex-wrap gap-1.5">
             {Object.entries(stats.categories).map(([cat, count]) => (
@@ -807,11 +819,23 @@ function FeedbackTab({ days }: { days: number }) {
 // ─── Main Dashboard ─────────────────────────────────────────────────────
 
 const TABS = [
-  { id: "overview", label: "Overview", icon: IconActivity },
-  { id: "conversations", label: "Conversations", icon: IconMessages },
-  { id: "evals", label: "Evals", icon: IconChartBar },
-  { id: "experiments", label: "Experiments", icon: IconAB2 },
-  { id: "feedback", label: "Feedback", icon: IconMessageReport },
+  { id: "overview", labelKey: "observability.overview", icon: IconActivity },
+  {
+    id: "conversations",
+    labelKey: "observability.conversations",
+    icon: IconMessages,
+  },
+  { id: "evals", labelKey: "observability.evals", icon: IconChartBar },
+  {
+    id: "experiments",
+    labelKey: "observability.experiments",
+    icon: IconAB2,
+  },
+  {
+    id: "feedback",
+    labelKey: "observability.feedback",
+    icon: IconMessageReport,
+  },
 ] as const;
 
 type TabId = (typeof TABS)[number]["id"];
@@ -823,6 +847,7 @@ export interface ObservabilityDashboardProps {
 export function ObservabilityDashboard({
   className,
 }: ObservabilityDashboardProps) {
+  const t = useT();
   const [activeTab, setActiveTab] = useState<TabId>("overview");
   const [days, setDays] = useState(7);
 
@@ -844,7 +869,7 @@ export function ObservabilityDashboard({
                 )}
               >
                 <Icon size={14} />
-                {tab.label}
+                {t(tab.labelKey)}
               </button>
             );
           })}

package/corpus/core/src/client/org/RequireActiveOrg.tsx

@@ -12,6 +12,7 @@ import {
   useJoinByDomain,
   useOrg,
 } from "./hooks.js";
+import { useT } from "../i18n.js";
 
 export interface RequireActiveOrgProps {
   children: ReactNode;
@@ -46,10 +47,11 @@ export interface RequireActiveOrgProps {
  */
 export function RequireActiveOrg({
   children,
-  title = "Create your organization",
-  description = "This app organizes your content by team. Create an organization to continue — you can invite teammates afterward.",
+  title,
+  description,
   className,
 }: RequireActiveOrgProps) {
+  const t = useT();
   const { data: org, isLoading, isError, error, refetch } = useOrg();
 
   if (isLoading) return null;
@@ -61,7 +63,7 @@ export function RequireActiveOrg({
   if (isError) {
     return (
       <ErrorPane
-        message={(error as Error)?.message ?? "Couldn't load organization."}
+        message={(error as Error)?.message ?? t("org.loadErrorFallback")}
         onRetry={() => void refetch()}
         className={className}
       />
@@ -75,8 +77,8 @@ export function RequireActiveOrg({
       pendingInvitations={org?.pendingInvitations ?? []}
       domainMatches={org?.domainMatches ?? []}
       email={org?.email ?? ""}
-      title={title}
-      description={description}
+      title={title ?? t("org.createTitle")}
+      description={description ?? t("org.createDescription")}
       className={className}
     />
   );
@@ -91,6 +93,7 @@ function ErrorPane({
   onRetry: () => void;
   className?: string;
 }) {
+  const t = useT();
   return (
     <div
       className={
@@ -101,7 +104,7 @@ function ErrorPane({
       <div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-lg">
         <div className="mb-4 flex items-center gap-2">
           <IconAlertTriangle className="h-5 w-5 text-muted-foreground" />
-          <h1 className="text-lg font-semibold">Couldn't load organization</h1>
+          <h1 className="text-lg font-semibold">{t("org.loadErrorTitle")}</h1>
         </div>
         <p className="mb-5 text-sm text-muted-foreground">{message}</p>
         <button
@@ -109,7 +112,7 @@ function ErrorPane({
           onClick={onRetry}
           className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
         >
-          Try again
+          {t("org.tryAgain")}
         </button>
       </div>
     </div>
@@ -136,6 +139,7 @@ function CreateOrgPane({
   description: string;
   className?: string;
 }) {
+  const t = useT();
   const createOrg = useCreateOrg();
   const acceptInvitation = useAcceptInvitation();
   const joinByDomain = useJoinByDomain();
@@ -169,8 +173,8 @@ function CreateOrgPane({
           <div className="mb-4">
             <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
               {domainMatches.length === 1
-                ? "Your organization"
-                : "Join your team"}
+                ? t("org.yourOrganization")
+                : t("org.joinYourTeam")}
             </div>
             <ul className="space-y-2">
               {domainMatches.map((match) => (
@@ -184,7 +188,7 @@ function CreateOrgPane({
                       {match.orgName}
                     </div>
                     <div className="truncate text-xs text-muted-foreground">
-                      Open to @{userDomain} emails
+                      {t("org.openToDomainEmails", { domain: userDomain })}
                     </div>
                   </div>
                   <button
@@ -196,7 +200,7 @@ function CreateOrgPane({
                     {joinByDomain.isPending ? (
                       <IconLoader2 className="h-3 w-3 animate-spin" />
                     ) : (
-                      `Join ${match.orgName}`
+                      t("org.joinOrg", { name: match.orgName })
                     )}
                   </button>
                 </li>
@@ -208,7 +212,7 @@ function CreateOrgPane({
         {hasInvites && (
           <div className="mb-4">
             <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
-              Pending invitations
+              {t("org.pendingInvitations")}
             </div>
             <ul className="space-y-2">
               {pendingInvitations.map((inv) => (
@@ -222,7 +226,7 @@ function CreateOrgPane({
                       {inv.orgName}
                     </div>
                     <div className="truncate text-xs text-muted-foreground">
-                      from {inv.invitedBy}
+                      {t("org.invitedBy", { name: inv.invitedBy })}
                     </div>
                   </div>
                   <button
@@ -234,7 +238,7 @@ function CreateOrgPane({
                     {acceptInvitation.isPending ? (
                       <IconLoader2 className="h-3 w-3 animate-spin" />
                     ) : (
-                      "Accept"
+                      t("org.accept")
                     )}
                   </button>
                 </li>
@@ -251,7 +255,7 @@ function CreateOrgPane({
           >
             <div className="h-px flex-1 bg-border" />
             <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
-              or create a separate organization
+              {t("org.createSeparate")}
             </span>
             <div className="h-px flex-1 bg-border" />
           </button>
@@ -273,13 +277,13 @@ function CreateOrgPane({
           >
             <label className="block">
               <span className="mb-1 block text-xs font-medium text-foreground">
-                Organization name
+                {t("org.organizationName")}
               </span>
               <input
                 autoFocus={!hasDomainMatches && !hasInvites}
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                placeholder="Acme Inc."
+                placeholder={t("org.organizationPlaceholder")}
                 disabled={busy}
                 className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
               />
@@ -308,7 +312,9 @@ function CreateOrgPane({
                   : "w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
               }
             >
-              {createOrg.isPending ? "Creating…" : "Create organization"}
+              {createOrg.isPending
+                ? t("org.creating")
+                : t("org.createOrganization")}
             </button>
           </form>
         )}