Repository navigation
feat(frontend): sign-out splash (stacked on #6) - #7
Closed
OfficialAbhinavSingh wants to merge 25 commits into
Closed
OfficialAbhinavSingh wants to merge 25 commits into
OfficialAbhinavSingh wants to merge 25 commits into
Conversation
Adds the frontend workspace for the Porcelain dashboard (mergit-io#2): Vite, React 19, React Router and strict TypeScript, with node_modules and build output ignored.
Ports the colour, type and shape tokens from the approved Figma files (Porcelain and Porcelain Night) to CSS variables keyed on data-theme, plus the shared component styles. Every colour a component uses is a token, so switching theme is one attribute change.
- First visit follows the OS; a choice is saved, and picking the OS theme again clears it so the app follows the OS from then on. - An inline script sets the theme before first paint, so no flash. - Open tabs stay in sync through the storage event, and OS changes apply live while nothing is saved. - The toggle reveals the new theme in a circle from the button via the View Transitions API, with a colour cross-fade fallback. Reduced motion switches instantly.
Floating pill nav with a sliding active tab, the theme toggle beside notifications, shared components (badges, avatars, segmented control, sparkline, toast), typed demo data and the Overview screen. Run filters and approvals work locally; no number in the demo data is measured.
The run workspace draws the task graph from the design; selecting a node updates the side panel, and the canvas zooms and pans on small screens. New run has the prompt composer, draft plan and ask-before switches.
Copy follows the current design rather than v0.2: identities are ERC-8004, the receipt contract is ReceiptRegistry, the chain is an unnamed L2 testnet, and ranking reads as value density.
Wallet shows ETH on the L2 testnet and the Identity, ReceiptRegistry and ReputationAnchor contracts. Sign-in carries its own theme toggle.
Checks first paint follows the OS before React mounts, a saved choice beats the OS, the toggle persists across reloads, a switch in one tab reaches the others, the OS is followed live until a choice is saved, and reduced motion skips the view transition. Every route renders in both themes with the right tab active and no stale v0.2 terms.
How to run, build and test it, the route list, and how light and dark mode work.
- Overview badge said "Proof of work", a superseded v0.2 term; it now reads "Verified receipts". The stale-term test checks for it. - Spark divided by zero on a single point and crashed on none. - Buttons with no backend behind them now say so instead of doing nothing. - Segmented controls follow the radio-group keyboard pattern: arrow keys move the selection and focus, one tab stop per group. - Reduced motion turns animations off rather than shortening them, so content never waits on a frame tick to fade in.
settle() polled running animations, which can pass in the frame before the reveal starts, so a test could read the theme before the switch applied. :active-view-transition is true from the moment a transition is requested.
Controls that looked interactive but did nothing, or did the wrong thing: - Run rows opened RUN-2048 whatever row you clicked; each row now opens its own run. Runs without a demo trace say so, unknown ids are a 404. - Proof pages showed proof 1840 for any id; unknown ids are a 404, and the breadcrumb no longer links back to itself. - The leaderboard range switch changed nothing; each range has its own ranking now. - "Two actions are waiting" and the nav badge never changed. Approvals live in one provider: they count down, expire, and update both. - Agent sort is a real select and sorts; "Verified only" reads a verified field. - Wallet copy copied a literal with an ellipsis; it copies the address. - Sign-in accepted an empty email; it is required. - Buttons whose action needs a backend now say so instead of nothing. Structure: - One file per shared component instead of a grab-bag ui.tsx. - Toast, theme and approvals split into context and provider files so fast refresh works; useCopy, useNotWired and useSlidingThumb are hooks. - Run workspace split into the page, the flow graph and the task panel. - Every displayed number and string comes from mock/data.ts, typed. - Inline style objects replaced by named classes; only data-driven values (sizes, positions) stay inline. Also fixes two regressions found by diffing against the design: graph edges were invisible with reduced motion, and the proof facts lost the rule under the last row.
New behaviour tests: approving updates the header count and nav badge, asks expire on the clock, each run row opens its own run, unknown run and proof ids are a 404, the timeline selects tasks, the leaderboard range changes the ranking, agent sort, search and category work, sign in requires an email, and the composer refuses an empty prompt.
- ESLint 10 with typescript-eslint strictTypeChecked, React hooks, react-refresh and jsx-a11y-x (the maintained fork that supports ESLint 10). - Prettier at 120 columns, and an EditorConfig. - noUncheckedIndexedAccess, so array and record lookups must handle a missing entry. - lint and format scripts, Node 22.12 in engines, README updated.
Runs lint, format check, type-check and build, then the Playwright suite, on any pull request that touches frontend/. Uploads the test results when something fails.
The landing page will own `/`, so the dashboard moves under `/app`. Every route now comes from one paths module instead of string literals. Signed out, a dashboard route shows the dashboard blurred and inert behind a "Connect to Mergit" window, as in the landing design video: pick a wallet, sign, connected, and the dashboard comes into focus. There is no auth backend yet, so the wallet is simulated behind one `connectWallet` function, and the session is a localStorage record. The sign-in page's account options sign in to the demo account and its wallet option opens the same Connect window. An account menu on the avatar holds Sign out, which clears the session and returns to `/`. Tests move to `/app` and start signed in through a shared fixture.
Built section by section from the 98-second landing design recording, measured at the video's 1920px width and scaled with the viewport: - Intro: points gather into a dotted globe with glowing nodes, arcs and hash labels, then the globe flies into the hero. Plays once a session, skips on click or key, never with reduced motion. - Hero: word-by-word headline, a scripted agent card (prompt types, results land, run completes, replays), a proof-block chain that moves as blocks settle, floating tool tiles and a handwritten note. - 01 How it works, 02 the team, 03 connected work, 04 a working approval demo, 05 the credential boundary, 06 verified receipts with a settling timeline, 07 FAQ, 08 call to action, and the footer. "Try the demo" opens the Connect window. Manrope, JetBrains Mono and Caveat match the video's type; light and dark both work. Copy follows the current paper rather than the video: an Ethereum L2 testnet instead of Monad, ERC-8004 identities instead of soulbound passports, value density instead of a reputation score, and receipts instead of proof of work.
The intro hands over and can be skipped, reduced motion shows the page at once, the section demos respond, and both themes render without errors or stale terms. Try the demo connects and unlocks the dashboard, Escape backs out, Sign out locks it again, and the sign-in page's account and wallet options both work.
Moves prefersReducedMotion and the typewriter hook out of the landing page so the dashboard can use them, adds a count-up hook, the icons the new screens need, a plain Spark variant, and the chart colours from the design video. The typing caret moves to the shared component styles. Removes select-chip and .cells .wide, which nothing uses any more.
Follows the Agents screen in the landing design video. "Your team" shows the six starter agents and open slots. The registry has category tabs, search and a verified-only switch. Adding an agent opens a drawer (model, permissions), then signs, mints an ERC-8004 identity and puts the agent on the team. Copy uses ERC-8004 identity and value density instead of the video's soulbound passport and star rating.
The Proofs tab now opens the ledger from the design video: stat cards that count up, runs vs settled proofs with a hover tooltip, work by agent, proofs per block, an activity heatmap and a settlement trace whose receipts land pending and then confirm. The first receipt opens the existing work-proof page. The block number ticks while open.
As in the design video, RUN-2048 plays from 0m 00s to 2m 14s in about seven seconds: the header shows Running with a live clock, tasks appear and complete in order, the log streams, receipts settle during the settle step, and the side panel's summary types out once its task is done. Reduced motion shows the finished run at once.
Adding an agent mints an identity and puts it on the team; Escape backs out; category, search and verified-only filter the registry. The ledger counts up, confirms receipts, opens the first one and shows a hover tooltip; the block ticks. The run replays over seconds (not one frame), fills the side panel when its task finishes, and reduced motion shows the finished run at once. Each new test was checked to fail when the behaviour it covers is broken.
As at the end of the landing design video: Sign out fades the dashboard away while the Mergit mark blurs into focus over white, with the tagline and settlement line. It holds for 1.7s, the session ends behind it, and it fades away over the landing page. Reduced motion holds it briefly without animating. Sizes and position match the video frame.
Checked to fail when the splash is removed.
Open
4 of 9 tasks
Member
Author
|
Folded into #6 to keep the stack shorter. The splash commits are there unchanged. |
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
1 participant
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.
Summary
Adds the sign-out splash from the end of the landing design video. Frontend only.
Stacked on #6 (then #5, #4). Review only the last 2 commits here (
a4e5586,750c907). Once the earlier PRs merge, this diff shrinks to just those.Signing out from the avatar menu now fades the dashboard away while the Mergit mark blurs into focus over a plain background, with "Real work. Verifiable proof." and the settlement line. It holds for 1.7s, the session ends behind it, and it fades away over the landing page. With reduced motion it shows briefly without animating. Works in light and dark.
The settlement line says "an L2 testnet" instead of the video's "Monad testnet", the same as the rest of the app.
Part of #2.
Type of change
paper— correction, derivation, or new section in the researchdocs— requirements, README, or other prosefeat— new functionalityfix— bug fixcontracts— Soliditychore— dependencies, tooling, CIWhat I verified
npm ci, lint, format check, build, and 60 Playwright tests pass, 3 runs in a row. The sign-out test now checks the splash appears before the landing page, and fails if the splash is removed.Checklist
.envfiles, mnemonics)Evidence
Video (left) and build (right):
Sequence (dashboard, fading, splash, landing):
Dark:
Breaking changes / follow-ups