feat(embed): ss:aside-empty slot + native empty-sidebar affordance#144
Merged
Conversation
Add a host-overridable ss:aside-empty slot for the sidebar's empty state. When the session list is empty (post-load), it now shows a lightweight native 'Connect an agent' row — the first item of an otherwise-empty list — with a plug icon and one muted helper line, instead of a blank list area. Clicking it scrolls to the empty-board pane (ss:empty) holding the connect instructions. The row reuses .sess row chrome (padding/radius/cursor/hover) so it reads as a real list row; an embedder projects a slot="ss:aside-empty" child to replace the fallback with its own nudge. Once a session exists, neither renders. - Register asideEmpty in SLOTS / SlotName and re-export in embed.d.ts. - Add lucide plug icon; gate the slot on initialLoaded() && no sessions. - e2e: fallback renders, projection replaces it, neither renders with a session.
…on style - Hide the native 'Connect an agent' fallback when readonly (matches the footer connect link and the 'Nothing here yet' readonly empty pane); the slot itself stays mounted so embedders can still project a readonly nudge. - Comment the #onboard scrollIntoView no-op when ss:main is projected. - Align e2e assertion with the reference test (toBeHidden) and type the serveEmbed helper's page param.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The sidebar session list was blank when no sessions existed. It now shows a lightweight native "Connect an agent" row — the first item of an otherwise-empty list — with a plug icon and one muted helper line (Your sessions will appear here once an agent connects.). Clicking it scrolls to the empty-board pane (
ss:empty) that holds the connect instructions.This is wrapped in a new host-overridable
ss:aside-emptyslot, same pattern asss:empty/ss:aside-foot:slot="ss:aside-empty"child to replace the fallback with their own empty-list nudge.Look & feel
Reuses the existing
.sessrow chrome (padding / radius / cursor / hover) so it is visually indistinguishable from a real list row — no border, no box, no CTA button. 13px label in the primary text color, a 16px plug icon in the accent color, and a 12px helper line in the tertiary text token. Flat, sentence case, theme-token colors (light + dark). Generic fallback — no deployment-specific copy or links.Changes
viewer/src/host.ts— registerasideEmpty: "ss:aside-empty"inSLOTS(auto-derivesSlotName).viewer/embed.d.ts— re-export the new slot for typed embedder consumers.viewer/src/icons.tsx— add a Lucideplugicon (PlugIcon), matching the existing inline icon set.viewer/src/App.tsx— wrap the session list empty region in<slot name={SLOTS.asideEmpty}>with anAsideEmptyRowfallback, gated oninitialLoaded() && sessions.length === 0(matches#onboard's no-flash gating).viewer/src/styles.css— minimal, token-based styles for the icon/label/helper; the row itself is.sess.e2e/embed-aside-empty-slot.spec.ts— three chromium scenarios: (a) fallback renders with nothing projected, (b) projected content replaces the fallback through the shadow boundary, (c) neither renders once a session exists.Validation
npm run lint— greennpm run format:check— greennpm run typecheck— green (node + workers + viewer)npm test— green (256/256)npm run build— green (viewer + embed bundles)npm run test:e2e— chromium green (3/3 new tests). WebKit is blocked in this environment by missing system libs (libicu74/libxml2/libflite1); this is pre-existing and affects the existingembed-slots.spec.tswebkit run identically (no passwordless sudo to install them).Changeset
minor— new slot + user-visible affordance.