Skip to content

[feat] Redesign the Skills page on /m as the shared list, with a card view for ListTable - #6890

Merged
ashrafchowdury merged 63 commits into
release/v0.118.5from
feat/mobile-skills-page-redesign
Sep 17, 2026
Merged

ashrafchowdury merged 63 commits into
release/v0.118.5from
feat/mobile-skills-page-redesign

Conversation

@ashrafchowdury

@ashrafchowdury ashrafchowdury commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

Context

The Skills page on /m was a one-off: the desktop's card gallery under a search box and an "Archived skills" link, unlike the Agents and Automations lists next to it. There was no way to filter, group, or act on a skill from the list, and every other list on /m already shares one table frame.

Changes

ListTable learns a card view (@agenta/ui/list-table). view="grid" draws the same groups, headings and collapse as cards; renderCard draws a card's contents and the frame owns the tile (border, radius, hover, open affordance, a card-shaped skeleton). Columns are container-driven (cardMinWidth, auto-fill), so one list fits a phone, a pane and a page. groupActions puts a per-group action on a heading's right edge. ListTableViewToggle is the list/cards switch. List view is unchanged for every existing consumer.

Skills on /m becomes the shared list. Title row with New skill, a ListTableToolbar with search, the shared FilterMenu (Source, Status, Used by, Group by) and the view toggle. Rows: skill mark with the name's initials (tinted like an agent chip), name and description, Created by or Source (depending on grouping), Used by, Last updated, and a kebab (Open, Check for updates, Archive/Restore). A repository heading carries "Check updates", then "Update N skills". Skeleton, empty, no-match and error states are designed.

The detail drawer is editable from the start. No Edit step; Discard/Save sit in the footer, inert until the draft differs from the head. The header carries the name, provenance behind an info tooltip, a faded "Used by N agents" whose popover lists the agents as links, and a kebab whose popover offers Add to agent (the home page's agent picker as a flyout, ticking agents in place) and Archive (an alert scoped to the drawer). The pick-agents step is gone.

New skill reads like New agent. Three rows with a tinted tile, a name and a hint: Write from scratch, Upload, Import from a repo. Upload opens the file picker at once; one skill lands in the editor prefilled, several become a pick list that imports them together. The old full-drawer dropzone (SkillUploadPanel) is gone. Empty required fields redden only after Create or Save is pressed.

Import from a repo. The URL field stays on top once scanned, the found skills sit under it as a labelled section with square checkboxes, the scan shows a skeleton, and a failed scan reads as an alert carrying the server's own sentence instead of the raw client error.

Inline skills in an agent's config. "Publish to registry" moves from the row into the skill drawer's footer, and publishes the draft as edited.

Shared helpers. checkSkillUpdates / applySkillUpdates in @agenta/skills batch the per-skill calls once for the desktop refresh button and the /m hook. useSkillCreateEntry in @agenta/skills-ui holds the create drawer's open/upload state for its three hosts. AgentPickerPanel is the agent picker's panel on its own, for a host with its own popover.

Small API addition. Registry skills now carry created_by_id, so a list grouped by source can name the author instead of repeating the heading.

Tests

  • Verified in the browser on /m at desktop and 375px, light and dark: both views, filters and reset, group collapse, archive and restore, check and apply an upstream update, row and card open the drawer, agent links navigate, upload of one and of several skills, repo scan success and failure, publish from the inline drawer footer, the home page picker after the panel extraction.
  • Agents, Sessions and Automations lists unchanged (list view only).
  • Lint and typecheck not run yet (asked to hold). Storybook story added for ListTable (list, grid, loading, empty); the SkillUploadPanel story is removed with the component.
  • Stacked on [feat] Redesign the Files pane on /m with list view, writes and autosave editing #6876, which also touches ListTable.tsx; this PR's diff is only its own commits.

What to QA

  • /m Skills: switch list and cards, reload. The view survives; the filters reset.
  • Filter Status to Archived, archive a skill from a row kebab, restore it from the same menu. It moves between the two views.
  • Group by Source: the second column reads Created by. Group by None: it reads Source.
  • On a repository heading press Check updates. Rows with an update show a mark; Update N skills applies them and the row shows a check.
  • Open a skill: edit the description, Save changes enables, Discard resets. Hover "Used by N agents", click an agent, you land on that agent.
  • Kebab in the drawer, hover Add to agent: the picker lists agents with a check on the ones already using it.
  • New skill → Upload: pick a single SKILL.md, the editor opens filled. Pick a zip holding several skills: a list appears, untick one, Import N skills creates the rest.
  • New skill → Write: press Create skill on the empty form. Name, description and body redden; they stay neutral before the press.
  • Import from a repo: a bad URL shows an alert with the server's message; a good one shows a skeleton, then the skills under the field.
  • Agent config → an inline skill: the drawer footer's left holds Publish to registry; clearing the name reddens the field.
  • Regression: Agents and Automations lists look and behave as before. Desktop Skills registry: Check updates on a source still reports and applies.

Demo

Outstanding: this is a draft; a capture from the running app follows before review.

@vercel

vercel Bot commented Sep 16, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
agenta-documentation Ready Ready Preview Sep 16, 2026 2:08pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

📝 Summary

Summary by CodeRabbit

  • New Features
    • Redesigned the Skills registry with list and card views, grouping, search, filtering, archived-skill visibility, and clearer loading, empty, error, and no-match states.
    • Added actions for opening, archiving/restoring, assigning skills to agents, and checking or applying imported-skill updates.
    • Improved skill creation and repository imports, including multi-skill selection and batch import.
    • Added creator attribution, descriptive skill avatars, and clearer status labels.
    • Added unsaved-edit protection, revision-load retry handling, and publishing from the skill editor.
    • Added responsive list-table card views and reusable view controls.

Walkthrough

The pull request adds skill author metadata, shared list and grid rendering, batched skill APIs, mobile registry workflows, upload-based creation, editable skill drawers, agent association, and inline skill publishing.

Changes

Skills registry and editor redesign

Layer / File(s) Summary
Registry metadata
api/oss/src/core/skills/*, web/packages/agenta-skills/src/core/schema.ts
Skill registry items now accept and populate an optional workflow creator ID.
Shared list and grid rendering
web/packages/agenta-ui/src/list-table/*, web/packages/agenta-ui/src/agent-icon/*, web/storybook/stories/ListTable.stories.tsx
ListTable supports list and grid modes, card rendering, group actions, shared keyboard handlers, loading states, view toggling, and shared skill marks.
Skill association and update APIs
web/packages/agenta-skills/src/api/index.ts, web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx
Skill association supports removal and shared revision commits. Update checks and applications support batched workflow IDs and per-item outcomes.
Mobile skills registry
web/mobile/src/features/skills/*
The mobile registry uses derived filters, source grouping, responsive rows and cards, archive actions, agent links, update controls, and explicit loading and empty states.
Creation and import flow
web/packages/agenta-skills-ui/*, web/oss/src/components/pages/skills/SkillsPage.tsx
Upload scans pass through a shared creation hook into the drawer, which prefills one skill or provides a selectable multi-skill import list.
Skill editor and agent association
web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx, web/packages/agenta-skills-ui/src/SkillAgentPicker.tsx, web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx, web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx
The detail drawer is always editable, supports draft save and discard, archive and restore actions, agent association, and usage navigation.
Inline skill publishing and validation
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/*
Publishing moved to the skill drawer footer and uses the current draft. Required-field feedback now uses submit-controlled form state.

Priority: ➖ Normal

Estimated code review effort: 5 (Critical) | ~90 minutes

Merge Risk: 🟡 Moderate · up to 2c272

The change should not merge yet: type checking can fail, agent updates may appear successful before completing, and some skill filtering and editing interactions produce incorrect results.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 39.29% which is insufficient. The required threshold is 60.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 28 functions across 48 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the primary change: redesigning the mobile Skills page as a shared ListTable with card support.
Description check ✅ Passed The description is detailed and directly explains the Skills page redesign, related shared UI changes, workflows, testing, and QA scope.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 2
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🛠️ Fix failing CI checks 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@ashrafchowdury
ashrafchowdury force-pushed the feat/mobile-skills-page-redesign branch from 86e86fe to aa2a27d Compare September 16, 2026 18:22
@ashrafchowdury
ashrafchowdury added this pull request to stack #6900 September 16, 2026 18:22
@ashrafchowdury
ashrafchowdury force-pushed the feat/mobile-skills-page-redesign branch from eba3ac2 to 160c0a2 Compare September 16, 2026 18:46
@ashrafchowdury
ashrafchowdury removed this pull request from stack #6900 September 16, 2026 18:47
@ashrafchowdury
ashrafchowdury marked this pull request as ready for review September 16, 2026 18:47
@ashrafchowdury
ashrafchowdury added this pull request to stack #6901 September 16, 2026 18:49
@github-actions

github-actions Bot commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

Railway Preview Environment

Status Destroyed (PR closed)

Updated at 2026-09-17T13:26:45.237Z

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 12

🧹 Nitpick comments (1)
web/packages/agenta-skills-ui/src/useSkillCreateEntry.ts (1)

5-10: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Keep only concise comments for non-obvious constraints.

web/AGENTS.md makes this a hard rule: comments must be at most one short line, must not restate the code, and longer comments are allowed only for genuinely surprising constraints.

  • Reduce useSkillCreateEntry.ts to one short line documenting only that Write clears the upload before opening a blank editor.
  • Remove the comments in SkillImportDrawer.tsx at lines 214-215, 238, 261, 279-280, and 369-370. They describe visible layout or styling rather than a non-obvious constraint.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Advanced

Run ID: 7f9e977f-2da7-48ec-8a93-e3bd4e231e9e

📥 Commits

Reviewing files that changed from the base of the PR and between 4e91b85 and 666b28a.

📒 Files selected for processing (48)
  • api/oss/src/core/skills/dtos.py
  • api/oss/src/core/skills/service.py
  • web/mobile/src/features/skills/SkillActionsMenu.tsx
  • web/mobile/src/features/skills/SkillArchivedTag.tsx
  • web/mobile/src/features/skills/SkillCardBody.tsx
  • web/mobile/src/features/skills/SkillFilterMenu.tsx
  • web/mobile/src/features/skills/SkillListScreen.tsx
  • web/mobile/src/features/skills/SkillListTable.tsx
  • web/mobile/src/features/skills/SkillRowCells.tsx
  • web/mobile/src/features/skills/SkillSourceUpdateAction.tsx
  • web/mobile/src/features/skills/SkillUpdateCell.tsx
  • web/mobile/src/features/skills/skillListView.ts
  • web/mobile/src/features/skills/states/SkillsEmpty.tsx
  • web/mobile/src/features/skills/states/SkillsError.tsx
  • web/mobile/src/features/skills/states/SkillsNoMatch.tsx
  • web/mobile/src/features/skills/useSkillActions.ts
  • web/mobile/src/features/skills/useSkillUpdates.ts
  • web/oss/src/components/pages/skills/SkillsPage.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ConfigItemList.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemDescriptors.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemKinds.tsx
  • web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx
  • web/packages/agenta-entity-ui/src/agent/index.ts
  • web/packages/agenta-skills-ui/src/NewSkillMenuButton.tsx
  • web/packages/agenta-skills-ui/src/SkillAgentPicker.tsx
  • web/packages/agenta-skills-ui/src/SkillCard.tsx
  • web/packages/agenta-skills-ui/src/SkillCreateDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillImportDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillPickerDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillPickerHost.tsx
  • web/packages/agenta-skills-ui/src/SkillUploadPanel.tsx
  • web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx
  • web/packages/agenta-skills-ui/src/index.ts
  • web/packages/agenta-skills-ui/src/useSkillCreateEntry.ts
  • web/packages/agenta-skills/src/api/index.ts
  • web/packages/agenta-skills/src/core/schema.ts
  • web/packages/agenta-ui/src/components/ui/checkbox.tsx
  • web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx
  • web/packages/agenta-ui/src/list-table/ListTable.tsx
  • web/packages/agenta-ui/src/list-table/ListTableViewToggle.tsx
  • web/packages/agenta-ui/src/list-table/index.ts
  • web/packages/agenta-ui/src/list-table/types.ts
  • web/storybook/stories/ListTable.stories.tsx
  • web/storybook/stories/skills-ui/SkillUploadPanel.stories.tsx
💤 Files with no reviewable changes (3)
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ConfigItemList.tsx
  • web/storybook/stories/skills-ui/SkillUploadPanel.stories.tsx
  • web/packages/agenta-skills-ui/src/SkillUploadPanel.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

Comment thread web/mobile/src/features/skills/SkillFilterMenu.tsx Outdated
Comment thread web/mobile/src/features/skills/SkillListTable.tsx Outdated
Comment thread web/mobile/src/features/skills/useSkillUpdates.ts
Comment thread web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx Outdated
Comment thread web/packages/agenta-skills-ui/src/SkillCreateDrawer.tsx
Comment thread web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
Comment thread web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
Comment thread web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx
Comment thread web/packages/agenta-ui/src/list-table/types.ts Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Advanced

Run ID: 430a014c-49c4-46d5-8493-e3c1553ac013

📥 Commits

Reviewing files that changed from the base of the PR and between 666b28a and 487f964.

📒 Files selected for processing (10)
  • web/mobile/src/features/skills/SkillFilterMenu.tsx
  • web/mobile/src/features/skills/SkillListTable.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
  • web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx
  • web/packages/agenta-skills-ui/src/SkillAgentPicker.tsx
  • web/packages/agenta-skills-ui/src/SkillCreateDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
  • web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx
  • web/packages/agenta-skills-ui/src/useSkillCreateEntry.ts
  • web/packages/agenta-ui/src/list-table/types.ts
🚧 Files skipped from review as they are similar to previous changes (9)
  • web/mobile/src/features/skills/SkillListTable.tsx
  • web/packages/agenta-skills-ui/src/useSkillCreateEntry.ts
  • web/packages/agenta-skills-ui/src/SkillAgentPicker.tsx
  • web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx
  • web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillCreateDrawer.tsx
  • web/mobile/src/features/skills/SkillFilterMenu.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
  • web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.

Comment on lines +43 to +60
export type ListTableViewProps<Row> =
| {
/**
* Same groups, same headings, same open and collapse — cards instead of rows.
* `"list"` by default, so a consumer that never asks for cards never sees them.
*/
view?: "list"
renderCard?: (row: Row) => ReactNode
}
| {
view: "grid"
/**
* A card's CONTENTS. The frame owns the tile — border, radius, padding, hover, the
* open affordance — the way it owns a row's, so a consumer draws what is inside it
* and nothing else.
*/
renderCard: (row: Row) => ReactNode
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🔎 Supported by static analysis

🏁 Script executed:

sed -n '35,90p' web/packages/agenta-ui/src/list-table/types.ts
sed -n '105,145p' web/mobile/src/features/skills/SkillListTable.tsx
rg -n 'interface SkillListTableProps|type SkillListTableProps|<SkillListTable|view:' web/mobile/src/features/skills/SkillListTable.tsx web/mobile/src/features/skills/SkillListScreen.tsx web/storybook/stories/ListTable.stories.tsx

Repository: Agenta-AI/agenta

Length of output: 4040


🏁 Script executed:

#!/bin/bash
set -eu
printf '%s\n' '--- SkillListTable imports and signature ---'
sed -n '1,95p' web/mobile/src/features/skills/SkillListTable.tsx
printf '%s\n' '--- ListTable declarations/usages ---'
rg -n --glob '*.ts' --glob '*.tsx' 'export (const|function) ListTable|function ListTable|const ListTable|ListTableProps' web/packages/agenta-ui/src/list-table web/mobile/src/features/skills/SkillListTable.tsx
printf '%s\n' '--- component implementation ---'
sed -n '1,120p' web/packages/agenta-ui/src/list-table/ListTable.tsx

Repository: Agenta-AI/agenta

Length of output: 10385


🏁 Script executed:

set -eu
rg -n --glob '*.ts' --glob '*.tsx' 'ListTableProps|export .*ListTable|function ListTable|const ListTable' web/packages/agenta-ui/src web/mobile/src/features/skills/SkillListTable.tsx

Repository: Agenta-AI/agenta

Length of output: 1746


Allow a runtime ListTableView when renderCard is present.

SkillListTable passes view: ListTableView directly to ListTable and always supplies renderCard. ListTable accepts ListTableProps<Row> without another overload or narrowing. The current union accepts only view?: "list" or view: "grid", so TypeScript rejects this props object because it satisfies neither branch.

 export type ListTableViewProps<Row> =
     | {
           view?: "list"
           renderCard?: (row: Row) => ReactNode
       }
     | {
-          view: "grid"
+          view: ListTableView
           renderCard: (row: Row) => ReactNode
       }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export type ListTableViewProps<Row> =
| {
/**
* Same groups, same headings, same open and collapse cards instead of rows.
* `"list"` by default, so a consumer that never asks for cards never sees them.
*/
view?: "list"
renderCard?: (row: Row) => ReactNode
}
| {
view: "grid"
/**
* A card's CONTENTS. The frame owns the tile — border, radius, padding, hover, the
* open affordance the way it owns a row's, so a consumer draws what is inside it
* and nothing else.
*/
renderCard: (row: Row) => ReactNode
}
export type ListTableViewProps<Row> =
| {
/**
* Same groups, same headings, same open and collapse cards instead of rows.
* `"list"` by default, so a consumer that never asks for cards never sees them.
*/
view?: "list"
renderCard?: (row: Row) => ReactNode
}
| {
view: ListTableView
/**
* A card's CONTENTS. The frame owns the tile — border, radius, padding, hover, the
* open affordance the way it owns a row's, so a consumer draws what is inside it
* and nothing else.
*/
renderCard: (row: Row) => ReactNode
}

@ashrafchowdury
ashrafchowdury force-pushed the feat/mobile-files-pane-redesign branch from 9bf060c to bdb1fa9 Compare September 17, 2026 10:18
@ashrafchowdury
ashrafchowdury force-pushed the feat/mobile-skills-page-redesign branch 2 times, most recently from cd90fbc to b885e53 Compare September 17, 2026 11:18

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2


ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Advanced

Run ID: 17b5ff87-f8c0-4447-9b8a-7af0f1c0d8e7

📥 Commits

Reviewing files that changed from the base of the PR and between 487f964 and 89f74a8.

📒 Files selected for processing (51)
  • api/oss/src/core/skills/dtos.py
  • api/oss/src/core/skills/service.py
  • web/mobile/src/features/skills/SkillActionsMenu.tsx
  • web/mobile/src/features/skills/SkillArchivedTag.tsx
  • web/mobile/src/features/skills/SkillCardBody.tsx
  • web/mobile/src/features/skills/SkillFilterMenu.tsx
  • web/mobile/src/features/skills/SkillListScreen.tsx
  • web/mobile/src/features/skills/SkillListTable.tsx
  • web/mobile/src/features/skills/SkillRowCells.tsx
  • web/mobile/src/features/skills/SkillSourceUpdateAction.tsx
  • web/mobile/src/features/skills/SkillUpdateCell.tsx
  • web/mobile/src/features/skills/skillListView.ts
  • web/mobile/src/features/skills/states/SkillsEmpty.tsx
  • web/mobile/src/features/skills/states/SkillsError.tsx
  • web/mobile/src/features/skills/states/SkillsNoMatch.tsx
  • web/mobile/src/features/skills/useSkillActions.ts
  • web/mobile/src/features/skills/useSkillUpdates.ts
  • web/oss/src/components/pages/skills/SkillsPage.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ConfigItemList.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemDescriptors.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemKinds.tsx
  • web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx
  • web/packages/agenta-entity-ui/src/agent/index.ts
  • web/packages/agenta-skills-ui/src/NewSkillMenuButton.tsx
  • web/packages/agenta-skills-ui/src/SkillAgentPicker.tsx
  • web/packages/agenta-skills-ui/src/SkillCard.tsx
  • web/packages/agenta-skills-ui/src/SkillCreateDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillImportDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillPickerDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillPickerHost.tsx
  • web/packages/agenta-skills-ui/src/SkillUploadPanel.tsx
  • web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx
  • web/packages/agenta-skills-ui/src/index.ts
  • web/packages/agenta-skills-ui/src/useSkillCreateEntry.ts
  • web/packages/agenta-skills/src/api/index.ts
  • web/packages/agenta-skills/src/core/schema.ts
  • web/packages/agenta-ui/src/agent-icon/index.ts
  • web/packages/agenta-ui/src/agent-icon/skillMark.ts
  • web/packages/agenta-ui/src/components/ui/checkbox.tsx
  • web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx
  • web/packages/agenta-ui/src/list-table/ListTable.tsx
  • web/packages/agenta-ui/src/list-table/ListTableViewToggle.tsx
  • web/packages/agenta-ui/src/list-table/index.ts
  • web/packages/agenta-ui/src/list-table/types.ts
  • web/storybook/stories/ListTable.stories.tsx
  • web/storybook/stories/skills-ui/SkillPickerDrawer.stories.tsx
  • web/storybook/stories/skills-ui/SkillUploadPanel.stories.tsx
💤 Files with no reviewable changes (3)
  • web/storybook/stories/skills-ui/SkillUploadPanel.stories.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ConfigItemList.tsx
  • web/packages/agenta-skills-ui/src/SkillUploadPanel.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/packages/agenta-skills/src/core/schema.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

Comment on lines +219 to +223
const headValue = useMemo(() => toFormValue(head?.skill), [head])
const dirty = useMemo(
() => editBaseId !== null && JSON.stringify(draft) !== JSON.stringify(headValue),
[draft, editBaseId, headValue],
)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Compare the draft to the head by value, not by serialized shape.

headValue always carries description: "" and files: [], because toFormValue fills both defaults. SkillFormView removes a key instead of storing an empty value: set deletes the field when the new value is "" (see SkillFormView.tsx lines 266-279), and setFiles deletes files when the list becomes empty.

So a user who types in Description and then clears it again produces draft without a description key. JSON.stringify(draft) !== JSON.stringify(headValue) is then true although the content is unchanged. Two consequences follow: the drawer asks "Discard changes?" on close, and Save stays enabled and commits a revision identical to the head.

Normalize both sides before comparing.

Proposed fix
-    const headValue = useMemo(() => toFormValue(head?.skill), [head])
-    const dirty = useMemo(
-        () => editBaseId !== null && JSON.stringify(draft) !== JSON.stringify(headValue),
-        [draft, editBaseId, headValue],
-    )
+    const headValue = useMemo(() => toFormValue(head?.skill), [head])
+    // The form drops a key rather than storing an empty value, so compare the normalized
+    // shapes — otherwise "typed then cleared" reads as an edit.
+    const dirty = useMemo(
+        () =>
+            editBaseId !== null &&
+            JSON.stringify(toFormValue(draft)) !== JSON.stringify(headValue),
+        [draft, editBaseId, headValue],
+    )
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const headValue = useMemo(() => toFormValue(head?.skill), [head])
const dirty = useMemo(
() => editBaseId !== null && JSON.stringify(draft) !== JSON.stringify(headValue),
[draft, editBaseId, headValue],
)
const headValue = useMemo(() => toFormValue(head?.skill), [head])
// The form drops a key rather than storing an empty value, so compare the normalized
// shapes — otherwise "typed then cleared" reads as an edit.
const dirty = useMemo(
() =>
editBaseId !== null &&
JSON.stringify(toFormValue(draft)) !== JSON.stringify(headValue),
[draft, editBaseId, headValue],
)

setBusy(true)
try {
await write()
setChanged(true)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Wait for the actual agent write before marking the drawer as changed.

SkillPickerHost.handleAdd and handleRemove do not return the promises from onAdd and onRemove. If either callback is asynchronous, Line 114 marks success and releases busy before the write finishes. A rejected write then bypasses this try/finally flow.

Return both parent callback results from SkillPickerHost.

@ashrafchowdury
ashrafchowdury force-pushed the feat/mobile-files-pane-redesign branch from d5fe4f0 to d475953 Compare September 17, 2026 12:21
The shared list frame gains a grid view over the same groups, headings and
collapse: renderCard draws a card's contents and the frame owns the tile —
border, radius, open affordance, a card-shaped skeleton — the way it owns a
row's. Columns are container-driven (auto-fill on cardMinWidth), so one
list fits a phone, a pane and a page without breakpoints.

groupActions puts a per-group action at a heading's right edge, a sibling
of the collapse button rather than a button inside it. ListTableViewToggle
is the icon-only list/cards switch at the toolbar's 32px rung.

List view is unchanged for every existing consumer.
The registry is the shared ListTable — the frame the agents and
automations lists use — with this app's columns, and the first list on
/m to offer the frame's card view: the same groups drawn as tiles,
switched from the toolbar.

Search sits in a ListTableToolbar beside the shared FilterMenu carrying
Source, Status, Used by and Group by. A registry item becomes a row in
one place, from the same sections the desktop registry reads, so a row
and a card describe a skill the same way.

Each row carries a kebab — Open, Check for updates (imported only),
Archive / Restore — and a repository heading carries the one action that
belongs to the group: a read-only check, then Update N skills. Every
state is designed: skeleton in both views, empty, no-match, and a failed
fetch with a retry.
…olumn keeps one width

An Update button beside the kebab widened its own row's actions track and
pushed that row's cells off the others'. The row now shows an icon at the
kebab's size (and a check once applied); the card keeps the word.
…kill's own initials

Ink on a tint derived from the origin's colour, through the same helper
the agent icon chip uses, so a skill's mark beside an agent's reads as
the same kind of thing. The letters are the name's initials — "sd" for
shoot-demo-video — so a column of marks tells skills apart.
A list that groups skills by their source has nothing left to say in the
source column; the author is the next thing a reader asks.
Grouped by source the heading already says where a skill came from, so
the provenance column — and a card's footer — read the creator instead,
resolved through the same owners roster the agents list uses.
The design's hover is a lighter border and a soft shadow. A shadow is
nearly invisible on a dark surface, so dark mode adds the fill lift a
row gets and a deeper shadow.
…actually have; the import skeleton's box is square
…; the drawer's popovers portal into its panel so their lists scroll under the sheet's lock
…skill back off it; the picker's rows are no longer inert
…nd a batch import drops what landed from its retry set
… subagent rows; the header, its count and Add all go
…arch, closes the picker and opens the editor; Done waits for a change; SkillAvatar takes a className
… for the registry avatar and an agent config's skill rows
@ashrafchowdury
ashrafchowdury removed this pull request from stack #6901 September 17, 2026 13:08
@ashrafchowdury
ashrafchowdury force-pushed the feat/mobile-skills-page-redesign branch from 89f74a8 to 2c272ab Compare September 17, 2026 13:09
@ashrafchowdury
ashrafchowdury added this pull request to stack #6931 September 17, 2026 13:09

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx (1)

219-223: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

The draft still compares by serialized shape, not by value.

headValue always carries description: "" and files: []. SkillFormView deletes a key instead of storing an empty value. A user who types in Description and then clears it produces a draft without a description key. dirty then stays true although the content equals the head. The drawer asks "Discard changes?" on close, and Save commits a revision identical to the head.

Normalize both sides before comparing.

Proposed fix
     const headValue = useMemo(() => toFormValue(head?.skill), [head])
+    // The form drops a key rather than storing an empty value, so compare normalized shapes —
+    // otherwise "typed then cleared" reads as an edit.
     const dirty = useMemo(
-        () => editBaseId !== null && JSON.stringify(draft) !== JSON.stringify(headValue),
+        () =>
+            editBaseId !== null &&
+            JSON.stringify(toFormValue(draft)) !== JSON.stringify(headValue),
         [draft, editBaseId, headValue],
     )

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Advanced

Run ID: 17a4f205-b607-462a-9005-e17611cb9a98

📥 Commits

Reviewing files that changed from the base of the PR and between 89f74a8 and 2c272ab.

📒 Files selected for processing (51)
  • api/oss/src/core/skills/dtos.py
  • api/oss/src/core/skills/service.py
  • web/mobile/src/features/skills/SkillActionsMenu.tsx
  • web/mobile/src/features/skills/SkillArchivedTag.tsx
  • web/mobile/src/features/skills/SkillCardBody.tsx
  • web/mobile/src/features/skills/SkillFilterMenu.tsx
  • web/mobile/src/features/skills/SkillListScreen.tsx
  • web/mobile/src/features/skills/SkillListTable.tsx
  • web/mobile/src/features/skills/SkillRowCells.tsx
  • web/mobile/src/features/skills/SkillSourceUpdateAction.tsx
  • web/mobile/src/features/skills/SkillUpdateCell.tsx
  • web/mobile/src/features/skills/skillListView.ts
  • web/mobile/src/features/skills/states/SkillsEmpty.tsx
  • web/mobile/src/features/skills/states/SkillsError.tsx
  • web/mobile/src/features/skills/states/SkillsNoMatch.tsx
  • web/mobile/src/features/skills/useSkillActions.ts
  • web/mobile/src/features/skills/useSkillUpdates.ts
  • web/oss/src/components/pages/skills/SkillsPage.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ConfigItemList.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemDescriptors.tsx
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemKinds.tsx
  • web/packages/agenta-entity-ui/src/agent/AgentPicker.tsx
  • web/packages/agenta-entity-ui/src/agent/index.ts
  • web/packages/agenta-skills-ui/src/NewSkillMenuButton.tsx
  • web/packages/agenta-skills-ui/src/SkillAgentPicker.tsx
  • web/packages/agenta-skills-ui/src/SkillCard.tsx
  • web/packages/agenta-skills-ui/src/SkillCreateDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillDetailDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillImportDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillPickerDrawer.tsx
  • web/packages/agenta-skills-ui/src/SkillPickerHost.tsx
  • web/packages/agenta-skills-ui/src/SkillUploadPanel.tsx
  • web/packages/agenta-skills-ui/src/SourceRefreshButton.tsx
  • web/packages/agenta-skills-ui/src/index.ts
  • web/packages/agenta-skills-ui/src/useSkillCreateEntry.ts
  • web/packages/agenta-skills/src/api/index.ts
  • web/packages/agenta-skills/src/core/schema.ts
  • web/packages/agenta-ui/src/agent-icon/index.ts
  • web/packages/agenta-ui/src/agent-icon/skillMark.ts
  • web/packages/agenta-ui/src/components/ui/checkbox.tsx
  • web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx
  • web/packages/agenta-ui/src/list-table/ListTable.tsx
  • web/packages/agenta-ui/src/list-table/ListTableViewToggle.tsx
  • web/packages/agenta-ui/src/list-table/index.ts
  • web/packages/agenta-ui/src/list-table/types.ts
  • web/storybook/stories/ListTable.stories.tsx
  • web/storybook/stories/skills-ui/SkillPickerDrawer.stories.tsx
  • web/storybook/stories/skills-ui/SkillUploadPanel.stories.tsx
💤 Files with no reviewable changes (3)
  • web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ConfigItemList.tsx
  • web/storybook/stories/skills-ui/SkillUploadPanel.stories.tsx
  • web/packages/agenta-skills-ui/src/SkillUploadPanel.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

Comment on lines +30 to +31
export const ALL_SOURCES = "all"
export const PROJECT_SOURCE = "project"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Namespace repository filter values.

ALL_SOURCES and PROJECT_SOURCE share the raw string namespace with repository labels. A repository named all selects all rows. A repository named project selects project-owned rows.

Prefix repository values or use a discriminated source value before matching and persistence.

@ashrafchowdury
ashrafchowdury removed this pull request from stack #6931 September 17, 2026 13:25
@ashrafchowdury
ashrafchowdury changed the base branch from feat/mobile-files-pane-redesign to release/v0.118.5 September 17, 2026 13:26
@ashrafchowdury
ashrafchowdury merged commit 07fa279 into release/v0.118.5 Sep 17, 2026
70 of 73 checks passed
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