H-6720: Remove Petrinaut branding from the AI panel and use HASH breadcrumbs in the process editor - #9084
Conversation
…mbs in the process editor - AI assistant panel: tab now reads "AI", empty-state copy is "Ask AI to create a Petri net, explain or revise the current model.", and the composer label / auto-layout widget / internal error strings refer to the assistant neutrally (all hosts, per Ciaran's direction). - HASH process editor: the host page now renders the standard TopContextBar breadcrumbs (Processes > <process title>), the in-iframe back-arrow button and its requestNavigateBack wiring are removed, and the live title is mirrored from the iframe over the existing bridge.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
area/apps > hash*
…rom Dei) Instead of a host TopContextBar stacked above the editor, the HASH embed now renders "Processes >" inside Petrinaut's top bar via the topBarStart slot, with the editor's existing editable title as the final crumb — one bar, the model name shown once, rename-in-place preserved. The slot now renders after the built-in sidebar-toggle/menu buttons (no other host uses it), and the Processes crumb navigates via the restored requestNavigateBack bridge message.
PR SummaryLow Risk Overview Top bar hosting moves The HASH process iframe ( Reviewed by Cursor Bugbot for commit b39337b. Bugbot is set up for automated code reviews on this repo. Configure here. |
…m Dei) - Wrap the crumb in its own inline-styled flex row so spacing between "Processes", the chevron and the title is explicit (immune to the FE-1228 Panda specificity clash). - Color the crumb, chevron and (via the new slots.titleStyle hook) the editable title #95a5b8 — HASH's breadcrumb gray, pinned as a constant since neither the MUI theme nor the ds tokens have an exact match. - Add the Processes sidebar icon (ChartNetworkRegularIcon) as the crumb's prefix. - The titleStyle hook is inline-style based and only applied by the HASH embed; the standalone website passes no slots and keeps its colors.
…prop CI's hash-frontend TSC caught that ButtonProps has no `style`. Color the button via an unlayered emotion rule on the wrapping MUI Box instead, which also reliably beats the editor's layer-polyfilled Panda recipe color (FE-1228).
Per Dei: crumb text, its icon and the process title are #677789; the chevron separator stays #95a5b8 (matching the app's entities breadcrumbs — no exact tokens exist for either). The colors are applied as inline styles (styled span inside the ds Button, style on the icon, slots.titleStyle) because the editor's layer-polyfilled Panda bundle compiles its recipe colors to a specificity that beats host emotion classes — which is why the crumb previously rendered dark.
2 participants
Requested by Dei Vilkinsons · Slack thread
🌟 What is the purpose of this PR?
First pass at making Petrinaut feel native when embedded in HASH, for Dei Vilkinsons (UX check) and Chris Feijoo (Petrinaut FE) to review.
Before → After, in plain language:
<-back-arrow icon. It now shows HASH-style breadcrumbs integrated into Petrinaut's own top bar (single bar, per Dei's follow-up feedback): sidebar-toggle and menu buttons, then a Processes crumb (with the sidebar's chart-network icon) › and the editor's existing editable title as the final crumb. Colors match HASH's entity breadcrumbs per Dei's spec: crumb text, its icon and the title in#677789, the chevron separator in#95a5b8. The model name appears once, "Processes" navigates back to the list, and the back arrow is gone.🔗 Related links
🔍 What does this change?
Debranding (
libs/@hashintel/petrinaut):ai-assistant-contents.tsx— tab "Petrinaut AI" → "AI"; empty-state copy → "Ask AI to create a Petri net, explain or revise the current model."; composeraria-label→ "Message AI assistant".apply-auto-layout-widget.tsx— "Petrinaut AI suggests…" → "The assistant suggests…".ai-assistant-panel.tsx— internal error strings ("Petrinaut AI cannot run…", "Unknown Petrinaut AI tool") neutralised, since tool errors can surface in the transcript on hover.ai-assistant-contents.test.tsx— assertion updated to the new copy.patchfor@hashintel/petrinaut).Breadcrumbs:
top-bar.tsx+petrinaut-slots.ts(@hashintel/petrinaut) — thetopBarStartslot now renders after the built-in sidebar-toggle/menu buttons, immediately before the net title, so hosts can lead into the title with breadcrumbs; and a newslots.titleStylehook applies a host-supplied inline style to the title input, letting the HASH embed tint the title as the final crumb without competing with the editor's Panda styles. No other host used the slot (the HASH back arrow was its only consumer), so nothing regresses; the standalone petrinaut-website passes no slots and keeps its current look and title color.embed-content.tsx(hash-frontend, inside the iframe) — passestopBarStart= a flex row containing a "Processes" ghost button — prefixed with the sameChartNetworkRegularIconthe HASH sidebar uses, navigating via the existingrequestNavigateBackbridge message — and achevronRighticon. Colors: crumb text + icon + title#677789, chevron#95a5b8(per Dei; neither the MUI theme nor the ds tokens have exact tokens — closest arepalette.gray[70]#64778C /palette.gray[50]#91A5BA — so both are pinned as documented constants). The colors are applied as inline styles (styled span inside the ds Button,styleon the icon,slots.titleStyle) because the editor's layer-polyfilled Panda bundle compiles its recipe colors to a specificity that beats host emotion classes (FE-1228). Petrinaut's own top-bar controls keep their existing colors.process-editor.tsx(hash-frontend, host page) — back to (almost) itsmainstate: theonRequestNavigateBackhandler stays, only the loading-skeleton comments and the iframe's accessibletitle("Petrinaut editor" → "Process editor") changed.Rename affordance decision: HASH's flows pages render the last crumb as a bordered chip with a caret dropdown; here the last crumb is instead Petrinaut's existing edit-in-place title input — the least invasive option that keeps rename working in the embed. Happy to switch to the chip+caret pattern in a follow-up if preferred.
Intentionally left (not user-visible in the HASH embed):
petrinaut-coreschema-validation error.libs/@hashintel/petrinaut/docsstill names the product Petrinaut — it's shared product documentation (also consulted by the assistant at runtime) and never says "Petrinaut AI", so it needed no edits for this change. No doc screenshots show the AI panel or the HASH back arrow, so none went stale.Pre-Merge Checklist 🚀
🚢 Has this modified a publishable library?
This PR:
📜 Does this require a change to the docs?
The changes in this PR:
🕸️ Does this require a change to the Turbo Graph?
The changes in this PR:
@hashintel/ds-componentsprimitives plus inline styles; the Petrinaut Panda bundle itself is untouched (mindful of the FE-1228 specificity clash).🐾 Next steps
#677789/#95a5b8constants for them.🛡 What tests cover this?
@hashintel/petrinautunit tests (vitest): 174 passed, including the updatedai-assistant-contentsempty-state assertion.❓ How to test this?
🖼️ Demo
No screenshots from this environment — the reviewers' screenshots in the Slack thread show the "before" states; the Vercel preview shows the "after".
Verification run (after the two-tone color round):
@hashintel/petrinautlint:tsc(tsgo) ✅, oxlint ✅, vitest (174 tests) ✅, library build ✅; repoyarn lint:format✅;eslinton the changed hash-frontend file ✅. A fullhash-frontendtsc --noEmitcould not complete in this environment (pre-existing unbuilt wasm@blockprotocol/type-systemlimitation) — CI's Package typecheck is the source of truth and was green on the previous head.