feat(web): add agent detail scaffold

2026-05-27 20:36:18 +08:00 · 2026-05-27 14:54:48 +08:00
parent bcc4b208c7
commit 169293c8da
40 changed files with 781 additions and 36 deletions
--- a/web/app/(commonLayout)/roster/[agentId]/access/page.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/access/page.tsx
@ -0,0 +1,5 @@
+import { AgentDetailPage } from '@/features/agent-v2/pages/agent-detail-page'
+
+export default function Page() {
+  return <AgentDetailPage section="access" />
+}
--- a/web/app/(commonLayout)/roster/[agentId]/annotation/page.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/annotation/page.tsx
@ -0,0 +1,5 @@
+import { AgentDetailPage } from '@/features/agent-v2/pages/agent-detail-page'
+
+export default function Page() {
+  return <AgentDetailPage section="annotation" />
+}
--- a/web/app/(commonLayout)/roster/[agentId]/configure/page.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/configure/page.tsx
@ -0,0 +1,5 @@
+import { AgentDetailPage } from '@/features/agent-v2/pages/agent-detail-page'
+
+export default function Page() {
+  return <AgentDetailPage section="configure" />
+}
--- a/web/app/(commonLayout)/roster/[agentId]/layout.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/layout.tsx
@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { AgentDetailLayout } from '@/features/agent-v2/layouts/agent-detail-layout'
+
+type LayoutProps = {
+  children: ReactNode
+  params: Promise<{ agentId: string }>
+}
+
+export default async function Layout({
+  children,
+  params,
+}: LayoutProps) {
+  const { agentId } = await params
+
+  return (
+    <AgentDetailLayout agentId={agentId}>
+      {children}
+    </AgentDetailLayout>
+  )
+}
--- a/web/app/(commonLayout)/roster/[agentId]/logs/page.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/logs/page.tsx
@ -0,0 +1,5 @@
+import { AgentDetailPage } from '@/features/agent-v2/pages/agent-detail-page'
+
+export default function Page() {
+  return <AgentDetailPage section="logs" />
+}
--- a/web/app/(commonLayout)/roster/[agentId]/monitoring/page.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/monitoring/page.tsx
@ -0,0 +1,5 @@
+import { AgentDetailPage } from '@/features/agent-v2/pages/agent-detail-page'
+
+export default function Page() {
+  return <AgentDetailPage section="monitoring" />
+}
--- a/web/app/(commonLayout)/roster/[agentId]/page.tsx
+++ b/web/app/(commonLayout)/roster/[agentId]/page.tsx
@ -0,0 +1,13 @@
+import { redirect } from '@/next/navigation'
+
+type PageProps = {
+  params: Promise<{ agentId: string }>
+}
+
+export default async function Page({
+  params,
+}: PageProps) {
+  const { agentId } = await params
+
+  redirect(`/roster/${agentId}/configure`)
+}
--- a/web/app/(commonLayout)/roster/page.tsx
+++ b/web/app/(commonLayout)/roster/page.tsx
@ -1,4 +1,4 @@
-import RosterPage from '@/features/agent-v2/roster-page'
+import RosterPage from '@/features/agent-v2/pages/roster-page'

 export default function Page() {
  return <RosterPage />
--- a/web/app/components/main-nav/tests/index.spec.tsx
+++ b/web/app/components/main-nav/tests/index.spec.tsx
@ -91,6 +91,11 @@ vi.mock('@/app/components/app-sidebar/dataset-detail-top', () => ({
  default: () => <div data-testid="dataset-detail-top" />,
 }))

+vi.mock('@/features/agent-v2/navigation/agent-detail-navigation', () => ({
+  AgentDetailSection: () => <div data-testid="agent-detail-section" />,
+  AgentDetailTop: () => <div data-testid="agent-detail-top" />,
+}))
+
 vi.mock('@/context/i18n', () => ({
  useLocale: () => 'en-US',
  useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
@ -361,6 +366,18 @@ describe('MainNav', () => {
    expect(screen.queryByRole('link', { name: /common.menus.datasets/ })).not.toBeInTheDocument()
  })

+  it('replaces global navigation with agent detail navigation on roster detail routes', () => {
+    mockPathname = '/roster/agent-1/configure'
+
+    renderMainNav()
+
+    expect(screen.getByTestId('agent-detail-top')).toBeInTheDocument()
+    expect(screen.getByTestId('agent-detail-section')).toBeInTheDocument()
+    expect(screen.getByRole('complementary')).toHaveClass('bg-components-panel-bg-blur')
+    expect(screen.queryByRole('button', { name: 'common.mainNav.workspace.openMenu' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /common.menus.roster/ })).not.toBeInTheDocument()
+  })
+
  it.each([
    '/datasets/create',
    '/datasets/create-from-pipeline',
--- a/web/app/components/main-nav/index.tsx
+++ b/web/app/components/main-nav/index.tsx
@ -13,6 +13,7 @@ import DifyLogo from '@/app/components/base/logo/dify-logo'
 import EnvNav from '@/app/components/header/env-nav'
 import { buildIntegrationPath } from '@/app/components/tools/integration-routes'
 import { useAppContext } from '@/context/app-context'
+import { AgentDetailSection, AgentDetailTop } from '@/features/agent-v2/navigation/agent-detail-navigation'
 import Link from '@/next/link'
 import { usePathname } from '@/next/navigation'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
@ -41,6 +42,12 @@ const isDatasetDetailPathname = (pathname: string) => {
  return true
 }

+const isAgentDetailPathname = (pathname: string) => {
+  const [section, agentId] = pathname.split('/').filter(Boolean)
+
+  return section === 'roster' && !!agentId
+}
+
 const MainNav = ({
  className,
 }: MainNavProps) => {
@ -51,7 +58,8 @@ const MainNav = ({
  const showEnvTag = langGeniusVersionInfo.current_env === 'TESTING' || langGeniusVersionInfo.current_env === 'DEVELOPMENT'
  const showAppDetailNavigation = !isCurrentWorkspaceDatasetOperator && pathname.startsWith('/app/')
  const showDatasetDetailNavigation = isDatasetDetailPathname(pathname)
-  const showDetailNavigation = showAppDetailNavigation || showDatasetDetailNavigation
+  const showAgentDetailNavigation = !isCurrentWorkspaceDatasetOperator && isAgentDetailPathname(pathname)
+  const showDetailNavigation = showAppDetailNavigation || showDatasetDetailNavigation || showAgentDetailNavigation
  const navItems = useMemo<MainNavItem[]>(() => [
    ...(!isCurrentWorkspaceDatasetOperator
      ? [
@ -136,7 +144,7 @@ const MainNav = ({
    >
      <div className="flex min-h-0 flex-1 flex-col">
        {showDetailNavigation
-          ? showAppDetailNavigation ? <AppDetailTop /> : <DatasetDetailTop />
+          ? showAppDetailNavigation ? <AppDetailTop /> : showAgentDetailNavigation ? <AgentDetailTop /> : <DatasetDetailTop />
          : (
              <>
                <div className="flex items-center justify-between px-2 pt-4 pb-2">
@ -149,7 +157,7 @@ const MainNav = ({
              </>
            )}
        {showDetailNavigation
-          ? showAppDetailNavigation ? <AppDetailSection /> : <DatasetDetailSection />
+          ? showAppDetailNavigation ? <AppDetailSection /> : showAgentDetailNavigation ? <AgentDetailSection /> : <DatasetDetailSection />
          : (
              <>
                <nav className="space-y-1 p-2">
--- a/web/features/agent-v2/tests/agent-detail-layout.spec.tsx
+++ b/web/features/agent-v2/tests/agent-detail-layout.spec.tsx
@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { AgentDetailLayout } from '../layouts/agent-detail-layout'
+
+vi.mock('@/hooks/use-document-title', () => ({
+  default: vi.fn(),
+}))
+
+describe('AgentDetailLayout', () => {
+  it('renders the detail shell without feature data', () => {
+    render(
+      <AgentDetailLayout agentId="agent-1">
+        <section aria-label="content" />
+      </AgentDetailLayout>,
+    )
+
+    expect(screen.getByRole('heading', { name: 'agentV2.agentDetail.title' })).toBeInTheDocument()
+    expect(screen.getByText(/agentV2\.agentDetail\.subtitle/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'agentV2.agentDetail.publish' })).toBeDisabled()
+    expect(screen.getByLabelText('content')).toBeInTheDocument()
+  })
+})
--- a/web/features/agent-v2/tests/agent-detail-navigation.spec.tsx
+++ b/web/features/agent-v2/tests/agent-detail-navigation.spec.tsx
@ -0,0 +1,41 @@
+import type { Mock } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { usePathname, useRouter } from '@/next/navigation'
+import { AgentDetailSection, AgentDetailTop } from '../navigation/agent-detail-navigation'
+
+vi.mock('@/next/navigation', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/next/navigation')>()
+  return {
+    ...actual,
+    usePathname: vi.fn(),
+    useRouter: vi.fn(),
+  }
+})
+
+describe('Agent detail navigation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(useRouter as Mock).mockReturnValue({ back: vi.fn() })
+  })
+
+  it('renders roster breadcrumb controls', () => {
+    render(<AgentDetailTop />)
+
+    expect(screen.getByRole('link', { name: 'common.mainNav.home' })).toHaveAttribute('href', '/')
+    expect(screen.getByRole('link', { name: 'common.menus.roster' })).toHaveAttribute('href', '/roster')
+    expect(screen.getByRole('button', { name: 'app.gotoAnything.searchTitle' })).toBeInTheDocument()
+  })
+
+  it('renders agent detail tabs from the route agent id', () => {
+    ;(usePathname as Mock).mockReturnValue('/roster/agent-1/logs')
+
+    render(<AgentDetailSection />)
+
+    expect(screen.getByRole('navigation', { name: 'agentV2.agentDetail.navigationLabel' })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'agentV2.agentDetail.sections.configure' })).toHaveAttribute('href', '/roster/agent-1/configure')
+    expect(screen.getByRole('link', { name: 'agentV2.agentDetail.sections.access' })).toHaveAttribute('href', '/roster/agent-1/access')
+    expect(screen.getByRole('link', { name: 'agentV2.agentDetail.sections.logs' })).toHaveAttribute('href', '/roster/agent-1/logs')
+    expect(screen.getByRole('link', { name: 'agentV2.agentDetail.sections.annotation' })).toHaveAttribute('href', '/roster/agent-1/annotation')
+    expect(screen.getByRole('link', { name: 'agentV2.agentDetail.sections.monitoring' })).toHaveAttribute('href', '/roster/agent-1/monitoring')
+  })
+})
--- a/web/features/agent-v2/tests/roster-page.spec.tsx
+++ b/web/features/agent-v2/tests/roster-page.spec.tsx
@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import RosterPage from '../roster-page'
+import RosterPage from '../pages/roster-page'

 vi.mock('@/hooks/use-document-title', () => ({
  default: vi.fn(),
@ -15,5 +15,6 @@ describe('RosterPage', () => {
    expect(screen.getByPlaceholderText('agentV2.roster.searchPlaceholder')).toBeInTheDocument()
    expect(screen.getByText('Iris - Clarification Drafter')).toBeInTheDocument()
    expect(screen.getByText('Aiko - Document Translator')).toBeInTheDocument()
+    expect(screen.getAllByRole('link', { name: /agentV2\.roster\.editAgent/ })[0]).toHaveAttribute('href', '/roster/iris/configure')
  })
 })
--- a/web/features/agent-v2/layouts/agent-detail-layout.tsx
+++ b/web/features/agent-v2/layouts/agent-detail-layout.tsx
@ -0,0 +1,52 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { useTranslation } from 'react-i18next'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+type AgentDetailLayoutProps = {
+  agentId: string
+  children: ReactNode
+}
+
+export function AgentDetailLayout({
+  agentId,
+  children,
+}: AgentDetailLayoutProps) {
+  const { t } = useTranslation('agentV2')
+
+  useDocumentTitle(t('agentDetail.documentTitle'))
+
+  return (
+    <main className="flex h-full min-w-0 flex-col overflow-hidden bg-background-section">
+      <header className="flex h-20 shrink-0 items-center justify-between border-b border-divider-subtle bg-background-body px-6">
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-text-accent text-text-primary-on-surface shadow-xs">
+            <span aria-hidden className="i-custom-vender-solid-mediaAndDevices-robot size-5" />
+          </div>
+          <div className="min-w-0">
+            <h1 className="truncate title-xl-semi-bold text-text-primary">
+              {t('agentDetail.title')}
+            </h1>
+            <p className="mt-1 truncate system-xs-regular text-text-tertiary">
+              {t('agentDetail.subtitle', { agentId })}
+            </p>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="primary" className="gap-1.5" disabled>
+            {t('agentDetail.publish')}
+            <span aria-hidden className="i-ri-arrow-down-s-line size-4" />
+          </Button>
+          <Button className="px-2.5" aria-label={t('agentDetail.history')}>
+            <span aria-hidden className="i-ri-history-line size-4" />
+          </Button>
+        </div>
+      </header>
+      <div className="min-h-0 min-w-0 flex-1 overflow-auto">
+        {children}
+      </div>
+    </main>
+  )
+}
--- a/web/features/agent-v2/navigation/agent-detail-navigation.tsx
+++ b/web/features/agent-v2/navigation/agent-detail-navigation.tsx
@ -0,0 +1,162 @@
+'use client'
+
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import { GOTO_ANYTHING_OPEN_EVENT } from '@/app/components/goto-anything/hooks'
+import Link from '@/next/link'
+import { usePathname, useRouter } from '@/next/navigation'
+
+type AgentDetailNavItem = {
+  labelKey: string
+  href: string
+  icon: string
+  activeIcon: string
+}
+
+const getAgentIdFromPathname = (pathname: string) => {
+  const [section, agentId] = pathname.split('/').filter(Boolean)
+
+  if (section !== 'roster')
+    return undefined
+
+  return agentId
+}
+
+const getAgentDetailNavigation = (agentId: string): AgentDetailNavItem[] => [
+  {
+    labelKey: 'agentDetail.sections.configure',
+    href: `/roster/${agentId}/configure`,
+    icon: 'i-ri-node-tree',
+    activeIcon: 'i-ri-node-tree',
+  },
+  {
+    labelKey: 'agentDetail.sections.access',
+    href: `/roster/${agentId}/access`,
+    icon: 'i-ri-share-forward-line',
+    activeIcon: 'i-ri-share-forward-fill',
+  },
+  {
+    labelKey: 'agentDetail.sections.logs',
+    href: `/roster/${agentId}/logs`,
+    icon: 'i-ri-list-check-2',
+    activeIcon: 'i-ri-list-check-2',
+  },
+  {
+    labelKey: 'agentDetail.sections.annotation',
+    href: `/roster/${agentId}/annotation`,
+    icon: 'i-ri-chat-quote-line',
+    activeIcon: 'i-ri-chat-quote-fill',
+  },
+  {
+    labelKey: 'agentDetail.sections.monitoring',
+    href: `/roster/${agentId}/monitoring`,
+    icon: 'i-ri-pulse-line',
+    activeIcon: 'i-ri-pulse-fill',
+  },
+]
+
+export function AgentDetailTop() {
+  const { t } = useTranslation()
+  const router = useRouter()
+
+  return (
+    <div className="flex items-center py-3 pr-3 pl-1">
+      <div className="flex min-w-0 flex-1 items-center gap-1.5">
+        <div className="flex shrink-0 items-center py-1 pr-1 pl-0.5">
+          <button
+            type="button"
+            aria-label={t('operation.back', { ns: 'common' })}
+            className="flex size-4 items-center justify-center rounded-sm text-text-tertiary hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
+            onClick={() => router.back()}
+          >
+            <span aria-hidden className="i-ri-arrow-left-s-line size-4" />
+          </button>
+          <Link
+            href="/"
+            aria-label={t('mainNav.home', { ns: 'common' })}
+            className="flex size-4 items-center justify-center rounded-sm text-text-tertiary hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
+          >
+            <span aria-hidden className="i-custom-vender-main-nav-app-home size-4" />
+          </Link>
+        </div>
+        <span className="mx-1.5 shrink-0 system-md-regular text-text-quaternary">
+          /
+        </span>
+        <Link href="/roster" className="shrink-0 truncate rounded-sm system-sm-semibold-uppercase text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden">
+          {t('menus.roster', { ns: 'common' })}
+        </Link>
+      </div>
+      <button
+        type="button"
+        aria-label={t('gotoAnything.searchTitle', { ns: 'app' })}
+        className="flex shrink-0 items-center gap-1 overflow-hidden rounded-[10px] p-1 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
+        onClick={() => window.dispatchEvent(new Event(GOTO_ANYTHING_OPEN_EVENT))}
+      >
+        <span aria-hidden className="i-custom-vender-main-nav-quick-search size-4" />
+        <span className="rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary">
+          ⌘K
+        </span>
+      </button>
+    </div>
+  )
+}
+
+export function AgentDetailSection() {
+  const { t } = useTranslation('agentV2')
+  const pathname = usePathname()
+  const agentId = getAgentIdFromPathname(pathname)
+
+  if (!agentId)
+    return null
+
+  const navigation = getAgentDetailNavigation(agentId)
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col px-2 pb-2">
+      <div className="py-2">
+        <div className="flex items-center rounded-xl p-2">
+          <div className="mr-2 flex size-8 shrink-0 items-center justify-center rounded-lg bg-text-accent text-text-primary-on-surface shadow-xs">
+            <span aria-hidden className="i-custom-vender-solid-mediaAndDevices-robot size-4" />
+          </div>
+          <div className="min-w-0">
+            <div className="truncate system-md-semibold text-text-secondary">
+              {t('agentDetail.title')}
+            </div>
+            <div className="system-2xs-medium-uppercase text-text-tertiary">
+              {t('agentDetail.type')}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="px-2 py-2">
+        <div className="h-px bg-linear-to-r from-divider-subtle to-background-gradient-mask-transparent" />
+      </div>
+      <nav className="flex flex-col gap-y-0.5 px-1 py-2" aria-label={t('agentDetail.navigationLabel')}>
+        {navigation.map((item) => {
+          const isActive = pathname === item.href
+          const icon = isActive ? item.activeIcon : item.icon
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={isActive ? 'page' : undefined}
+              className={cn(
+                'flex h-8 items-center rounded-lg pr-1 pl-3',
+                isActive
+                  ? 'border-t-[0.75px] border-r-[0.25px] border-b-[0.25px] border-l-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active system-sm-semibold text-text-accent-light-mode-only'
+                  : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
+                'focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
+              )}
+            >
+              <span aria-hidden className={`${icon} size-4 shrink-0`} />
+              <span className="ml-2 overflow-hidden whitespace-nowrap">
+                {t(item.labelKey)}
+              </span>
+            </Link>
+          )
+        })}
+      </nav>
+    </div>
+  )
+}
--- a/web/features/agent-v2/pages/agent-detail-page.tsx
+++ b/web/features/agent-v2/pages/agent-detail-page.tsx
@ -0,0 +1,20 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+type AgentDetailPageProps = {
+  section: 'configure' | 'access' | 'logs' | 'annotation' | 'monitoring'
+}
+
+export function AgentDetailPage({
+  section,
+}: AgentDetailPageProps) {
+  const { t } = useTranslation('agentV2')
+
+  return (
+    <section
+      aria-label={t(`agentDetail.sections.${section}`)}
+      className="h-full min-w-0 flex-1 bg-background-section"
+    />
+  )
+}
--- a/web/features/agent-v2/pages/roster-page.tsx
+++ b/web/features/agent-v2/pages/roster-page.tsx
@ -1,8 +1,10 @@
 'use client'

 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import useDocumentTitle from '@/hooks/use-document-title'
+import Link from '@/next/link'

 const rosterItems = [
  {
@ -89,7 +91,7 @@ export default function RosterPage() {
                type="button"
                aria-current={active ? 'page' : undefined}
                className={[
-                  'flex h-11 w-full items-center gap-2 rounded-xl px-3 text-left transition-colors',
+                  'flex h-11 w-full items-center gap-2 rounded-xl px-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
                  active
                    ? 'bg-state-accent-hover text-text-accent'
                    : 'text-text-secondary hover:bg-state-base-hover',
@ -130,7 +132,7 @@ export default function RosterPage() {
              href="https://docs.dify.ai/"
              target="_blank"
              rel="noreferrer"
-              className="inline-flex items-center gap-1 system-xs-semibold text-text-accent hover:underline"
+              className="inline-flex items-center gap-1 rounded-md system-xs-semibold text-text-accent hover:underline focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
            >
              {tAgentV2('roster.learnMore')}
              <span aria-hidden className="i-ri-arrow-right-up-line size-3" />
@ -146,8 +148,11 @@ export default function RosterPage() {
            <span className="sr-only">{tAgentV2('roster.searchLabel')}</span>
            <span aria-hidden className="pointer-events-none absolute top-1/2 left-3 i-ri-search-line size-4 -translate-y-1/2 text-text-tertiary" />
            <input
+              type="search"
+              name="agent-search"
+              autoComplete="off"
              readOnly
-              className="h-9 w-full rounded-lg border border-components-panel-border bg-components-input-bg-normal pr-3 pl-9 system-sm-regular text-text-secondary outline-hidden"
+              className="h-9 w-full rounded-lg border border-components-panel-border bg-components-input-bg-normal pr-3 pl-9 system-sm-regular text-text-secondary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
              placeholder={tAgentV2('roster.searchPlaceholder')}
            />
          </label>
@ -156,8 +161,9 @@ export default function RosterPage() {
              <button
                key={filter}
                type="button"
+                aria-pressed={index === 0}
                className={[
-                  'h-8 rounded-md px-3 system-sm-semibold transition-colors',
+                  'h-8 rounded-md px-3 system-sm-semibold transition-colors focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
                  index === 0
                    ? 'bg-state-base-hover text-text-secondary shadow-xs'
                    : 'text-text-tertiary hover:text-text-secondary',
@ -238,15 +244,29 @@ export default function RosterPage() {
                <div>{tAgentV2('roster.updated', { time: item.updatedAt })}</div>
              </div>
              <div className="flex shrink-0 items-center gap-2">
-                <Button size="small" className="gap-1" disabled>
+                <Link
+                  href={`/roster/${item.id}/configure`}
+                  aria-label={tAgentV2('roster.editAgent', { name: item.name })}
+                  className={cn(
+                    'inline-flex h-6 items-center justify-center gap-1 rounded-md border border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-xs font-medium text-components-button-secondary-text shadow-xs backdrop-blur-[5px]',
+                    'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
+                    'focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
+                  )}
+                >
                  <span aria-hidden className="i-ri-edit-line size-3.5" />
                  {t('operation.edit', { ns: 'common' })}
-                </Button>
-                <Button size="small" variant="secondary-accent" className="gap-1" disabled>
+                </Link>
+                <Button
+                  size="small"
+                  variant="secondary-accent"
+                  className="gap-1"
+                  aria-label={tAgentV2('roster.inviteAgent', { name: item.name })}
+                  disabled
+                >
                  <span aria-hidden className="i-ri-add-circle-fill size-3.5" />
                  {tAgentV2('roster.invite')}
                </Button>
-                <Button size="small" className="px-1.5" aria-label={t('operation.more', { ns: 'common' })}>
+                <Button size="small" className="px-1.5" aria-label={tAgentV2('roster.moreActions', { name: item.name })}>
                  <span aria-hidden className="i-ri-more-fill size-4" />
                </Button>
              </div>
--- a/web/i18n/ar-TN/agent-v-2.json
+++ b/web/i18n/ar-TN/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "الوكيل",
+  "agentDetail.history": "السجل",
+  "agentDetail.navigationLabel": "تنقل الوكيل",
+  "agentDetail.publish": "نشر",
+  "agentDetail.sections.access": "الوصول والمشاركة",
+  "agentDetail.sections.annotation": "التعليقات التوضيحية",
+  "agentDetail.sections.configure": "الإعداد",
+  "agentDetail.sections.logs": "السجلات",
+  "agentDetail.sections.monitoring": "المراقبة",
+  "agentDetail.subtitle": "معرف الوكيل: {{agentId}}",
+  "agentDetail.title": "الوكيل",
+  "agentDetail.type": "وكيل",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "تعديل {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "دعوة {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "إجراءات إضافية لـ {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/de-DE/agent-v-2.json
+++ b/web/i18n/de-DE/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "Verlauf",
+  "agentDetail.navigationLabel": "Agent-Navigation",
+  "agentDetail.publish": "Veröffentlichen",
+  "agentDetail.sections.access": "Zugriff & Freigabe",
+  "agentDetail.sections.annotation": "Annotation",
+  "agentDetail.sections.configure": "Konfigurieren",
+  "agentDetail.sections.logs": "Logs",
+  "agentDetail.sections.monitoring": "Monitoring",
+  "agentDetail.subtitle": "Agent-ID: {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "{{name}} bearbeiten",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "{{name}} einladen",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Weitere Aktionen für {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/en-US/agent-v-2.json
+++ b/web/i18n/en-US/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "History",
+  "agentDetail.navigationLabel": "Agent navigation",
+  "agentDetail.publish": "Publish",
+  "agentDetail.sections.access": "Access & Sharing",
+  "agentDetail.sections.annotation": "Annotation",
+  "agentDetail.sections.configure": "Configure",
+  "agentDetail.sections.logs": "Logs",
+  "agentDetail.sections.monitoring": "Monitoring",
+  "agentDetail.subtitle": "Agent ID: {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Edit {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Invite {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "More actions for {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/es-ES/agent-v-2.json
+++ b/web/i18n/es-ES/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agente",
+  "agentDetail.history": "Historial",
+  "agentDetail.navigationLabel": "Navegación del agente",
+  "agentDetail.publish": "Publicar",
+  "agentDetail.sections.access": "Acceso y uso compartido",
+  "agentDetail.sections.annotation": "Anotación",
+  "agentDetail.sections.configure": "Configurar",
+  "agentDetail.sections.logs": "Registros",
+  "agentDetail.sections.monitoring": "Supervisión",
+  "agentDetail.subtitle": "ID del agente: {{agentId}}",
+  "agentDetail.title": "Agente",
+  "agentDetail.type": "AGENTE",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Editar {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Invitar a {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Más acciones para {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/fa-IR/agent-v-2.json
+++ b/web/i18n/fa-IR/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "عامل",
+  "agentDetail.history": "تاریخچه",
+  "agentDetail.navigationLabel": "ناوبری عامل",
+  "agentDetail.publish": "انتشار",
+  "agentDetail.sections.access": "دسترسی و اشتراک‌گذاری",
+  "agentDetail.sections.annotation": "حاشیه‌نویسی",
+  "agentDetail.sections.configure": "پیکربندی",
+  "agentDetail.sections.logs": "گزارش‌ها",
+  "agentDetail.sections.monitoring": "پایش",
+  "agentDetail.subtitle": "شناسه عامل: {{agentId}}",
+  "agentDetail.title": "عامل",
+  "agentDetail.type": "عامل",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "ویرایش {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "دعوت از {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "اقدام‌های بیشتر برای {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/fr-FR/agent-v-2.json
+++ b/web/i18n/fr-FR/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "Historique",
+  "agentDetail.navigationLabel": "Navigation de l’agent",
+  "agentDetail.publish": "Publier",
+  "agentDetail.sections.access": "Accès et partage",
+  "agentDetail.sections.annotation": "Annotation",
+  "agentDetail.sections.configure": "Configurer",
+  "agentDetail.sections.logs": "Journaux",
+  "agentDetail.sections.monitoring": "Surveillance",
+  "agentDetail.subtitle": "ID de l’agent : {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Modifier {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Inviter {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Plus d’actions pour {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/hi-IN/agent-v-2.json
+++ b/web/i18n/hi-IN/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "एजेंट",
+  "agentDetail.history": "इतिहास",
+  "agentDetail.navigationLabel": "एजेंट नेविगेशन",
+  "agentDetail.publish": "प्रकाशित करें",
+  "agentDetail.sections.access": "एक्सेस और शेयरिंग",
+  "agentDetail.sections.annotation": "एनोटेशन",
+  "agentDetail.sections.configure": "कॉन्फ़िगर करें",
+  "agentDetail.sections.logs": "लॉग्स",
+  "agentDetail.sections.monitoring": "मॉनिटरिंग",
+  "agentDetail.subtitle": "एजेंट आईडी: {{agentId}}",
+  "agentDetail.title": "एजेंट",
+  "agentDetail.type": "एजेंट",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "{{name}} संपादित करें",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "{{name}} को आमंत्रित करें",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "{{name}} के लिए और कार्रवाइयां",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/id-ID/agent-v-2.json
+++ b/web/i18n/id-ID/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agen",
+  "agentDetail.history": "Riwayat",
+  "agentDetail.navigationLabel": "Navigasi agen",
+  "agentDetail.publish": "Terbitkan",
+  "agentDetail.sections.access": "Akses & Berbagi",
+  "agentDetail.sections.annotation": "Anotasi",
+  "agentDetail.sections.configure": "Konfigurasi",
+  "agentDetail.sections.logs": "Log",
+  "agentDetail.sections.monitoring": "Pemantauan",
+  "agentDetail.subtitle": "ID agen: {{agentId}}",
+  "agentDetail.title": "Agen",
+  "agentDetail.type": "AGEN",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Edit {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Undang {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Tindakan lainnya untuk {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/it-IT/agent-v-2.json
+++ b/web/i18n/it-IT/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agente",
+  "agentDetail.history": "Cronologia",
+  "agentDetail.navigationLabel": "Navigazione agente",
+  "agentDetail.publish": "Pubblica",
+  "agentDetail.sections.access": "Accesso e condivisione",
+  "agentDetail.sections.annotation": "Annotazione",
+  "agentDetail.sections.configure": "Configura",
+  "agentDetail.sections.logs": "Log",
+  "agentDetail.sections.monitoring": "Monitoraggio",
+  "agentDetail.subtitle": "ID agente: {{agentId}}",
+  "agentDetail.title": "Agente",
+  "agentDetail.type": "AGENTE",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Modifica {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Invita {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Altre azioni per {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/ja-JP/agent-v-2.json
+++ b/web/i18n/ja-JP/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "エージェント",
+  "agentDetail.history": "履歴",
+  "agentDetail.navigationLabel": "エージェントナビゲーション",
+  "agentDetail.publish": "公開",
+  "agentDetail.sections.access": "アクセスと共有",
+  "agentDetail.sections.annotation": "アノテーション",
+  "agentDetail.sections.configure": "設定",
+  "agentDetail.sections.logs": "ログ",
+  "agentDetail.sections.monitoring": "モニタリング",
+  "agentDetail.subtitle": "エージェントID: {{agentId}}",
+  "agentDetail.title": "エージェント",
+  "agentDetail.type": "エージェント",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "{{name}}を編集",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "{{name}}を招待",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "{{name}}のその他の操作",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/ko-KR/agent-v-2.json
+++ b/web/i18n/ko-KR/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "에이전트",
+  "agentDetail.history": "기록",
+  "agentDetail.navigationLabel": "에이전트 탐색",
+  "agentDetail.publish": "게시",
+  "agentDetail.sections.access": "액세스 및 공유",
+  "agentDetail.sections.annotation": "주석",
+  "agentDetail.sections.configure": "구성",
+  "agentDetail.sections.logs": "로그",
+  "agentDetail.sections.monitoring": "모니터링",
+  "agentDetail.subtitle": "에이전트 ID: {{agentId}}",
+  "agentDetail.title": "에이전트",
+  "agentDetail.type": "에이전트",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "{{name}} 편집",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "{{name}} 초대",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "{{name}}에 대한 추가 작업",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/nl-NL/agent-v-2.json
+++ b/web/i18n/nl-NL/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "Geschiedenis",
+  "agentDetail.navigationLabel": "Agentnavigatie",
+  "agentDetail.publish": "Publiceren",
+  "agentDetail.sections.access": "Toegang en delen",
+  "agentDetail.sections.annotation": "Annotatie",
+  "agentDetail.sections.configure": "Configureren",
+  "agentDetail.sections.logs": "Logs",
+  "agentDetail.sections.monitoring": "Monitoring",
+  "agentDetail.subtitle": "Agent-ID: {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "{{name}} bewerken",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "{{name}} uitnodigen",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Meer acties voor {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/pl-PL/agent-v-2.json
+++ b/web/i18n/pl-PL/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "Historia",
+  "agentDetail.navigationLabel": "Nawigacja agenta",
+  "agentDetail.publish": "Opublikuj",
+  "agentDetail.sections.access": "Dostęp i udostępnianie",
+  "agentDetail.sections.annotation": "Adnotacja",
+  "agentDetail.sections.configure": "Konfiguracja",
+  "agentDetail.sections.logs": "Logi",
+  "agentDetail.sections.monitoring": "Monitorowanie",
+  "agentDetail.subtitle": "ID agenta: {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Edytuj {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Zaproś {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Więcej akcji dla {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/pt-BR/agent-v-2.json
+++ b/web/i18n/pt-BR/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agente",
+  "agentDetail.history": "Histórico",
+  "agentDetail.navigationLabel": "Navegação do agente",
+  "agentDetail.publish": "Publicar",
+  "agentDetail.sections.access": "Acesso e compartilhamento",
+  "agentDetail.sections.annotation": "Anotação",
+  "agentDetail.sections.configure": "Configurar",
+  "agentDetail.sections.logs": "Logs",
+  "agentDetail.sections.monitoring": "Monitoramento",
+  "agentDetail.subtitle": "ID do agente: {{agentId}}",
+  "agentDetail.title": "Agente",
+  "agentDetail.type": "AGENTE",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Editar {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Convidar {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Mais ações para {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/ro-RO/agent-v-2.json
+++ b/web/i18n/ro-RO/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "Istoric",
+  "agentDetail.navigationLabel": "Navigarea agentului",
+  "agentDetail.publish": "Publică",
+  "agentDetail.sections.access": "Acces și partajare",
+  "agentDetail.sections.annotation": "Adnotare",
+  "agentDetail.sections.configure": "Configurare",
+  "agentDetail.sections.logs": "Jurnale",
+  "agentDetail.sections.monitoring": "Monitorizare",
+  "agentDetail.subtitle": "ID agent: {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Editează {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Invită {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Mai multe acțiuni pentru {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/ru-RU/agent-v-2.json
+++ b/web/i18n/ru-RU/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Агент",
+  "agentDetail.history": "История",
+  "agentDetail.navigationLabel": "Навигация агента",
+  "agentDetail.publish": "Опубликовать",
+  "agentDetail.sections.access": "Доступ и совместное использование",
+  "agentDetail.sections.annotation": "Аннотация",
+  "agentDetail.sections.configure": "Настроить",
+  "agentDetail.sections.logs": "Журналы",
+  "agentDetail.sections.monitoring": "Мониторинг",
+  "agentDetail.subtitle": "ID агента: {{agentId}}",
+  "agentDetail.title": "Агент",
+  "agentDetail.type": "АГЕНТ",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Редактировать {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Пригласить {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Дополнительные действия для {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/sl-SI/agent-v-2.json
+++ b/web/i18n/sl-SI/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Agent",
+  "agentDetail.history": "Zgodovina",
+  "agentDetail.navigationLabel": "Navigacija agenta",
+  "agentDetail.publish": "Objavi",
+  "agentDetail.sections.access": "Dostop in deljenje",
+  "agentDetail.sections.annotation": "Opomba",
+  "agentDetail.sections.configure": "Konfiguracija",
+  "agentDetail.sections.logs": "Dnevniki",
+  "agentDetail.sections.monitoring": "Spremljanje",
+  "agentDetail.subtitle": "ID agenta: {{agentId}}",
+  "agentDetail.title": "Agent",
+  "agentDetail.type": "AGENT",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Uredi {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Povabi {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Več dejanj za {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/th-TH/agent-v-2.json
+++ b/web/i18n/th-TH/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "เอเจนต์",
+  "agentDetail.history": "ประวัติ",
+  "agentDetail.navigationLabel": "การนำทางเอเจนต์",
+  "agentDetail.publish": "เผยแพร่",
+  "agentDetail.sections.access": "การเข้าถึงและการแชร์",
+  "agentDetail.sections.annotation": "คำอธิบายประกอบ",
+  "agentDetail.sections.configure": "กำหนดค่า",
+  "agentDetail.sections.logs": "บันทึก",
+  "agentDetail.sections.monitoring": "การตรวจสอบ",
+  "agentDetail.subtitle": "รหัสเอเจนต์: {{agentId}}",
+  "agentDetail.title": "เอเจนต์",
+  "agentDetail.type": "เอเจนต์",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "แก้ไข {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "เชิญ {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "การดำเนินการเพิ่มเติมสำหรับ {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/tr-TR/agent-v-2.json
+++ b/web/i18n/tr-TR/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Ajan",
+  "agentDetail.history": "Geçmiş",
+  "agentDetail.navigationLabel": "Ajan gezinmesi",
+  "agentDetail.publish": "Yayınla",
+  "agentDetail.sections.access": "Erişim ve paylaşım",
+  "agentDetail.sections.annotation": "Ek açıklama",
+  "agentDetail.sections.configure": "Yapılandır",
+  "agentDetail.sections.logs": "Günlükler",
+  "agentDetail.sections.monitoring": "İzleme",
+  "agentDetail.subtitle": "Ajan ID: {{agentId}}",
+  "agentDetail.title": "Ajan",
+  "agentDetail.type": "AJAN",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "{{name}} ögesini düzenle",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "{{name}} ögesini davet et",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "{{name}} için daha fazla işlem",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/uk-UA/agent-v-2.json
+++ b/web/i18n/uk-UA/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Агент",
+  "agentDetail.history": "Історія",
+  "agentDetail.navigationLabel": "Навігація агента",
+  "agentDetail.publish": "Опублікувати",
+  "agentDetail.sections.access": "Доступ і спільний доступ",
+  "agentDetail.sections.annotation": "Анотація",
+  "agentDetail.sections.configure": "Налаштувати",
+  "agentDetail.sections.logs": "Журнали",
+  "agentDetail.sections.monitoring": "Моніторинг",
+  "agentDetail.subtitle": "ID агента: {{agentId}}",
+  "agentDetail.title": "Агент",
+  "agentDetail.type": "АГЕНТ",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Редагувати {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Запросити {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Додаткові дії для {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/vi-VN/agent-v-2.json
+++ b/web/i18n/vi-VN/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "Tác nhân",
+  "agentDetail.history": "Lịch sử",
+  "agentDetail.navigationLabel": "Điều hướng tác nhân",
+  "agentDetail.publish": "Xuất bản",
+  "agentDetail.sections.access": "Truy cập và chia sẻ",
+  "agentDetail.sections.annotation": "Chú thích",
+  "agentDetail.sections.configure": "Cấu hình",
+  "agentDetail.sections.logs": "Nhật ký",
+  "agentDetail.sections.monitoring": "Giám sát",
+  "agentDetail.subtitle": "ID tác nhân: {{agentId}}",
+  "agentDetail.title": "Tác nhân",
+  "agentDetail.type": "TÁC NHÂN",
  "roster.connectOwnAgent": "Connect to Your Own Agent",
  "roster.createAgent": "Create agent",
  "roster.description": "Reusable agents saved to this workspace. Drag onto any canvas or attach to a workflow node. Edit once — every workflow using this agent picks up the change.",
  "roster.draft": "Draft",
+  "roster.editAgent": "Chỉnh sửa {{name}}",
  "roster.filters.all": "All 4",
  "roster.filters.drafts": "Drafts",
  "roster.filters.inUse": "In use",
  "roster.gridView": "Grid view",
  "roster.invite": "Invite",
+  "roster.inviteAgent": "Mời {{name}}",
  "roster.learnMore": "Learn more",
  "roster.listView": "List view",
  "roster.marketplaceCta": "Discover ready-made agents in Marketplace",
+  "roster.moreActions": "Thao tác khác cho {{name}}",
  "roster.searchLabel": "Search agents",
-  "roster.searchPlaceholder": "Search agents by name, role, or skill...",
+  "roster.searchPlaceholder": "Search agents by name, role, or skill…",
  "roster.sidebar.agents": "Agents",
  "roster.sidebar.humans": "Humans",
  "roster.sidebarLabel": "Roster sections",
--- a/web/i18n/zh-Hans/agent-v-2.json
+++ b/web/i18n/zh-Hans/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "智能体",
+  "agentDetail.history": "历史记录",
+  "agentDetail.navigationLabel": "智能体导航",
+  "agentDetail.publish": "发布",
+  "agentDetail.sections.access": "访问与共享",
+  "agentDetail.sections.annotation": "标注",
+  "agentDetail.sections.configure": "配置",
+  "agentDetail.sections.logs": "日志",
+  "agentDetail.sections.monitoring": "监控",
+  "agentDetail.subtitle": "智能体 ID：{{agentId}}",
+  "agentDetail.title": "智能体",
+  "agentDetail.type": "智能体",
  "roster.connectOwnAgent": "连接你自己的智能体",
  "roster.createAgent": "创建智能体",
  "roster.description": "保存在此工作区的可复用智能体。可拖到任意画布或挂到工作流节点。编辑一次，所有使用该智能体的工作流都会同步更新。",
  "roster.draft": "草稿",
+  "roster.editAgent": "编辑 {{name}}",
  "roster.filters.all": "全部 4",
  "roster.filters.drafts": "草稿",
  "roster.filters.inUse": "使用中",
  "roster.gridView": "网格视图",
  "roster.invite": "邀请",
+  "roster.inviteAgent": "邀请 {{name}}",
  "roster.learnMore": "了解更多",
  "roster.listView": "列表视图",
  "roster.marketplaceCta": "在 Marketplace 发现现成智能体",
+  "roster.moreActions": "{{name}} 的更多操作",
  "roster.searchLabel": "搜索智能体",
-  "roster.searchPlaceholder": "按名称、角色或技能搜索智能体...",
+  "roster.searchPlaceholder": "按名称、角色或技能搜索智能体…",
  "roster.sidebar.agents": "智能体",
  "roster.sidebar.humans": "成员",
  "roster.sidebarLabel": "Roster 分区",
--- a/web/i18n/zh-Hant/agent-v-2.json
+++ b/web/i18n/zh-Hant/agent-v-2.json
@ -1,18 +1,33 @@
 {
+  "agentDetail.documentTitle": "智慧體",
+  "agentDetail.history": "歷史記錄",
+  "agentDetail.navigationLabel": "智慧體導覽",
+  "agentDetail.publish": "發布",
+  "agentDetail.sections.access": "存取與分享",
+  "agentDetail.sections.annotation": "標註",
+  "agentDetail.sections.configure": "設定",
+  "agentDetail.sections.logs": "日誌",
+  "agentDetail.sections.monitoring": "監控",
+  "agentDetail.subtitle": "智慧體 ID：{{agentId}}",
+  "agentDetail.title": "智慧體",
+  "agentDetail.type": "智慧體",
  "roster.connectOwnAgent": "連接你自己的智能體",
  "roster.createAgent": "建立智能體",
  "roster.description": "儲存在此工作區的可複用智能體。可拖到任意畫布或掛到工作流節點。編輯一次，所有使用該智能體的工作流都會同步更新。",
  "roster.draft": "草稿",
+  "roster.editAgent": "編輯 {{name}}",
  "roster.filters.all": "全部 4",
  "roster.filters.drafts": "草稿",
  "roster.filters.inUse": "使用中",
  "roster.gridView": "網格視圖",
  "roster.invite": "邀請",
+  "roster.inviteAgent": "邀請 {{name}}",
  "roster.learnMore": "瞭解更多",
  "roster.listView": "列表視圖",
  "roster.marketplaceCta": "在 Marketplace 探索現成智能體",
+  "roster.moreActions": "{{name}} 的更多操作",
  "roster.searchLabel": "搜尋智能體",
-  "roster.searchPlaceholder": "按名稱、角色或技能搜尋智能體...",
+  "roster.searchPlaceholder": "按名稱、角色或技能搜尋智能體…",
  "roster.sidebar.agents": "智能體",
  "roster.sidebar.humans": "成員",
  "roster.sidebarLabel": "Roster 分區",