Skip to content

feat(table-row-actions): inline per-row action buttons across core, Angular & React#4

Merged
mayeedwin merged 10 commits into
mainfrom
feat/table-row-actions
Jul 23, 2026
Merged

feat(table-row-actions): inline per-row action buttons across core, Angular & React#4
mayeedwin merged 10 commits into
mainfrom
feat/table-row-actions

Conversation

@mayeedwin

@mayeedwin mayeedwin commented Jul 23, 2026

Copy link
Copy Markdown
Owner

Adds multiple labeled inline action buttons per table row, and lets domain data-* attributes flow through as action params. Wired end-to-end: core + Angular + React + demo. Also folds in a small docs/demo polish (previously #5).

Core (@conversed/core)

  • New RowAction type ({ label, variant?, action }) and TableRow.actions?: RowAction[]
  • Parser reads inline buttons from a row's data-row-actions cell (excluded from the row's data cells)
  • Any non-reserved data-* attribute on an actionable element becomes a camelCased action param — e.g. data-record-kindparams.recordKind — merged with JSON data-action-params
  • System-prompt guide documents the convention; parser tests added

Renderers

  • Angular and React both render the inline per-row buttons in a trailing actions column, variant-aware (primary), emitting via the action output/onAction and stopping row-click propagation
  • Row-action styles added to the shipped React CSS

Demo

  • New "Pending tasks" preset with a data-row-actions table — buttons fire real Action Protocol events into the inspector
  • System prompt tab: added a copyable raw (non-TS) instruction block (rendered from getSystemPromptInstruction())

Docs (folded in from #5)

  • README: removed the Packages table; moved Documentation to just before License

Verification

  • Core build + tests (9/9), Angular build, React build + DTS + test, demo build/lint — all green
  • Parser confirmed to emit TableRow.actions and the extra data-* params at runtime

Core:
- New RowAction type ({ label, variant?, action }) and TableRow.actions[]
- Parse inline action buttons from a row's data-row-actions cell
- Any non-reserved data-* attr becomes a camelCased action param
  (e.g. data-record-kind -> params.recordKind), merged with data-action-params
- Document the convention in the system prompt; add parser tests

Angular:
- Render the inline per-row action buttons

React renderer support is pending (see follow-up) — core emits
TableRow.actions; the React table renderer does not yet render them.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@gemini-code-assist

Copy link
Copy Markdown

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

@mayeedwin mayeedwin self-assigned this Jul 23, 2026
- React renderer draws the inline per-row action buttons (variant-aware),
  emitting via onAction and stopping row-click propagation — matching Angular
- Add row-action styles to the shipped React CSS
- Demo: new 'Pending tasks' preset with a data-row-actions table

Completes table-row-actions across core + Angular + React.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@mayeedwin mayeedwin changed the title feat(table-row-actions): inline per-row action buttons + data-* params feat(table-row-actions): inline per-row action buttons across core, Angular & React Jul 23, 2026
- README: remove the Packages table; move Documentation to just before License
- Demo guide (System prompt tab): add a copyable raw instruction block for
  non-TypeScript users, rendered from getSystemPromptInstruction() so it stays
  in sync with the library

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
mayeedwin and others added 7 commits July 23, 2026 17:06
- Phone breakpoint (<=600px): topbar wraps, tighter thread/composer padding
- Guide modal fits small screens; tabs scroll horizontally when they overflow
- Keep the version badge visible on mobile

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Give the actions column a fixed width in both header and body so the
flex data columns line up; right-align the buttons. (React + Angular)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- System prompt tab: replace the long raw-instruction preview with Copy +
  Download .txt actions (no need to render the whole block in the dialog)
- Use 100dvh so mobile browser chrome doesn't clip the layout

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Page-level overflow-x guard; min-width:0 on chat/turn/inspector/input so
  wide blocks (tables, code, source) scroll internally instead of widening the page
- Suggestion chips now scroll horizontally (nowrap) instead of wrapping to two rows

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…rder

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The code block's Copy button now emits an AgentActionEvent
(type: copy-code, params.language) via onAction in addition to copying,
so copy-code surfaces in the inspector like the other action types. (React + Angular)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Trim README to a demo-framed overview with the action-type table; shorten
architecture/frameworks/prompts/theming/git_workflow (~53% fewer lines) while
preserving block types, action types, API signatures and theme tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@mayeedwin
mayeedwin merged commit adbcca5 into main Jul 23, 2026
1 check passed
@mayeedwin
mayeedwin deleted the feat/table-row-actions branch July 23, 2026 14:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant