feat(frontend): Template cards, a gallery rail, and a template detail page - #5774
feat(frontend): Template cards, a gallery rail, and a template detail page#5774ardaerzin wants to merge 1 commit into
Conversation
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR adds an agent-template detail page and route. The gallery now navigates to template details instead of opening the setup drawer. Template cards and grids use updated responsive layouts and spacing. ChangesAgent template detail flow
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant TemplatesGallery
participant TemplateDetailPage
participant TemplateDetail
TemplatesGallery->>TemplateDetailPage: navigate with template key
TemplateDetailPage->>TemplateDetail: pass normalized template key
TemplateDetail->>TemplateDetail: resolve and render template details
TemplateDetail-->>TemplatesGallery: provide detail view and actions
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 |
|
@coderabbitai review |
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (7)
web/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsx (3)
1-16: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winVerify that
React.ReactNoderesolves without a React import.
SectionLabeluses theReactnamespace type at line 12, but the file does not importReact. This compiles only if the TypeScript config permits UMD global access or the project ships a React global type shim. Import the type explicitly to remove the dependency on that setting.🔧 Proposed fix
+import type {ReactNode} from "react" + -const SectionLabel = ({children}: {children: React.ReactNode}) => ( +const SectionLabel = ({children}: {children: ReactNode}) => (#!/bin/bash # Check tsconfig settings and whether other files rely on the bare React namespace without importing React. fd -H -t f 'tsconfig*.json' web | while read -r f; do echo "== $f" jq '.compilerOptions | {jsx, allowUmdGlobalAccess, types, strict}' "$f" 2>/dev/null || cat "$f" done # Find other component files that use React.<Type> but never import React. rg -l --type=tsx 'React\.' web/oss/src/components | while read -r f; do rg -q '^import .*\bReact\b' "$f" || echo "no React import: $f" done
46-48: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueShorten the inline layout comments.
These three comments explain visual intent over multiple lines. Reduce each to one short line.
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."
Also applies to: 177-178, 188-191
Source: Coding guidelines
78-87: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueEncode the template key in the query string.
template.keygoes straight into the URL. If a key ever contains&,#, or a space, the query breaks. UseencodeURIComponent.🔧 Proposed fix
- onClick={() => - void router.push(`${baseAppURL}?new=1&template=${template.key}`) - } + onClick={() => + void router.push( + `${baseAppURL}?new=1&template=${encodeURIComponent(template.key)}`, + ) + }web/oss/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsx (1)
9-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider a loading state while the router hydrates.
On the first client render of a dynamic route,
query.template_keyis undefined, so the page rendersnull. The page then swaps to content. Render a skeleton or aPageLayoutshell instead to avoid the blank frame. Userouter.isReadyto distinguish "not hydrated" from "missing key".web/oss/src/components/pages/agent-home/components/TemplatesGallery/index.tsx (1)
95-104: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove the now-dead setup-drawer path.
handleSelectTemplatenavigates to the detail route and no longer setssetupTemplate.setSetupTemplateis called only withnull(lines 109 and 218), sosetupTemplatestaysnullforever. As a result:
TemplateSetupDrawerat lines 215-220 always renders withtemplate={null}andopen={false}.handleTemplateCreateat lines 107-113 is unreachable, andmessagefromApp.useApp()at line 36 becomes unused.The comment at lines 95-96 also still describes the removed builder-mode and setup-drawer behavior.
Remove the drawer, the state, and the callback, or state explicitly why the drawer must stay mounted.
♻️ Proposed cleanup
- // Template card click: builder mode → straight to a seeded playground; else open the setup - // drawer. Gated by NEXT_PUBLIC_AGENT_TEMPLATE_BUILDER. - const [setupTemplate, setSetupTemplate] = useState<AgentTemplate | null>(null) - // A card opens the template rather than creating from it: the detail page is where you find - // out what it needs before committing, which is the point of having one. + // A card opens the template detail page instead of creating from it. const handleSelectTemplate = useCallback( (template: AgentTemplate) => void router.push(`${baseAppURL}/agent-templates/${template.key}`), [router, baseAppURL], ) - - // TODO(Phase B): create the ephemeral draft from the template + open the playground. - const handleTemplateCreate = useCallback( - ({template, name}: TemplateSetupResult) => { - setSetupTemplate(null) - message.info(`Create "${name}" from ${template.name} — wiring in the next phase`) - }, - [message], - )Then remove the
TemplateSetupDrawerblock at lines 215-220, theTemplateSetupDrawerimport at line 22, and theAppusage at line 36.web/oss/src/components/pages/agent-home/components/TemplatesSection/TemplateCard.tsx (2)
10-17: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueShorten the doc comment.
This comment is eight lines of design rationale. Reduce it to one short line.
📝 Proposed replacement
-/** - * A template, in the same card shape an agent uses. - * - * A template IS an agent you haven't made yet, so the two read as one object type: monogram - * straddling the top edge, name, description, then a footer of the connections it needs. The - * design's "1.2k uses" has no telemetry behind it — the footer carries what the template actually - * declares (its tools and when it fires) instead of an invented popularity number. - */ +/** A template rendered in the same card shape as an agent. */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."
Source: Coding guidelines
23-23: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove the unused
groupclass.The card sets
group, but no descendant uses agroup-hover:orgroup-focus:variant. Drop it, or add the intended variant styles.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 09669b44-a28f-4c78-8d35-f236b1524daa
📒 Files selected for processing (7)
web/ee/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsxweb/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsxweb/oss/src/components/pages/agent-home/components/TemplatesGallery/TemplateSection.tsxweb/oss/src/components/pages/agent-home/components/TemplatesGallery/index.tsxweb/oss/src/components/pages/agent-home/components/TemplatesSection/TemplateCard.tsxweb/oss/src/components/pages/agent-home/components/TemplatesSection/index.tsxweb/oss/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsx
eb04b4b to
598c194
Compare
5efd846 to
ac36eb7
Compare
598c194 to
ac99933
Compare
ac36eb7 to
f753428
Compare
|
@coderabbitai review |
|
ac99933 to
ae4896c
Compare
f753428 to
ab3c042
Compare
|
@coderabbitai review |
|
ae4896c to
39f787a
Compare
ab3c042 to
d1e4ec9
Compare
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsx (1)
46-48: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueKeep normal implementation rationale out of multi-line comments.
web/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsx#L46-L48: Remove the layout rationale or reduce it to one short line.web/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsx#L188-L191: Remove the Markdown rendering rationale or reduce it to one short line.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."
Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 0c6d4035-2eec-4cac-82a6-5eb9526c67a4
📒 Files selected for processing (7)
web/ee/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsxweb/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsxweb/oss/src/components/pages/agent-home/components/TemplatesGallery/TemplateSection.tsxweb/oss/src/components/pages/agent-home/components/TemplatesGallery/index.tsxweb/oss/src/components/pages/agent-home/components/TemplatesSection/TemplateCard.tsxweb/oss/src/components/pages/agent-home/components/TemplatesSection/index.tsxweb/oss/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- web/ee/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsx
- web/oss/src/components/pages/agent-home/components/TemplatesGallery/TemplateSection.tsx
- web/oss/src/components/pages/agent-home/components/TemplatesSection/index.tsx
- web/oss/src/components/pages/agent-home/components/TemplatesSection/TemplateCard.tsx
- web/oss/src/pages/w/[workspace_id]/p/[project_id]/apps/agent-templates/[template_key].tsx
- web/oss/src/components/pages/agent-home/components/TemplatesGallery/index.tsx
39f787a to
eba22fa
Compare
d1e4ec9 to
e6967e5
Compare
… page Template cards take the agent card shape, the gallery gets the detail page's rail, and a detail page renders each template from the fields it declares — example session included, honestly labelled. The route is registered in OSS and EE so neither edition 404s.
eba22fa to
0905607
Compare
e6967e5 to
f915825
Compare
|
Landed in |
2 participants
Context
Third app lane. Templates were a strip and a gallery with no detail view; a template's fields (instructions, providers, example session) had nowhere to render.
Changes
Template cards take the agent card shape, the gallery gets the detail page's rail, and a new detail page renders each template from the fields it declares: markdown instructions, provider marks, and an example session honestly labelled as an example. The six templates from the design get example sessions. The route is registered in OSS and EE (a page needs both files or it 404s in EE).
Tests / notes
@agenta/osstsc adds nothing on this lane. The EE route is a re-export shim over the OSS page.What to QA