Conversation
First step of the dashboard redesign. Remove the mobile header and its drawer. Implement a single navigation component that presents as a vertical rail beside the content on desktop and as a bottom bar on mobile, with the account menu at its end. Rework the org global panel around a consumed- energy gauge and an extended date range picker, and add a settings panel wired into the router. Add the Disket Mono display face, a Figma-derived icon set, and the supporting Tailwind and global CSS type/color tokens the new surfaces use. Extend the API schemas and mock data/handlers to back them, with tests. Also ignore the Vite cache directory (.vite/).
Second step of the dashboard redesign. Rebuild the Projects page in both its empty and populated states: breadcrumb and surface shared with the global panel, a heading row carrying the primary action, and a table of rows whose two text columns light as one item and whose overflow menu holds the existing Settings and Delete actions. Rework the create-project and project-settings dialogs onto the design's panel, fields and buttons. Project settings now opens in place from a project row, which makes ProjectSettingsPage a duplicate of it, so that page and its route are removed and the public sharing link it owned moves into the dialog beside the toggle that produces it. The visibility toggle saves on its own so that link appears and disappears with it, while "Save changes" writes the fields and closes; a failed save keeps the dialog open so the edits survive. Creating a project with an empty name is no longer possible, and the form submits on Enter. Fix the dialog transition app-wide. The panel was centred with a transform that tailwindcss-animate's keyframes overwrote, which the shadcn default compensates for by sliding it in from the top-left corner; centring it by layout instead lets it fade and rise in place, with a reduced-motion variant. Fix the account menu regrouping its organizations as it closes, by latching the admin lookup instead of keying it on the open state. Extract the redesign's controls into components — form field, primary and secondary button, menu panel and item, tab nav, modal header, project row, settings nav item, rail button — replacing the class-string constants the first step left behind, and adopt them in the pages and dialogs already redesigned. Drop the Figma node ids from comments, keeping the reasoning they carried, and rename createProjectModal to kebab-case to match the convention the rest of the components follow.
Every icon exported from the Figma file lived in a single figma-icons.tsx. Give each its own module, named the way the icons supplied outside that file already were, and delete the barrel. Repoint the rail, the account menu, the project row, the global dashboard and the settings page at the new modules. Declare the props contract once as FigmaIconProps, replacing the local copy each icon carried, and reduce every icon's comment to a line saying what the glyph shows — the sizes, insets, hex fills and node ids they listed described the design file rather than the code, and went stale the moment either changed.
Square 2px corners like the fields and buttons, lime when on, and the palette's hover colour. Restyled in place rather than added alongside the shadcn switch, since the project-settings dialog is its only caller.
The pre-redesign navigation, the page-header breadcrumb and the radial chart have had no callers since the rail, the pages' inline breadcrumbs and the consumed-energy gauges replaced them. Four test files were the only thing still importing them, so the suite was covering code no user could reach. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Put the page on the redesigned shell — dark surface, breadcrumb, display title carrying the project's description and its visibility pill — and move the project's own actions into that heading as ProjectActions, so nothing about the project's identity is drawn from inside its panels. ProjectSettingsPage went with it: opening settings in place from a row made that page a duplicate of the dialog. Replace the three radial charts with the global dashboard's gauges and equivalences, both now shared components, and give the four charts one section treatment: a heading, a line of context, its export control, and no card. They sit in a cross of rules rather than in boxes, with the gaps as padding inside the cells so the rules meet. Rework the experiment controls: a section heading with the picker and "Add an experiment" beside it, the selected experiment's details in a field-styled panel, and the create-experiment dialog on the same panel, fields and buttons as the other two dialogs. Add the pixel-art refresh, download, share, logout, cog, padlock and overflow glyphs, and restyle the select, the toast-adjacent controls and the token form onto the redesign's fields and buttons. Cover what the redesign had left untested — the rail, the account menu, settings, the project row, the dialogs and the equivalences — taking the suite to 124 tests, and stub ResizeObserver so Radix components can mount under jsdom. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Put the page on the Projects page's shell — dark surface, breadcrumb, display title — and give it the same table treatment, with each member as a MemberRow. The invite control is a form on the page rather than a dialog, since the API takes a single email address. Move that call behind addOrganizationUser: the endpoint subscribes an existing account and answers with a bare status object, so there is nothing to validate and the page refetches the list instead. Restyle the toasts onto the design's alert. Sonner's own rules hang off a stylesheet it injects after Tailwind's, which no class can outrank, so they render unstyled and restate the shape the design draws. Let Table take classes for its scroll container, which the members table needs to bound its own height. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Put the panel on the app's dark surface, outlined in the page's own rule rather than the menus' green — a menu's border marks where the pointer is working, and a panel you only read does not need that weight. The date range picker's calendar shares the primitive and follows. Show the public link as text instead of a read-only field: it is read and copied, never typed into. Its copy control becomes an icon button, so it matches the four in the project's heading. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…design Rebuild the create-organization modal on the same shell as the create-project and create-experiment dialogs: ModalHeader, FormField, PrimaryButton and the bordered 560px panel, replacing the shadcn DialogHeader/Separator/Label/Input layout with its outline Cancel button. Submission now goes through a real form with toast.promise, and the button is disabled while loading or while the name is blank, so the manual "name is required" toast is no longer needed. Also drops a duplicated "Organization Description" label block and renames the file to kebab-case to match the other components.
…t the pre-rename path and asserted the validation toast that the disabled submit button replaced. It now mirrors the create-project test.
Add webapp/AGENTS.md as the source of truth for work in this folder: the expected workflow (propose before editing, update the tests and docs alongside the change, leave committing to the user), the conventions worth writing down — the split between the redesign primitives in components/ui and the older shadcn ones, the shared modal shell, the design tokens — and a section on implementing Figma designs covering responsiveness, what to ask about versus decide alone, extending the redesign rather than forking it, and the traps worth checking. CLAUDE.md points Claude at it. The README gains a pointer too.
The public toggle wrote to the API the moment it was flipped, which made it the one control in the dialog that ignored the Save button and could commit a visibility change the user was still deciding on. It now behaves like the other fields: local state until Save, sent with the rest of the form. Saving no longer closes the dialog, and the sharing link sits beside the save button and follows the visibility that was last saved, so enabling public access and copying the link it produces is one trip through the modal. That saved visibility is tracked in the dialog rather than read from the project prop, because the projects list opens the dialog with a snapshot it does not re-pass after a save.
The four pages with a breadcrumb each repeated the same nav, the same two colour classes and the same separator, which is how the slashes ended up glued to the crumb labels in the first place. Replace the unused shadcn breadcrumb with a redesign one taking the trail as a list of labels and optional destinations, and convert the pages to it. Separators are now spaced slashes outside the links, so hovering lights the label alone. Only the last crumb is the current page: the organisation dashboard's leading crumb is unlinked too, so "not a link" and "where you are" have to stay separate.
The rule was the fourth item of the working agreement list and was getting skimmed past. Promote it to a Commits section near the top of AGENTS.md, stating plainly that committing and staging are the user's alone, that the message is handed over as text at medium length, and that anything already staged is asked about rather than assumed. The list item and the Figma section's closing now point at it instead of restating it.
The experiment bar chart painted unselected bars with --secondary, which is a near-black surface token in dark mode — the bars read as empty gaps rather than as data next to the lime selected bar. Switch them to the design's --cc-gray (#949494), the palette's intended neutral for inactive marks.
webapp/CLAUDE.md told the agent to go read AGENTS.md, which only helps if the pointer is noticed and acted on; it now imports the file with @./AGENTS.md so the working agreement is in context outright. The root instructions gain a matching line, since the nested file itself only loads once something under webapp/ is touched.
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
2 participants
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.
Implements the Figma redesign of the dashboard: sidebar rail (bottom bar on mobile),
account menu, global panel, and the projects page with its empty state and
create-project modal, project dashboard page and members page. Fully responsive, since Figma has desktop frames only.
Screenshots
Homepage (global):
Homepage + Account menu open:
Account settings page:
Projects page:
Create project modal:
Project settings modal (General tab):
Project settings modal (API tokens tab):
Project dashboard page:
Members page:
Todo
Remarks
Links
AI Usage Disclosure