Smartgift-AI/Claude-Code-Monitor
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(companion): render Sagi 50% larger and crop the artwork's empty padding

Browse Source 
SAGI_SIZE (the draggable button's real footprint) and SagiAvatar's default
`size` both go 60 -> 90, and the viewBox drops the exporter's padded
`0 0 1280 1280` canvas for a tight window on the art: the measured bbox over
every path is x 331..1114 / y 173..1044, padded out to a square and raised to
y 106 so the zzz / bang / sparkle mood overlays stay inside and the box keeps
the 1:1 aspect of the square width/height.

Path data is not rescaled, so MAX_PUPIL_SHIFT and the eye/mood
transform-origins in sagi.css stay valid in the original 1280-unit space.
This commit is contained in:
nntrivi2001
2026-08-20 08:34:18 +07:00
parent ce2797b01f
commit 7c2992fdc8
3 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ARCHITECTURE.md
+1 -1
View File
@@ -2205,7 +2205,7 @@ The mood state machine in `deriveMood` resolves to a single expression using a f
| --- | --- |
| **`brain.ts`** | Pure, framework-free core. Exposes a `WSMessage` reducer (`reduceSagi`) and a mood state machine (`deriveMood`) with the priority order `disconnected > worried > stuck > happy > thinking > watching > sleeping > idle`. The clock is injected and there are zero side effects, so the brain is fully unit-tested in isolation. |
| **`useSagiBrain.ts`** | The **only** consumer of the global `eventBus`. Wires the pure brain to real timers (idle / sleep / stuck), the speech-bubble queue, mute, and clear-alerts. Produces the derived `{ mood, status, bubble }` the presentational components render. |
| **`SagiAvatar.tsx`** | Pure presentational SVG mascot. The `data-mood` attribute drives CSS; pupils track the cursor. |
| **`SagiAvatar.tsx`** | Pure presentational SVG mascot. The `data-mood` attribute drives CSS; pupils track the cursor. Rendered at 90×90 px (`size` default, kept in sync with `SAGI_SIZE` in `useSagiPosition.ts`, which is the draggable button's real footprint) through a `viewBox` cropped to the artwork's measured bounding box instead of the exporter's padded `0 0 1280 1280` canvas. Path data is never rescaled, so every coordinate constant (`MAX_PUPIL_SHIFT`, the `transform-origin` values in `sagi.css`) stays in the original 1280-unit space. |
| **`SpeechBubble.tsx`** | Pure presentational speech bubble. |
| **`SagiPanel.tsx`** | Pure presentational panel: status readout + quick actions + the Ask box. |
| **`Sagi.tsx`** | Shell component. Mounted once in `client/src/components/Layout.tsx` as a sibling of `UpdateNotifier`. Owns open/closed state, the `⌘B` / `Esc` shortcuts, reduced-motion detection, and navigation. |