@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.2

package/dist/pages/TargetDetailsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TargetDetailsPage.js","names":[],"sources":["../../src/pages/TargetDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, Link } from 'react-router-dom';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n  ArrowLeft,\n  Server,\n  CircleCheck,\n  CircleX,\n  Cpu,\n  ExternalLink,\n  Activity,\n  Tag,\n} from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { PageHeader, Card, StatusBadge, EmptyState, ErrorState } from '@/components/shared';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { EntityShareButton } from '@/components/sharing';\nimport { getAgentStatus } from '@/components/agents/agentStatus';\nimport { useGetTargetQuery } from '@/generated/wspace-operations';\nimport type { GetTargetQuery } from '@/generated/wspace-operations';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useTr } from '@/shared/hooks/useTr';\n\ntype TargetType = NonNullable<GetTargetQuery['target']>;\ntype AgentSummary = TargetType['agents'][number];\ntype ConnectionSummary = TargetType['inboundConnections'][number];\n\n/**\n * TargetDetailsPage — `/vibecontrols/targets/:id`\n *\n * Mirrors AgentDetailsPage shell. Three sections:\n *   1. Identity card (name, type, status, host, last updated)\n *   2. Agents on this target (table with link to AgentDetailsPage)\n *   3. Inbound agent connections\n *\n * Reuses the existing `GetTarget` query — no schema changes needed; the\n * `TargetFields` fragment already includes the agent list and metadata.\n */\nexport function TargetDetailsPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useVibeNavigate();\n  const tr = useTr();\n  // Page-level read gate (the gateway enforces `target:read` on GetTarget).\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(VIBE_PERMISSIONS.TARGET_READ);\n\n  const { data, loading, error, refetch } = useGetTargetQuery({\n    variables: { id: id ?? '' },\n    skip: !id || permissionsLoading || !canRead,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const target = data?.target ?? null;\n  const agents = useMemo(() => target?.agents ?? [], [target]);\n  const connections = useMemo(() => target?.inboundConnections ?? [], [target]);\n\n  if (!id) {\n    return (\n      <ErrorState title={tr('targetDetails.missingId', 'Target id missing from URL')} message=\"\" />\n    );\n  }\n\n  if (permissionsLoading) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <AccessDenied\n        title={tr('targetDetails.denied.title', 'Access Denied')}\n        description={tr(\n          'targetDetails.denied.description',\n          'You do not have permission to view this target.'\n        )}\n      />\n    );\n  }\n\n  if (loading && !data) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (error && !target) {\n    return (\n      <ErrorState\n        title={tr('targetDetails.errorTitle', 'Failed to load target')}\n        message={error.message}\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (!target) {\n    return (\n      <EmptyState\n        icon={<Server className=\"size-12 text-text-muted\" aria-hidden=\"true\" />}\n        title={tr('targetDetails.notFoundTitle', 'Target not found')}\n        description={tr(\n          'targetDetails.notFoundBody',\n          'The target you requested may have been deleted or is in a different workspace.'\n        )}\n      />\n    );\n  }\n\n  const lastUpdatedAt = target.updatedAt\n    ? new Date(target.updatedAt as string).toLocaleString()\n    : '—';\n\n  return (\n    <MotionPage>\n      <PageHeader\n        title={target.name}\n        description={`${target.type} · ${target.host ?? 'no host'}`}\n        breadcrumb={[\n          { label: tr('breadcrumbs.targetsAgents', 'Targets & Agents'), path: '../agents' },\n          { label: tr('breadcrumbs.targets', 'Targets'), path: '../agents?tab=targets' },\n          { label: target.name },\n        ]}\n        actions={\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <EntityShareButton\n              entity=\"target\"\n              resource={{ id: target.id, name: target.name }}\n              label={tr('targetDetails.share', 'Share')}\n              variant=\"button\"\n            />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => navigate('/agents?tab=targets')}\n              className=\"max-md:min-h-11\"\n            >\n              <ArrowLeft className=\"size-3.5\" aria-hidden=\"true\" />\n              {tr('common.back', 'Back')}\n            </Button>\n          </div>\n        }\n      />\n\n      {/* Identity */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Server className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.identity', 'Identity')}\n          </h3>\n        </div>\n        <div className=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.name', 'Name')}</p>\n            <p className=\"text-text-primary font-medium break-words\">{target.name}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.type', 'Type')}</p>\n            <p className=\"text-text-primary font-medium\">{target.type}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.status', 'Status')}</p>\n            <StatusBadge status={target.status} />\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.host', 'Host')}</p>\n            <p className=\"text-text-primary font-mono text-xs break-words\">{target.host ?? '—'}</p>\n          </div>\n          {target.username && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.username', 'Username')}</p>\n              <p className=\"text-text-primary font-mono text-xs break-words\">{target.username}</p>\n            </div>\n          )}\n          {target.port != null && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.port', 'Port')}</p>\n              <p className=\"text-text-primary font-mono text-xs\">{target.port}</p>\n            </div>\n          )}\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.updatedAt', 'Last updated')}</p>\n            <p className=\"text-text-primary text-xs\">{lastUpdatedAt}</p>\n          </div>\n          {target.tags && target.tags.length > 0 && (\n            <div className=\"sm:col-span-2\">\n              {/* Legacy free-text labels stored on the target row — titled\n                  \"Labels\" to disambiguate from the workspace-level tag\n                  entities managed in the Tags card below. */}\n              <p className=\"text-text-muted mb-1\">{tr('targetDetails.labels', 'Labels')}</p>\n              <div className=\"flex flex-wrap gap-1\">\n                {target.tags.map((tag: string) => (\n                  <span\n                    key={tag}\n                    className=\"px-2 py-0.5 text-xs rounded bg-bg-sunken border border-border-default\"\n                  >\n                    {tag}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </Card>\n\n      {/* Tags */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Tag className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">{tr('targetDetails.tags', 'Tags')}</h3>\n        </div>\n        <div className=\"p-4\">\n          <EntityTagPicker entityType=\"VIBECONTROLS_TARGET\" entityId={target.id} />\n        </div>\n      </Card>\n\n      {/* Agents on this target */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex flex-wrap items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            <Cpu className=\"size-5\" aria-hidden=\"true\" />\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('targetDetails.agents', 'Agents on this target')} ({agents.length})\n            </h3>\n          </div>\n          <Link\n            to=\"../agents?tab=agents\"\n            className=\"text-sm text-text-link hover:text-text-linkHover hover:underline flex items-center gap-1 rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n          >\n            {tr('targetDetails.allAgents', 'All agents')}\n            <ExternalLink className=\"size-3\" aria-hidden=\"true\" />\n          </Link>\n        </div>\n        {agents.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Cpu className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noAgents', 'No agents on this target yet')}\n              description={tr(\n                'targetDetails.noAgentsBody',\n                'Use the Agents tab to onboard an agent and select this target during setup.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {agents.map((agent: AgentSummary) => {\n              const status = getAgentStatus(agent);\n              return (\n                <Link\n                  key={agent.id}\n                  to={`../agents/${agent.id}`}\n                  className=\"flex items-center justify-between gap-3 p-3 rounded-card border border-border-default hover:bg-bg-sunken/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                >\n                  <div className=\"flex items-center gap-3 min-w-0\">\n                    <div\n                      className=\"size-8 rounded-button bg-bg-sunken flex items-center justify-center flex-shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      {status === 'ACTIVE' ? (\n                        <CircleCheck className=\"size-4 text-status-success-text\" />\n                      ) : (\n                        <CircleX className=\"size-4 text-text-muted\" />\n                      )}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium text-text-primary truncate\">{agent.name}</p>\n                      <p className=\"text-xs text-text-muted truncate\">\n                        v{agent.version}\n                        {agent.tunnelUrl ? ` · ${agent.tunnelUrl}` : ''}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 flex-shrink-0\">\n                    <StatusBadge status={status} />\n                    <ExternalLink className=\"size-3.5 text-text-muted\" aria-hidden=\"true\" />\n                  </div>\n                </Link>\n              );\n            })}\n          </div>\n        )}\n      </Card>\n\n      {/* Inbound connections */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Activity className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.connections', 'Inbound connections')} ({connections.length})\n          </h3>\n        </div>\n        {connections.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Activity className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noConnections', 'No inbound connections')}\n              description={tr(\n                'targetDetails.noConnectionsBody',\n                'No agents are currently connected to this target.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {connections.map((conn: ConnectionSummary) => (\n              <div\n                key={conn.id}\n                className=\"flex flex-wrap items-center justify-between gap-3 p-3 rounded-card border border-border-default\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium text-text-primary truncate\">\n                    {conn.label || `${conn.protocol} connection`}\n                  </p>\n                  <p className=\"text-xs text-text-muted truncate\">\n                    {tr('targetDetails.from', 'From')}{' '}\n                    <Link\n                      to={`../agents/${conn.sourceAgent.id}`}\n                      className=\"text-text-link hover:text-text-linkHover hover:underline rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                    >\n                      {conn.sourceAgent.name}\n                    </Link>{' '}\n                    · {conn.protocol} · {conn.status}\n                  </p>\n                </div>\n                <StatusBadge status={conn.status} />\n              </div>\n            ))}\n          </div>\n        )}\n      </Card>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TargetDetailsPage.js","names":[],"sources":["../../src/pages/TargetDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, Link } from 'react-router-dom';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n  ArrowLeft,\n  Server,\n  CircleCheck,\n  CircleX,\n  Cpu,\n  ExternalLink,\n  Activity,\n  Tag,\n} from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { PageHeader, Card, StatusBadge, EmptyState, ErrorState } from '@/components/shared';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { EntityShareButton } from '@/components/sharing';\nimport { getAgentStatus } from '@/components/agents/agentStatus';\nimport { useGetTargetQuery } from '@/generated/wspace-operations';\nimport type { GetTargetQuery } from '@/generated/wspace-operations';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useTr } from '@/shared/hooks/useTr';\n\ntype TargetType = NonNullable<GetTargetQuery['target']>;\ntype AgentSummary = TargetType['agents'][number];\ntype ConnectionSummary = TargetType['inboundConnections'][number];\n\n/**\n * TargetDetailsPage — `/vibecontrols/targets/:id`\n *\n * Mirrors AgentDetailsPage shell. Three sections:\n *   1. Identity card (name, type, status, host, last updated)\n *   2. Agents on this target (table with link to AgentDetailsPage)\n *   3. Inbound agent connections\n *\n * Reuses the existing `GetTarget` query — no schema changes needed; the\n * `TargetFields` fragment already includes the agent list and metadata.\n */\nexport function TargetDetailsPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useVibeNavigate();\n  const tr = useTr();\n  // Page-level read gate (the gateway enforces `target:read` on GetTarget).\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(VIBE_PERMISSIONS.TARGET_READ);\n\n  const { data, loading, error, refetch } = useGetTargetQuery({\n    variables: { id: id ?? '' },\n    skip: !id || permissionsLoading || !canRead,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const target = data?.target ?? null;\n  const agents = useMemo(() => target?.agents ?? [], [target]);\n  const connections = useMemo(() => target?.inboundConnections ?? [], [target]);\n\n  if (!id) {\n    return (\n      <ErrorState title={tr('targetDetails.missingId', 'Target id missing from URL')} message=\"\" />\n    );\n  }\n\n  if (permissionsLoading) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <AccessDenied\n        title={tr('targetDetails.denied.title', 'Access Denied')}\n        description={tr(\n          'targetDetails.denied.description',\n          'You do not have permission to view this target.'\n        )}\n      />\n    );\n  }\n\n  if (loading && !data) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (error && !target) {\n    return (\n      <ErrorState\n        title={tr('targetDetails.errorTitle', 'Failed to load target')}\n        message={error.message}\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (!target) {\n    return (\n      <EmptyState\n        icon={<Server className=\"size-12 text-text-muted\" aria-hidden=\"true\" />}\n        title={tr('targetDetails.notFoundTitle', 'Target not found')}\n        description={tr(\n          'targetDetails.notFoundBody',\n          'The target you requested may have been deleted or is in a different workspace.'\n        )}\n      />\n    );\n  }\n\n  const lastUpdatedAt = target.updatedAt\n    ? new Date(target.updatedAt as string).toLocaleString()\n    : '—';\n\n  return (\n    <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full\">\n      <PageHeader\n        title={target.name}\n        description={`${target.type} · ${target.host ?? 'no host'}`}\n        breadcrumb={[\n          { label: tr('breadcrumbs.targetsAgents', 'Targets & Agents'), path: '../agents' },\n          { label: tr('breadcrumbs.targets', 'Targets'), path: '../agents?tab=targets' },\n          { label: target.name },\n        ]}\n        actions={\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <EntityShareButton\n              entity=\"target\"\n              resource={{ id: target.id, name: target.name }}\n              label={tr('targetDetails.share', 'Share')}\n              variant=\"button\"\n            />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => navigate('/agents?tab=targets')}\n              className=\"max-md:min-h-11\"\n            >\n              <ArrowLeft className=\"size-3.5\" aria-hidden=\"true\" />\n              {tr('common.back', 'Back')}\n            </Button>\n          </div>\n        }\n      />\n\n      {/* Identity */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex items-center gap-2\">\n          <Server className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.identity', 'Identity')}\n          </h3>\n        </div>\n        <div className=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.name', 'Name')}</p>\n            <p className=\"text-text-primary font-medium break-words\">{target.name}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.type', 'Type')}</p>\n            <p className=\"text-text-primary font-medium\">{target.type}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.status', 'Status')}</p>\n            <StatusBadge status={target.status} />\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.host', 'Host')}</p>\n            <p className=\"text-text-primary font-mono text-xs break-words\">{target.host ?? '—'}</p>\n          </div>\n          {target.username && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.username', 'Username')}</p>\n              <p className=\"text-text-primary font-mono text-xs break-words\">{target.username}</p>\n            </div>\n          )}\n          {target.port != null && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.port', 'Port')}</p>\n              <p className=\"text-text-primary font-mono text-xs\">{target.port}</p>\n            </div>\n          )}\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.updatedAt', 'Last updated')}</p>\n            <p className=\"text-text-primary text-xs\">{lastUpdatedAt}</p>\n          </div>\n          {target.tags && target.tags.length > 0 && (\n            <div className=\"sm:col-span-2\">\n              {/* Legacy free-text labels stored on the target row — titled\n                  \"Labels\" to disambiguate from the workspace-level tag\n                  entities managed in the Tags card below. */}\n              <p className=\"text-text-muted mb-1\">{tr('targetDetails.labels', 'Labels')}</p>\n              <div className=\"flex flex-wrap gap-1\">\n                {target.tags.map((tag: string) => (\n                  <span\n                    key={tag}\n                    className=\"px-2 py-0.5 text-xs rounded-full bg-bg-sunken border border-border-subtle\"\n                  >\n                    {tag}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </Card>\n\n      {/* Tags */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex items-center gap-2\">\n          <Tag className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">{tr('targetDetails.tags', 'Tags')}</h3>\n        </div>\n        <div className=\"p-4\">\n          <EntityTagPicker entityType=\"VIBECONTROLS_TARGET\" entityId={target.id} />\n        </div>\n      </Card>\n\n      {/* Agents on this target */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex flex-wrap items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            <Cpu className=\"size-5\" aria-hidden=\"true\" />\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('targetDetails.agents', 'Agents on this target')} ({agents.length})\n            </h3>\n          </div>\n          <Link\n            to=\"../agents?tab=agents\"\n            className=\"text-sm text-text-link hover:text-text-linkHover hover:underline flex items-center gap-1 rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n          >\n            {tr('targetDetails.allAgents', 'All agents')}\n            <ExternalLink className=\"size-3\" aria-hidden=\"true\" />\n          </Link>\n        </div>\n        {agents.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Cpu className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noAgents', 'No agents on this target yet')}\n              description={tr(\n                'targetDetails.noAgentsBody',\n                'Use the Agents tab to onboard an agent and select this target during setup.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {agents.map((agent: AgentSummary) => {\n              const status = getAgentStatus(agent);\n              return (\n                <Link\n                  key={agent.id}\n                  to={`../agents/${agent.id}`}\n                  className=\"flex items-center justify-between gap-3 p-3 rounded-card border border-border-subtle hover:bg-bg-sunken/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                >\n                  <div className=\"flex items-center gap-3 min-w-0\">\n                    <div\n                      className=\"size-8 rounded-button bg-bg-sunken flex items-center justify-center flex-shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      {status === 'ACTIVE' ? (\n                        <CircleCheck className=\"size-4 text-status-success-text\" />\n                      ) : (\n                        <CircleX className=\"size-4 text-text-muted\" />\n                      )}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium text-text-primary truncate\">{agent.name}</p>\n                      <p className=\"text-xs text-text-muted truncate\">\n                        v{agent.version}\n                        {agent.tunnelUrl ? ` · ${agent.tunnelUrl}` : ''}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 flex-shrink-0\">\n                    <StatusBadge status={status} />\n                    <ExternalLink className=\"size-3.5 text-text-muted\" aria-hidden=\"true\" />\n                  </div>\n                </Link>\n              );\n            })}\n          </div>\n        )}\n      </Card>\n\n      {/* Inbound connections */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex items-center gap-2\">\n          <Activity className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.connections', 'Inbound connections')} ({connections.length})\n          </h3>\n        </div>\n        {connections.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Activity className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noConnections', 'No inbound connections')}\n              description={tr(\n                'targetDetails.noConnectionsBody',\n                'No agents are currently connected to this target.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {connections.map((conn: ConnectionSummary) => (\n              <div\n                key={conn.id}\n                className=\"flex flex-wrap items-center justify-between gap-3 p-3 rounded-card border border-border-subtle\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium text-text-primary truncate\">\n                    {conn.label || `${conn.protocol} connection`}\n                  </p>\n                  <p className=\"text-xs text-text-muted truncate\">\n                    {tr('targetDetails.from', 'From')}{' '}\n                    <Link\n                      to={`../agents/${conn.sourceAgent.id}`}\n                      className=\"text-text-link hover:text-text-linkHover hover:underline rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                    >\n                      {conn.sourceAgent.name}\n                    </Link>{' '}\n                    · {conn.protocol} · {conn.status}\n                  </p>\n                </div>\n                <StatusBadge status={conn.status} />\n              </div>\n            ))}\n          </div>\n        )}\n      </Card>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/TargetsPage.js

@@ -437,7 +437,7 @@ function g() {
 		}
 	], [m]), Rn = y || b || x !== "all" || S !== "all", zn = `${m("targets.agentConnectionHintPrefix", "The agent that will establish the")} ${B} ${m("targets.agentConnectionHintSuffix", "connection to this target.")}`, Bn = Se({ hint: zn }), Vn = `${pt}-add-type-label`;
 	return dt ? /* @__PURE__ */ d(de, { message: m("targets.loadingPermissions", "Loading permissions…") }) : ut(Te.TARGET_LIST) ? /* @__PURE__ */ f(nt, {
-		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-full",
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full",
 		children: [
 			/* @__PURE__ */ d(ue, {
 				title: m("nav.targets", "Targets"),
@@ -487,14 +487,14 @@ function g() {
 					}), /* @__PURE__ */ f("div", {
 						role: "group",
 						"aria-label": m("targets.viewMode", "View mode"),
-						className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
+						className: "flex items-center gap-1 bg-bg-sunken rounded-button p-1 flex-shrink-0 border border-border-subtle",
 						children: [/* @__PURE__ */ d("button", {
 							type: "button",
 							onClick: () => vt("grid"),
 							"aria-pressed": C === "grid",
 							"aria-label": m("targets.gridViewTitle", "Grid view"),
 							title: m("targets.gridViewTitle", "Grid view"),
-							className: `flex size-8 max-md:size-9 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${C === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							className: `flex size-8 max-md:size-9 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${C === "grid" ? "bg-[var(--color-accent-soft)] text-action-primary-bg" : "text-text-secondary hover:bg-bg-surface/60"}`,
 							children: /* @__PURE__ */ d(Pe, {
 								className: "size-4 text-text-secondary",
 								"aria-hidden": "true"
@@ -505,7 +505,7 @@ function g() {
 							"aria-pressed": C === "list",
 							"aria-label": m("targets.listViewTitle", "List view"),
 							title: m("targets.listViewTitle", "List view"),
-							className: `flex size-8 max-md:size-9 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${C === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+							className: `flex size-8 max-md:size-9 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${C === "list" ? "bg-[var(--color-accent-soft)] text-action-primary-bg" : "text-text-secondary hover:bg-bg-surface/60"}`,
 							children: /* @__PURE__ */ d(Fe, {
 								className: "size-4 text-text-secondary",
 								"aria-hidden": "true"