Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/security.md`:
- Around line 152-159: Update the "Browser support for directive splitting"
section to indicate the Firefox bug status may change by adding a short,
version-tracking note next to the Firefox link (e.g., "check bug status
periodically / update when landing in Firefox") and include an "as of <date>" or
similar timestamp; reference the section header "Browser support for directive
splitting" and the Firefox bug URL
(https://bugzilla.mozilla.org/show_bug.cgi?id=1529338) so reviewers can find and
update this note when Firefox adds support for style-src-attr.

In `@src/synthorg/api/app.py`:
- Around line 276-296: The warning handler in the except block around
channels_plugin.publish may raise KeyError by indexing payload directly; update
the except block (where logger.warning is called with
PROMPT_PERSONALITY_NOTIFY_FAILED) to avoid direct payload[...] access—either
extract required values from payload into local variables before the try or use
safe lookups like
payload.get("agent_id")/payload.get("agent_name")/payload.get("task_id")/payload.get("trim_tier")/payload.get("before_tokens")/payload.get("after_tokens")
with sensible defaults, then pass those locals into logger.warning so the
log-and-swallow behavior of the notifier is preserved.

In `@web/src/__tests__/pages/org-edit/DepartmentEditDrawer.test.tsx`:
- Around line 41-47: The test 'shows the agent count from the runtime health
payload' currently only asserts the meter was removed; update it to also assert
that the drawer renders the health.agent_count summary by calling renderDrawer()
then checking for the expected text produced from the payload (e.g.
expect(screen.getByText(/1 agent/ or /N agent/)) or a regex like /\\d+ agent/),
referencing the rendered output produced by renderDrawer and the
health.agent_count field so the test fails if the agent-count summary stops
being rendered.

In `@web/src/__tests__/pages/org-edit/GeneralTab.test.tsx`:
- Around line 53-67: The test currently never asserts that the change event
updated local state; add an assertion that the company name input actually
changed (e.g., assert screen.getByLabelText(/company name/i) has value 'Updated
Corp') so the form is truly dirty, and then restore the property-based sweep
using fast-check: wrap the multi-field mutation checks in fc.assert +
fc.property with the same arbitrary field generator pattern used in
web/src/__tests__/utils/*.property.test.ts to exercise GeneralTab's `#1081` gate
across many dirty-state combinations; keep mockOnUpdate and the existing Save
Settings disabled/assertions intact so the property test clicks the disabled
button and verifies mockOnUpdate is not called.

In `@web/src/components/layout/Sidebar.tsx`:
- Around line 371-378: Replace the inline sr-only span that announces WebSocket
status with the shared LiveRegion component: import LiveRegion and pass the same
computed message based on wsConnected and wsReconnectExhausted (the existing
conditional string values) to LiveRegion so it handles aria-live, role="status"
and debounce/accessibility behavior; remove the inline <span role="status"
aria-live="polite"> block and ensure LiveRegion is rendered in its place so
announcements use the centralized behavior.

In `@web/src/components/ui/animated-presence.tsx`:
- Around line 31-41: pageVariants currently hardcodes transition durations
(duration: 0.12 and duration: 0.06); refactor to use motion presets by adding
tweenCrossfadeEnter and tweenCrossfadeExit in "@/lib/motion" (export const
tweenCrossfadeEnter = { type: 'tween', duration: 0.12, ease: 'easeOut' } and
export const tweenCrossfadeExit = { type: 'tween', duration: 0.06, ease:
'easeIn' }) and then import those presets into this file and replace the inline
transition objects in pageVariants.animate and pageVariants.exit with the
imported tweenCrossfadeEnter and tweenCrossfadeExit respectively.

In `@web/src/components/ui/confirm-dialog.tsx`:
- Around line 1-4: The Confirm Dialog allows double submissions because loading
is parent-controlled; add an internal re-entry guard (e.g., an isConfirming
useRef or useState) inside the component that short-circuits the confirm handler
and disables the confirm button while a confirm is in-flight. Update the local
handler that calls the onConfirm prop (referenced as onConfirm) — name it
handleConfirm or similar — to check and set isConfirming before invoking
onConfirm, clear the flag only after the promise resolves/rejects, and use this
flag to disable the confirm button and show the Loader2 so rapid double-clicks
cannot trigger multiple onConfirm executions.

In `@web/src/components/ui/health-popover.tsx`:
- Around line 198-234: fetchHealth currently allows overlapping requests to race
and unconditionally write loadState, so an older/slower response can overwrite a
newer one; fix by adding a useRef (import useRef from React) e.g. latestFetchRef
to hold an incrementing request id or timestamp, increment it at the start of
fetchHealth and capture the id in the promise handlers, then only call
setLoadState/setNowMs inside .then and .catch if the captured id equals
latestFetchRef.current (ensuring "latest-response-wins"); update the fetchHealth
function (and add the useRef declaration alongside open/loadState/nowMs) and
keep all other logic unchanged.
- Around line 312-321: Remove the explicit aria-describedby={undefined} prop on
the Dialog.Popup component so Base UI can auto-wire the Dialog.Description;
locate the Dialog.Popup usage in the health-popover component and delete the
aria-describedby prop (or leave it unset) to restore screen-reader announcement
of the Dialog.Description content.

In `@web/src/components/ui/slot.tsx`:
- Around line 43-52: In Slot, calling Children.only(children) can throw for
non-singleton children; first check the children shape before invoking
Children.only — e.g., verify React.Children.count(children) === 1 and that the
child is a valid React element (use isValidElement/React.isValidElement) and
only then call Children.only; if the guard fails, call log.warn with the
existing message and return children as a graceful no-op; update the Slot
function to perform this pre-check around Children.only and isValidElement to
avoid render crashes.

In `@web/src/hooks/useOrgChartData.ts`:
- Around line 159-164: The edge filtering currently does O(edges × nodes) work
by calling tree.nodes.find(...) for each tree.edges entry; replace that with an
O(edges + nodes) approach by first building a Set of valid node IDs from
tree.nodes (e.g., collect n.id into a Set) and then use tree.edges.filter(e =>
idSet.has(e.source) && idSet.has(e.target)) so the checks for e.source and
e.target are O(1) each; update the logic around tree.edges and tree.nodes
accordingly.

In `@web/src/pages/AgentDetailPage.tsx`:
- Around line 26-29: The lookup fallback is dropping the raw route param which
prevents name-based routes from working; update the fallback for
resolvedAgentName to use agentId when configAgent?.name is undefined (i.e.,
change resolvedAgentName from configAgent?.name ?? '' to configAgent?.name ??
agentId) and apply the same change to the other occurrence mentioned (the
similar fallback at line 44), ensuring components like useAgentDetailData
receive the original route param as the fallback identifier.

In `@web/src/pages/org-edit/AgentEditDrawer.tsx`:
- Around line 172-199: The Delete and Save Button elements in AgentEditDrawer
(the Button with onClick={() => setDeleteOpen(true)} / Trash2 and the Button
that calls handleSave and renders Loader2) include an explicit
aria-disabled="true" while also using the native disabled prop; remove the
redundant aria-disabled="true" attributes from these Button instances (keep
disabled and title={ORG_EDIT_COMING_SOON_TOOLTIP}) so the native disabled
behavior/semantics are preserved without duplicate ARIA attributes.

In `@web/src/pages/org-edit/AgentsTab.tsx`:
- Around line 198-203: The disabled "Add Agent" Button uses aria-disabled and
title to explain why it’s unavailable, but native disabled buttons aren’t
focusable and title is unreliable; update the AgentsTab UI so the explanatory
copy (ORG_EDIT_COMING_SOON_TOOLTIP / "#1081" text) is visible outside the
disabled button — for example wrap the Button in a focusable element or render
visible helper text or a tooltip trigger next to the Button and remove reliance
on title on the disabled Button (affecting the Button usage around setCreateOpen
in AgentsTab and the other occurrence at lines ~227-232).

In `@web/src/pages/org-edit/DepartmentCreateDialog.tsx`:
- Around line 163-171: The Create Department Button is permanently disabled but
still has an onClick handler (onClick={handleSubmit}), which is misleading;
remove the onClick prop from the Button component in DepartmentCreateDialog
(retain disabled, aria-disabled, title, submitting/Loader2, and text) or if you
intend to re-enable later, replace the prop with a brief comment referencing
issue `#1081` and keep handleSubmit in scope. Ensure you update the Button JSX so
there is no unused interactive handler attached while the button remains
disabled.

In `@web/src/pages/org/DepartmentGroupNode.stories.tsx`:
- Around line 70-89: The OverBudget story declares budgetPercent: 20 but still
shows utilizationPercent: 95, so update the fixture so utilizationPercent
exceeds the budget threshold; in the OverBudget export (symbol: OverBudget)
adjust the data fields (budgetPercent and/or utilizationPercent) so
utilizationPercent > budgetPercent (for example set utilizationPercent to a
value >100 or at least greater than 20) to ensure the story truly represents an
over-budget state.

In `@web/src/pages/org/HierarchyEdge.tsx`:
- Around line 67-70: The particle duration is inflated for straight
vertical/horizontal edges because BEND_OFFSET is always added to approxLength;
change the approxLength calculation in HierarchyEdge (where approxLength,
BEND_OFFSET, durSec, MIN_PARTICLE_DUR_SEC, PARTICLE_PX_PER_SEC are used) to only
add BEND_OFFSET when the edge actually bends (i.e., both dx and dy are non-zero
or sx !== tx && sy !== ty). Compute approxLength = Math.abs(tx - sx) +
Math.abs(ty - sy) + (hasBend ? BEND_OFFSET : 0) and then compute durSec as
before to restore uniform particle speed on aligned edges.

In `@web/src/pages/org/layout.ts`:
- Around line 106-121: The fallback branch currently triggers when
leafNodes.length === 0 but synthetic owner nodes count as leaves, so owner-only
orgs skip the empty layout; change the condition to detect "no agent nodes"
instead (e.g., count only real agent/department leaf nodes, excluding synthetic
owner nodes) and use that to enter the empty-state layout; ensure the code that
maps nodes (nodes.map) still sets position, width (EMPTY_GROUP_MIN_WIDTH) and
height (EMPTY_GROUP_HEIGHT) for each empty department, and place owner nodes
separately before rendering empty departments so they don't overlap the first
empty box.
- Around line 311-449: The post-layout adjustment pass (steps labeled Step 4
onward) assumes top-to-bottom layout and breaks when direction === 'LR'; update
the routine that runs this pass to check the layout direction (e.g., a
LayoutDirection or `direction` parameter) and only perform the
vertical/centering logic when direction === 'TB', or alternatively implement
mirrored behavior for LR by swapping x/y or inverting x calculations (affecting
rootPopulated, allGroupResults sorting/centering logic, ownerBottomY computation
from positionedLeafMap, Step 4.5 root/row vertical shifts using
DESIRED_INTER_DEPT_GAP, and Step 5 owner centering using getNodeDim) so that LR
produces the correct left-to-right layout; ensure the gating or mirroring covers
the root centering, non-root shifts, and owner repositioning code paths
(references: rootPopulated, rootGroupIds, allGroupResults, positionedLeafMap,
getNodeDim, DESIRED_INTER_DEPT_GAP).

In `@web/src/pages/org/OrgChartSearchOverlay.tsx`:
- Around line 81-88: Replace the raw <button> in OrgChartSearchOverlay.tsx with
the shared Button component: add "import { Button } from
'@/components/ui/button'" at the top, then render <Button> with
onClick={onClose}, aria-label="Close search" and the appropriate variant/size or
className to match the existing styling (hover, rounded, padding, and text
color). Ensure the X icon remains as the child (e.g., <X className="size-3.5"
/>) and that the Button preserves accessibility and transition behavior
currently provided by the native button.

In `@web/src/pages/OrgChartPage.tsx`:
- Around line 605-612: Replace the hardcoded inline transition string in the
dimmed branch with a motion preset from "@/lib/motion": add or reuse a named
preset (e.g., searchDimTransition or OPACITY_DIM_TRANSITION) in "@/lib/motion",
import it into OrgChartPage.tsx, and assign that preset to next.style (or
reference a CSS custom property set from the preset) instead of using
'transition: "opacity 180ms ease"' in the block that sets next.style when dimmed
(the code that checks `if (dimmed) { next.style = { ...n.style, opacity: 0.25,
transition: 'opacity 180ms ease' } }`).
- Around line 776-804: The MiniMap props use hardcoded color literals; update
the MiniMap configuration (the MiniMap component and its props bgColor,
maskColor, maskStrokeColor, nodeColor, and nodeStrokeColor) to use design
tokens/CSS variables or Tailwind semantic variables (e.g., var(--so-...))
instead of literal values like "rgba(15, 18, 26, 0.92)", "#38bdf8", and
"#f59e0b"; for nodeColor and nodeStrokeColor adjust the returned values to
reference those variables (e.g., return strings using var(--so-accent) or
semantic token names) so all colors follow the project's design-token
convention.

---

Outside diff comments:
In `@web/src/pages/dashboard/BudgetBurnChart.tsx`:
- Around line 74-91: ChartTooltipContent currently ignores the chart's currency
so tooltips always use default formatting; update the ChartTooltipContent
signature to accept a currency prop (e.g., currency?: string), pass that
currency into formatCurrency when rendering each entry, and then thread the same
currency from BudgetBurnChart into the tooltip's content prop where
ChartTooltipContent is used so the tooltip shows the correct currency. Ensure
you reference ChartTooltipContent and formatCurrency and the BudgetBurnChart
usage so the prop name matches in both places.

In `@web/src/pages/tasks/TaskCreateDialog.tsx`:
- Around line 216-276: TaskCreateDialog is using a locally defined FormField
component instead of reusing the existing InputField/SelectField in
web/src/components/ui/; replace or extract to follow the guideline. Fix by
either: 1) refactor TaskCreateDialog to use the existing InputField and
SelectField components (replace FormField-wrapped input/textarea/select usages
with InputField/SelectField and pass errors, label, required props) referencing
the TaskCreateDialog component and the FormField symbol to locate occurrences;
or 2) if the FormField accessibility pattern must be preserved, extract it into
a shared components/ui/form-field.tsx and import it in TaskCreateDialog and
other dialogs (move the FormField definition to the new file, export it, and
update imports). Ensure prop names (label, error, required) match the shared
component API and update usages for title, description, project, created_by,
assigned_to, estimated_complexity, type, priority, and budget_limit fields
accordingly.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/security.md`:
- Around line 110-111: The documentation's CSP snippet is incomplete: update the
CSP example in docs/security.md so it matches the deployed header in
web/security-headers.conf by including the style-src fallback alongside the
element/attribute directives; replace the current `style-src-elem 'self'
'nonce-$csp_nonce'; style-src-attr 'unsafe-inline'` fragment with the full
policy `style-src 'self' 'nonce-$csp_nonce' 'unsafe-inline'; style-src-elem
'self' 'nonce-$csp_nonce'; style-src-attr 'unsafe-inline'` so the docs and
deployed config are consistent.

In `@src/synthorg/api/controllers/analytics.py`:
- Around line 401-406: The code calls app_state.persistence.tasks.list_tasks()
which scans the entire task history and causes ACTIVE_AGENTS metrics to scale
with retained tasks; change this to a bounded query that only fetches current
IN_PROGRESS assignees or a dedicated aggregate/count API instead of listing
everything. Update the call site that feeds _resolve_agent_counts (the block
using all_tasks and active_count) to use a filtered method such as
tasks.list_tasks(status=TaskStatus.IN_PROGRESS) or a new
tasks.count_active_assignees()/tasks.aggregate_active_assignees() that returns
the current set/count of in-progress assignees, then pass that result into
_resolve_agent_counts (or refactor _resolve_agent_counts to accept the
aggregate) so the work is bounded and does not scan full history.
- Around line 273-277: The debug branches inside _resolve_agent_counts()
incorrectly emit the module-level ANALYTICS_OVERVIEW_QUERIED event even when
called from /analytics/trends; replace those with a helper-scoped event constant
(e.g., declare a local variable like event_name at top of _resolve_agent_counts
or pass an event param) and use that local event when calling logger.debug in
both fallback branches (the occurrences currently using
ANALYTICS_OVERVIEW_QUERIED around the two debug blocks at the same function,
including the similar block at lines ~295-299). Ensure the helper-scoped
constant follows the guideline to use event name constants from
synthorg.observability.events (or map the caller to the correct event) so trends
requests are logged with the trends event and overview requests with the
overview event.
- Around line 278-290: In resolve_agent_counts, don't return zero for
active_agents when the agent registry query fails; first compute the busy set
from all_tasks (e.g., derive busy_count from app_state.all_tasks or the function
that builds the busy set) before calling app_state.agent_registry.list_active(),
and on Exception (but after re-raising MemoryError/RecursionError) log the error
as you do and return busy_count, config_agent_count instead of 0,
config_agent_count so in-progress work is still reflected; keep the successful
path unchanged (combine employed with busy set as before) and only use the
registry result to adjust idle/employed numbers.

In `@src/synthorg/engine/agent_engine.py`:
- Around line 1100-1101: The code in _prepare_context() logs
PROMPT_PERSONALITY_TRIMMED then awaits
self._maybe_notify_personality_trim(trim_payload), which blocks the prompt-build
hot path and adds latency; instead fire-and-forget the notifier by scheduling it
with asyncio.create_task (or asyncio.ensure_future) and attach a done-callback
that logs exceptions so the notification runs in background and does not delay
the model call; apply the same change for the other occurrence around the
logger.info + await pair referenced in the comment (the second occurrence).

In `@web/CLAUDE.md`:
- Line 5: Update the docs to match the real implementation: change the
MotionConfig example to pass the actual nonce value instead of a boolean
shorthand. Specifically, in the documentation text that shows App.tsx wrapping
the app with <CSPProvider nonce={getCspNonce()}> and <MotionConfig nonce>,
replace the latter with <MotionConfig nonce={nonce}> (or the equivalent
expression used in App.tsx) so it mirrors how getCspNonce() is passed through;
reference MotionConfig, CSPProvider, App.tsx and getCspNonce() to locate the
example to edit.

In `@web/package.json`:
- Line 47: The dependency "cmdk-base" is pinned to "1.0.0" which is inconsistent
with other caret ranges; update the package.json dependency entry for cmdk-base
to use a caret range "^1.0.0" instead of "1.0.0" and then reinstall
(npm/yarn/pnpm) to update the lockfile so the change is reflected across the
project.

In `@web/security-headers.conf`:
- Line 27: The Content-Security-Policy header declared in the add_header
directive (the line starting with add_header Content-Security-Policy) is missing
the frame-ancestors directive; update that CSP string to include frame-ancestors
'none' so the CSP enforces the anti-framing/clickjacking policy alongside
X-Frame-Options (i.e., append "frame-ancestors 'none';" into the existing CSP
value).

In `@web/src/__tests__/pages/org-edit/DepartmentCreateDialog.test.tsx`:
- Around line 33-37: The test currently relies on the disabled button's title
attribute to surface the "#1081" reason; update the assertion to verify visible,
accessible helper text or a tooltip trigger instead: after calling
renderDialog() and locating the Create Department button (createButton via
getByRole), find the visible explanatory text or the tooltip trigger element
(e.g., query/getByText or getByRole('button'|'link') for the tooltip opener, or
follow aria-describedby from createButton) and assert that it contains "1081"
rather than checking createButton.getAttribute('title'). Ensure you still assert
the button is disabled via expect(createButton).toBeDisabled().

In `@web/src/components/layout/StatusBar.tsx`:
- Around line 37-57: The current resolveCombinedStatus logic lets healthStatus
=== 'unknown' short-circuit outage signals; reorder checks in
resolveCombinedStatus so wsReconnectExhausted and !wsConnected are evaluated
before the 'unknown' branch (i.e., check wsReconnectExhausted then !wsConnected,
then healthStatus === 'unknown'), and apply the same reorder to the
duplicate/related function at the other occurrence (lines 93-101) so a WebSocket
reconnect exhaustion or disconnected state produces an offline/reconnecting pill
even when healthStatus is still 'unknown'.

In `@web/src/hooks/useLiveEdgeActivity.ts`:
- Around line 33-37: The subscription callback in useMessagesStore.subscribe
rebuilds prevIds (the Set of prevState.messages.map(m => m.id)) on every update
which can be costly for large message arrays; change the approach in the
callback used in useLiveEdgeActivity.ts to avoid recreating the full Set each
time—either maintain a lastSeenIdRef (store the most recent message id) and
compute newMessages by comparing incoming messages against that ref, or keep an
incremental structure (e.g., a persistent Set stored outside the callback) that
you update when newMessages are found; modify the logic referencing
prevState.messages, prevIds, and newMessages to use lastSeenIdRef or the
incremental Set and update that reference when new messages are processed.

In `@web/src/hooks/useOrgChartData.ts`:
- Around line 146-163: The collapse pruning currently runs unconditionally and
removes agent nodes/edges even when viewMode === 'force'; change the condition
so the pruning of tree.nodes/tree.edges only runs for hierarchy views (e.g.,
when viewMode !== 'force'). Specifically update the block that uses
collapsedDeptIds to also check viewMode (or move it inside the existing viewMode
!== 'force' branch) so that only the hierarchy layout filters out child agents
of collapsed departments; keep injecting isCollapsed into department node data
where UI needs it but do not remove agent nodes/edges when in 'force' mode.

In `@web/src/pages/agents/AgentFilters.tsx`:
- Around line 69-82: Replace the raw HTML <select> in AgentFilters with the
project's SelectField component to enforce consistent styling and accessibility:
render SelectField with value={departmentFilter ?? ''}, onChange that extracts
e.target.value (cast to DepartmentName) and uses setDepartmentFilter(v &&
validDepartmentNames.has(v) ? v : null), pass the options mapped from
departmentOptions (label/value) and include a placeholder option "All
departments" or placeholder prop and aria-label="Filter by department"; apply
the same substitution and value/onChange/validation pattern to the other select
instances (the other department/team filter selects referenced in the comment)
so they all use SelectField and preserve the existing validDepartmentNames
check.

In `@web/src/pages/org-edit/AgentCreateDialog.tsx`:
- Around line 165-177: The primary action Button in AgentCreateDialog is
permanently disabled and only communicates the reason via the title attribute
(ORG_EDIT_COMING_SOON_TOOLTIP), which is invisible to keyboard users; update
AgentCreateDialog to surface the "coming soon" message visibly and prevent users
filling the form by either (A) rendering a short-circuit notice/Alert with the
ORG_EDIT_COMING_SOON_TOOLTIP text and not rendering the form when the feature
flag is off, or (B) keep the Button disabled but add visible helper copy (a
Text/Caption adjacent to the Button) that shows ORG_EDIT_COMING_SOON_TOOLTIP;
ensure handleSubmit cannot run (or the form isn't rendered) when the feature is
disabled so users don’t encounter a dead end.

In `@web/src/pages/org-edit/GeneralTab.tsx`:
- Around line 163-168: The Button in GeneralTab (the Button with
onClick={handleSave} and title={ORG_EDIT_COMING_SOON_TOOLTIP}) is disabled so
its title will never be exposed; move the explanatory text out of the disabled
control and into an accessible element: either render the
ORG_EDIT_COMING_SOON_TOOLTIP as visible helper text (e.g., a <p> or <span>
beneath or next to the Button) with an aria-describedby on the disabled Button,
or wrap the Button in a non-disabled Tooltip/trigger component that shows the
tooltip on hover/focus while leaving the inner Button disabled; ensure keyboard
users can focus the trigger or read the helper text (use aria-describedby with
the helper element if you choose visible text).
- Around line 141-148: The SelectField currently masks unknown backend values by
coercing form.communication_pattern to 'hybrid'; instead, preserve and surface
the raw value so enum drift is visible. Update the SelectField usage
(referencing SelectField, COMMUNICATION_PATTERN_OPTIONS, VALID_COMM_PATTERNS,
and form.communication_pattern) to pass the raw form.communication_pattern as
the value and, if it is not in VALID_COMM_PATTERNS, add or render an explicit
"Unsupported: <value>" option in the options list so the UI displays the actual
stored value rather than silently mapping it to 'hybrid'.

In `@web/src/pages/org-edit/YamlEditorPanel.tsx`:
- Around line 73-81: The YAML editor currently disables the Save button but
still allows edits and marks the form dirty; update YamlEditorPanel to operate
in a true read-only mode when org edit is gated: add a readOnly prop/state (or
derive from the same flag used to disable the Save
button/ORG_EDIT_COMING_SOON_TOOLTIP) and 1) pass it into the text area/editor
component used in YamlEditorPanel so the editor is non-editable (remove or
short-circuit the onChange handler when readOnly), 2) prevent toggling the dirty
state (stop calling setDirty or ignore changes) while readOnly is true, and 3)
suppress any unsaved-changes UI affordance (hide or disable uses of dirty) so
users cannot make or be prompted about unsavable edits; ensure handleSave and
saving remain unchanged but unreachable when readOnly.

In `@web/src/pages/org/AgentNode.tsx`:
- Around line 59-66: The badge in AgentNode.tsx uses a hardcoded utility class
text-[9px] which bypasses the design token scale; replace that token with the
tokenized size (use text-micro) in the span that renders the "Lead" badge (the
element with aria-label="Department lead") so the badge follows the dashboard
typography tokens and removes the hardcoded font-size.

In `@web/src/pages/org/build-org-tree.ts`:
- Around line 214-229: The utilization calculation in buildDeptData is using
health.department_cost_7d and deptBudgetCap (monthly) which mismatches windows
and yields null when companyMonthlyBudget is absent; instead, use the
backend-provided health.utilization_percent when present, otherwise convert
deptBudgetCap to a 7-day equivalent (deptBudgetCap * 7/30 or similar) before
computing utilization from health.department_cost_7d; update the logic around
deptBudgetCap, cost7d and utilizationPercent in buildDeptData to first prefer
health.utilization_percent, then fall back to computing Math.min(100,
Math.round((cost7d / weeklyCap) * 100)) only when both cost7d and a
weekly-equivalent cap exist.

In `@web/src/pages/org/CeoNode.tsx`:
- Around line 26-29: The CEO card's class list in CeoNode.tsx currently uses raw
utility shadows ('shadow-md shadow-accent/20' and 'hover:shadow-lg
hover:shadow-accent/30'); replace those with the dashboard shadow tokens/CSS
vars so the node uses the tokenized system (e.g., use the project's shadow token
classes or CSS variables such as var(--so-shadow-card) and
var(--so-shadow-card-hover) instead). Update the class string in the CeoNode
component to remove the bespoke shadow utilities and reference the existing
shadow token classes/vars used elsewhere in the dashboard.

In `@web/src/pages/org/DepartmentGroupNode.tsx`:
- Line 82: The aria-label on DepartmentGroupNode.tsx currently always uses
"agents" even when agentCount === 1; update the aria-label construction (the JSX
attribute aria-label in DepartmentGroupNode, using variables displayName and
agentCount) to pluralize correctly by using a conditional that renders "1 agent"
when agentCount === 1, "{N} agents" when agentCount > 1, and ", empty" when
agentCount === 0—keep the same descriptive wording but vary "agent"/"agents"
based on agentCount.
- Around line 174-194: DepartmentGroupNode is recreating per-agent status dots
inline (using STATUS_DOT_STYLES and rendering span for each dot in the
visibleDots map); replace that implementation with the shared StatusBadge
component (or add a compact/dotOnly prop to StatusBadge) and pass the agent's
runtimeStatus and agentId/label so styling and semantics are centralized.
Specifically, in the visibleDots.map block inside DepartmentGroupNode, stop
rendering raw spans and instead render <StatusBadge ...> (or extend StatusBadge
to accept mode="dot"/compact/dotOnly and className overrides) with appropriate
props for status, aria-label/title using agentId and
STATUS_DOT_STYLES[status].label, and keep the +{hiddenDotCount} indicator as-is.
- Around line 207-218: Remove the global pointer-events-none on the parent div
so the chip's title tooltip can be hovered; instead make the chip itself visibly
non-actionable and non-focusable by adding attributes/classes on the span with
title "Add agent -- coming soon (`#1081`)" (e.g., add aria-disabled="true",
tabIndex={-1}, and a visual cue like cursor-not-allowed or opacity) and ensure
you apply the same change for the other occurrence (lines 230-239) so the
tooltip is reachable while the chip remains non-interactive.

In `@web/src/pages/org/layout.ts`:
- Around line 109-121: The fast-path that runs when agentLeafNodes.length === 0
applies EMPTY_GROUP_MIN_WIDTH/EMPTY_GROUP_HEIGHT to every node, which wrongly
forces owner nodes into the empty-department size; update the nodes.map block
(the map over nodes returned when agentLeafNodes is empty) to detect owner nodes
(n.type === 'owner') and skip applying EMPTY_GROUP_MIN_WIDTH/EMPTY_GROUP_HEIGHT
and the forced style/width/height for those nodes—only apply the empty-group
positioning/sizing to non-owner nodes so owner nodes keep their original
size/style/width/height (but you may still set a position for layout if needed).

In `@web/src/pages/org/OrgChartSearchOverlay.tsx`:
- Around line 32-45: When handling focus in the useEffect that watches open,
capture the previously focused element before you call requestAnimationFrame and
focus the input (e.g., store document.activeElement in a prevFocused variable or
ref), then on the cleanup path (when cancelling the animation frame or when the
overlay closes) restore focus to that saved element if it still exists and is
focusable; update the effect that references inputRef, requestAnimationFrame,
and cancelAnimationFrame to save the previous focus before focusing and to
re-focus it in the returned cleanup callback.

In `@web/src/pages/OrgChartPage.tsx`:
- Line 42: VALID_NODE_TYPES currently includes 'owner' but
ContextMenuState['nodeType'] and NodeContextMenu don't support it; remove
'owner' from the VALID_NODE_TYPES set (const VALID_NODE_TYPES = new
Set(['agent', 'ceo', 'department'])) so runtime values never produce an
unsupported nodeType, or alternatively update ContextMenuState and
NodeContextMenu to accept 'owner' everywhere if you intend to support it; do not
rely on the existing type cast that hides the mismatch.
- Around line 223-225: Search is being built from the already-filtered
nodes/edges produced by useOrgChartData(viewMode, collapsedDepts), so agents
inside collapsed departments are omitted; change the search indexing to use the
full tree instead of the filtered nodes or to auto-expand matching departments
before filtering. Concretely, update useOrgChartData (or export a new selector
like getAllNodes/getFullTree) so callers can access the complete node list
(e.g., fullNodes/fullEdges) and use that for building the matcher/index, or add
logic in the search handler to expand departments that contain matches prior to
applying collapsedDepts filtering; apply the same change in the other search
usages mentioned (the block referenced around 553-571).

In `@web/src/pages/tasks/TaskCreateDialog.tsx`:
- Around line 318-324: The current clone in controlWithAria replaces any
existing aria-describedby on children with errorId which drops hint/help ids;
change the cloneElement call to read the existing aria-describedby from
children.props['aria-describedby'], append errorId (space-separated) if present,
and pass that combined string as the 'aria-describedby' prop (still setting
'aria-invalid': true) so existing assistive text is preserved; update
controlWithAria to build combinedDesc = existing ? `${existing} ${errorId}` :
errorId before cloning.
- Around line 299-341: This file adds a page-local FormField plus
INPUT_CLASSES/TEXTAREA_CLASSES duplicating shared field logic; remove the
FormField component and the INPUT_CLASSES/TEXTAREA_CLASSES constants and replace
their usages with the shared InputField and SelectField components (use
InputField's multiline/textarea mode for multi-line inputs and pass label,
required, error/hint props; use SelectField for dropdowns with placeholder/error
props). Ensure you stop cloning children for ARIA—use the shared components'
built-in aria-describedby/aria-invalid behavior and map any className overrides
into the shared components' className or size props so styling remains
consistent.

In `@web/src/pages/workflows/WorkflowCard.tsx`:
- Around line 13-14: Add local loading state and wire it into ConfirmDialog:
create a state like isDeleting via useState, implement a handleDelete function
that sets isDeleting true, awaits the async onDelete(id) call, and finally sets
isDeleting false, and pass loading={isDeleting} plus onConfirm={() =>
handleDelete(workflow.id)} to ConfirmDialog (keep using confirmDelete and
setConfirmDelete for open state). Ensure the updated onDelete invocation awaits
the promise so the spinner shows during the async delete.

In `@web/src/pages/workflows/WorkflowTableView.tsx`:
- Around line 81-120: The Menu.Trigger currently passes a raw JSX element which
prevents Base UI from attaching handlers/refs; update the Menu.Trigger render
prop to be a render function that accepts props and spreads them onto the button
(keep type="button", className, aria-label={`Actions for ${w.name}`} and the
MoreHorizontal icon); specifically change the Menu.Trigger usage so the render
callback forwards the incoming props to the button element to ensure proper
event/ref/state wiring.

In `@web/src/styles/global.css`:
- Around line 163-180: The CSS currently applies transform/transition to the
positioned container (.react-flow__node) causing React Flow's position updates
to animate; move the scale and transition rules off .react-flow__node and onto
its child wrapper (.react-flow__node > div) instead: remove transform and
transition from .react-flow__node (including the transition override in the
reduced-motion media query) and add the scale (from .react-flow__node.dragging)
and the transition to .react-flow__node > div so the visual scale and easing
affect only the content wrapper while the positioned container remains
unanimated.

---

Outside diff comments:
In `@docs/design/page-structure.md`:
- Around line 250-337: Update the remaining route references and descriptive
text that still use `/agents/:agentName` to `/agents/:agentId` across the
document (specifically replace occurrences in the URL Routing Map and any inline
examples or prose such as the Agent Detail Page trigger and route list),
ensuring the Agent Detail Page heading and the routes table entry (previously
`/agents/:agentName`) and any mentions like "agentName" are changed to "agentId"
so all examples and links consistently reflect the current routing.

In `@src/synthorg/engine/agent_engine.py`:
- Around line 1047-1076: The code currently reads both ENGINE settings inside
one try/except so a failure fetching personality_max_tokens_override can cause
trimming_enabled to be reset; change the logic in agent_engine.py to fetch the
two settings independently: call
self._config_resolver.get_bool("engine","personality_trimming_enabled") inside
its own try/except and update trimming_enabled only on success, then call
get_int("engine","personality_max_tokens_override") inside a separate try/except
and update tokens_override only on success; keep MemoryError/RecursionError
re-raised and preserve the existing warning logging behavior (logger.warning
with EXECUTION_ENGINE_ERROR) when either lookup fails so a partial failure does
not overwrite trimming_enabled resolved by the other lookup.

In `@web/src/hooks/useOrgChartData.ts`:
- Around line 101-114: The effect may call polling.start() after the component
has unmounted causing leaked intervals; modify the useEffect around
useCompanyStore.getState().fetchCompanyData() and its downstream
fetchDepartmentHealths() so they check an "isMounted" flag (or an
AbortController) before calling polling.start(), and set that flag to false in
the cleanup (which still calls polling.stop()); specifically, in the promise
.then and .catch handlers for fetchCompanyData() and the .catch for
fetchDepartmentHealths(), guard polling.start() with if (isMounted) {
polling.start() } (or abort the chain) to prevent starting polling after
unmount.

In `@web/src/lib/motion.ts`:
- Around line 72-79: tweenSlow.duration is hardcoded then duplicated as
TRANSITION_SLOW_MS, risking drift; introduce a single shared seconds constant
(e.g., SLOW_SEC or SLOW_SECONDS) and derive both tweenSlow.duration (in seconds)
and TRANSITION_SLOW_MS (milliseconds via multiplication by 1000) from that
constant so updates only happen in one place; update references to use the new
constant and keep symbol names tweenSlow and TRANSITION_SLOW_MS unchanged.

In `@web/src/pages/org-edit/AgentEditDrawer.tsx`:
- Around line 81-101: The handleSave and handleDelete callbacks are currently
unreachable because the UI button is disabled behind the coming-soon gate; add a
brief guard comment/TODO above both function definitions (handleSave and
handleDelete) stating these are intentionally inactive until issue `#1081` lands
and reference `#1081` so future readers know why they appear unused, mirroring the
explanatory comments in the test files.

In `@web/src/pages/org-edit/DepartmentEditDrawer.tsx`:
- Around line 55-87: The Save/Delete handlers and the ConfirmDialog are
unreachable because the Save and Delete buttons are permanently disabled; add
clear TODO comments indicating these are intentionally disabled until backend
CRUD is implemented (reference the issue number `#1081`) instead of removing code:
place a "// TODO: re-enable when `#1081` ships — handlers kept for future CRUD
support" comment immediately above the handleSave and handleDelete useCallback
declarations and above the ConfirmDialog JSX block to make intent explicit and
avoid dead-code confusion; alternatively, if you prefer removal, delete the
handleSave, handleDelete functions and the ConfirmDialog JSX and any associated
state (setDeleting, setDeleteOpen) to eliminate dead code.

In `@web/src/pages/org-edit/DepartmentsTab.tsx`:
- Around line 211-226: Update the copy in DepartmentsTab.tsx so it doesn't
direct users to a disabled "Add Department" action: change the EmptyState
title/description and any under-allocation warning text that currently prompt
creation to instead suggest using "Add Team Pack" or editing existing
departments; update the Button (the one using onClick={() =>
setCreateOpen(true)} and ORG_EDIT_COMING_SOON_TOOLTIP) tooltip/text so it
reflects "Coming soon" rather than instructing users to create a department;
make the same copy adjustments for the other instances in this file that render
EmptyState/Button-like UI (the components using Building2, Plus, EmptyState, and
that setCreateOpen) so messaging consistently points to Add Team Pack / edit
flows until `#1081` is implemented.

---

Duplicate comments:
In `@web/src/components/layout/Sidebar.tsx`:
- Around line 371-378: Replace the inline screen-reader span in Sidebar.tsx with
the shared LiveRegion component: compute the same status message from
wsConnected and wsReconnectExhausted (the current ternary logic) and pass it as
the LiveRegion children/prop so announcements use the shared
debounce/accessibility behavior; reference the LiveRegion component from
web/src/components/ui/LiveRegion and remove the inline <span role="status"
aria-live="polite"> block that uses wsConnected and wsReconnectExhausted.

In `@web/src/components/ui/confirm-dialog.tsx`:
- Around line 92-95: The button's disabled check uses submittingRef.current
which won't trigger re-renders; replace this with a stateful flag or require
callers to pass loading. Change submittingRef to a useState boolean (e.g.,
[submitting, setSubmitting]) and update the onClick handler in the ConfirmDialog
component so it checks submitting || loading, sets setSubmitting(true) before
the async work and setSubmitting(false) in a finally block; update disabled to
disabled={submitting || loading} and remove reliance on submittingRef.current
(or alternatively enforce callers always provide the loading prop and remove
submittingRef usage).

In `@web/src/pages/org/HierarchyEdge.tsx`:
- Around line 71-76: The duration calculation overestimates routed edges by
adding BEND_OFFSET to the full Manhattan distance; instead compute the actual
rendered segment lengths and derive durSec from that. Replace the approxLength
logic in HierarchyEdge (currently using sx, sy, tx, ty, BEND_OFFSET) with a
computed segmentsLength: if the edge is routed (i.e., has a bend at bendX/bendY)
sum the two rendered segment lengths (|sx - bendX| + |sy - bendY| and |tx -
bendX| + |ty - bendY|), otherwise use the direct Manhattan length (|tx - sx| +
|ty - sy|); then use durSec = Math.max(MIN_PARTICLE_DUR_SEC, segmentsLength /
PARTICLE_PX_PER_SEC). Ensure you reference the same bend coordinates used when
rendering the path so particles match the visual path.