fix(frontend): session rows match the homepage — pin, status icons, sizes - #5843
Conversation
…izes - Pin control: a plain pin with an Unpin tooltip that unpins on click (the home table's behavior), extracted as SessionPinButton and used by both surfaces; the pin-with-a-minus icon is gone. - Status icons: the homepage's kind-glyph-with-status-dot (chat bubble for conversations, clock for automation runs) extracted as SessionStatusIcon and used on the sessions page instead of the bare 8px dot. - Sizes: row title/preview/timestamps/chips move to the homepage's ladder (title text-sm, secondary 13px, icons 18px). - Pinned group in automations mode narrows to trigger-origin sessions; pins keep honoring search/status/agent/archived as before (those filters were already applied server-side via the shared query args). 21/21 unit tests pass in @agenta/sessions.
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe change adds shared session status and pin controls, integrates them into session rows and list cards, updates session list styling, adds Tailwind scanning coverage, and adjusts pinned-session filtering for automation mode. ChangesSession list UI
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Railway Preview Environment
Updated at 2026-08-09T21:18:06.439Z |
Same transparent ::after technique as the sidebar toggle; the h-5 trailing-controls box and the row do not grow. tailwind.config gains the agenta-sessions-ui content path so the package's after:* arbitrary classes are generated.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 78ad3d52-042b-4e55-8b10-792cd409b9d1
📒 Files selected for processing (8)
web/oss/src/components/pages/sessions/components/SessionListCard.tsxweb/oss/tailwind.config.tsweb/packages/agenta-sessions-ui/src/SessionListStates.tsxweb/packages/agenta-sessions-ui/src/SessionPinButton.tsxweb/packages/agenta-sessions-ui/src/SessionRow.tsxweb/packages/agenta-sessions-ui/src/SessionStatusIcon.tsxweb/packages/agenta-sessions-ui/src/index.tsweb/packages/agenta-sessions/src/state/useSessionsList.ts
| /** | ||
| * Pin and unpin as ONE control: a pinned row keeps the same pin, filled, and its tooltip reads | ||
| * "Unpin". A separate unpin glyph made the pinned state look like a fault to undo. | ||
| */ |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Keep implementation comments within the repository limit.
Both sites contain multi-line design rationale instead of short implementation constraints.
web/packages/agenta-sessions-ui/src/SessionPinButton.tsx#L6-L9: Remove the rationale or replace it with one short constraint comment.web/packages/agenta-sessions-ui/src/SessionStatusIcon.tsx#L7-L10: Remove the rationale or replace it with one short constraint comment.
As per coding guidelines, “Keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints such as bugs, races, or ordering requirements.”
📍 Affects 2 files
web/packages/agenta-sessions-ui/src/SessionPinButton.tsx#L6-L9(this comment)web/packages/agenta-sessions-ui/src/SessionStatusIcon.tsx#L7-L10
Source: Coding guidelines
| <Tip title={status.label}> | ||
| <span | ||
| aria-label={status.label} | ||
| className="relative mt-0.5 flex shrink-0 text-colorTextTertiary" | ||
| > | ||
| {automation ? <ClockIcon size={18} /> : <ChatCircleIcon size={18} />} | ||
| <span | ||
| className={clsx( | ||
| "absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full border border-solid border-colorBgContainer", | ||
| status.dotClassName, | ||
| status.pulse && "motion-safe:animate-pulse", | ||
| )} | ||
| /> | ||
| </span> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="web/packages/agenta-sessions-ui/src/SessionStatusIcon.tsx"
python - "$file" <<'PY'
from pathlib import Path
import sys
source = Path(sys.argv[1]).read_text()
assert 'role="img"' in source, "Expected SessionStatusIcon to expose an image role"
assert 'aria-label={status.label}' in source, "Expected SessionStatusIcon to expose status.label"
PYRepository: Agenta-AI/agenta
Length of output: 294
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="web/packages/agenta-sessions-ui/src/SessionStatusIcon.tsx"
printf '--- file excerpt ---\n'
sed -n '1,80p' "$file" | cat -n
printf '\n--- relevant source strings ---\n'
rg -n 'aria-label=|role=|<span|Tip ' "$file" || trueRepository: Agenta-AI/agenta
Length of output: 245
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="web/packages/agenta-sessions-ui/src/SessionStatusIcon.tsx"
printf '%s\n' '--- file excerpt ---'
sed -n '1,90p' "$file" | cat -n
printf '%s\n' ''
printf '%s\n' '--- relevant source strings ---'
rg -n 'aria-label=|role=|<span|Tip ' "$file" || trueRepository: Agenta-AI/agenta
Length of output: 1815
🌐 Web query:
MDN ARIA img role status aria-label accessible name
💡 Result:
The ARIA img role is used to define an element as an image that should be treated as a single entity by assistive technologies [1][2]. While historically common, the image role is now the preferred synonym for img in ARIA 1.3 [3][4][5]. For elements assigned the img (or image) role, an accessible name is required [1][2]. This name is typically provided using aria-label or aria-labelledby [1][2]: 1. aria-label: Use this attribute to provide a direct text string as the accessible name when no suitable visible text is available in the DOM [6][7]. 2. aria-labelledby: Use this attribute to reference an existing element on the page that serves as the label (e.g., a visible caption) [1][7]. This is generally preferred over aria-label when a visible label exists, as it avoids duplicating text [6][7]. When an element has both aria-labelledby and aria-label defined, aria-labelledby takes precedence for the calculated accessible name [7]. It is important to note that when a container is given the img or image role, screen readers typically treat the container as a black box and may ignore the individual contents inside; therefore, the accessible name (provided via aria-label or aria-labelledby) must be comprehensive enough to describe the entire visual content [1][2]. For standard HTML <img> elements, it is generally recommended to use the native alt attribute rather than ARIA roles and labels whenever possible, as native HTML semantics are preferred over ARIA [4][5].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role
- 2: https://github.com/mdn/content/blob/main/files/en-us/web/accessibility/aria/reference/roles/img_role/index.md
- 3: Deprecating ARIA
imgrole in favor ofimagemdn/content#28170 - 4: https://www.w3.org/TR/2024/REC-html-aria-20241213/
- 5: https://www.w3.org/TR/2026/REC-html-aria-20260415/
- 6: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
- 7: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby
Expose an accessible role for the icon glyph.
The outer span provides only an accessible name on a generic element. Add role="img" to that span so assistive technology treats status.label as the name for the icon and status dot as one image.
1 participant
Four of Mahmoud's five sessions-page items (the fifth was an investigation, answered below).
Pin behavior
The sessions page unpinned via a pin-with-a-minus icon. The home table's behavior is the right one: a pinned row shows a plain pin, hover says "Unpin", click unpins. That control is now a shared
SessionPinButtonused by both surfaces.Status icons
The homepage's row glyph (chat bubble for conversations, clock for automation runs, status as a colored dot on its shoulder) is now a shared
SessionStatusIcon, and the sessions page uses it instead of its bare 8px dot. The "invisible idle" mystery: idle's dot isbg-colorBorder, a color designed to be barely-there; on the shoulder of a glyph it reads as intended.Sizes
Row title, preview, timestamp, and chips move to the homepage's ladder (title
text-sm, secondary 13px, icons 18px) — interim alignment ahead of the global type-scale work.Pins vs filters (the investigated bug)
Pins DO honor search, agent, status, and archived — those were already applied server-side to the pinned query. The mode switch was the exception, half-deliberate: a pinned automation run shows in the default view (kept — your pins stay visible), but the automations view also showed pinned CONVERSATIONS (fixed — that view now narrows pins to trigger-origin sessions).
Base
Stacked on #5833 (same files). 21/21 unit tests pass in
@agenta/sessions.