feat: dashboard v2

AGENTS.md

@@ -1,4 +1,4 @@
-# StakeKit Widget — Agent Guide
+# StakeKit Widget - Agent Guide
 
 ## Project Overview
 - Monorepo managed with `pnpm` workspaces + Turborepo.
@@ -26,17 +26,18 @@
 - `pnpm lint` — lint/type-check all packages.
 - `pnpm test` — run all workspace tests.
 - `pnpm format` — run formatting checks/tasks.
-- `pnpm check-hygiene` - check unused deps, unresolved imports, circular deps, etc
+- `pnpm check-hygiene` — check unused deps, unresolved imports, circular deps, etc.
 
 ### Focused widget commands (recommended for most tasks)
 - `pnpm --filter @stakekit/widget {command}`
 
 ## Agent Working Guidelines (short)
 - Keep public API compatibility in `src/index.package.ts` and `src/index.bundle.ts`.
+- React Compiler is enabled. Do not add `useMemo`, `useCallback`, or `React.memo` only for render-performance optimization; prefer plain values/functions. Use manual memoization only when required for semantic stability, such as an external API dependency or context value identity.
 - When changing user-facing copy, update both:
   - `packages/widget/src/translation/English/translations.json`
   - `packages/widget/src/translation/French/translations.json`
-- After changes, confirm nothing is broken with lint command which checks lint/type errors
+- After changes, run the lint command to check lint and type errors.
 
 ## Useful Context for Debugging
 - API client is configured in `packages/widget/src/providers/api/api-client-provider.tsx`.
@@ -48,11 +49,14 @@
 
 ## Vendored Repositories
 
-This project vendors external repositories under @repos/
+This project vendors external repositories under `@repos/`.
 
 - Use vendored repositories as read-only reference material when working with related libraries
 - Prefer examples and patterns from the vendored source code over generated guesses or web search results
-- Do not edit files under @repos/ unless explicitly asked
-- Do not import from @repos/ - application code should continue importing from normal package dependencies
-- Before writing any Effect code, inspect @repos/effect/LLMS.md
+- Do not edit files under `@repos/` unless explicitly asked
+- Do not import from `@repos/` - application code should continue importing from normal package dependencies
+- `@repos/effect` is a local-only clone of Effect-TS/effect-smol and may be ignored by Git locally
+- When searching `@repos/`, use `rg --no-ignore <pattern> @repos/<repo>` so ignored local reference repositories are included without searching unrelated ignored directories
+- Before writing any Effect code, inspect `@repos/effect/LLMS.md`
 - Before writing code that interacts with Effect `HttpClient`, inspect `agent-patterns/effect-http-client.md`
+- Before writing code that uses Effect `Stream`, inspect `agent-patterns/effect-stream.md`

README.md

@@ -179,15 +179,13 @@ const App = () => {
     <SKApp
       apiKey="your-api-key"
       theme={{
-        lightMode: {
-          font: { body: '"IBM Plex Mono", monospace' },
-          color: {
-            primaryButtonBackground: "#8323fd",
-            primaryButtonActiveOutline: "#8323fd",
-            primaryButtonOutline: "#8323fd",
-          },
-          borderRadius: { primaryButton: "0", widgetBorderRadius: "10px" },
+        font: { body: '"IBM Plex Mono", monospace' },
+        color: {
+          primaryButtonBackground: "#8323fd",
+          primaryButtonActiveOutline: "#8323fd",
+          primaryButtonOutline: "#8323fd",
         },
+        borderRadius: { primaryButton: "0", widgetBorderRadius: "10px" },
       }}
     />
   );
@@ -211,25 +209,6 @@ const App = () => {
 };
 ```
 
-You can also provide both themes, and widget will respect preference if a user has requested light or dark color themes
-
-```tsx
-import "@stakekit/widget/package/css";
-import { SKApp, darkTheme, lightTheme } from "@stakekit/widget";
-
-const App = () => {
-  return (
-    <SKApp
-      apiKey="your-api-key"
-      theme={{
-        lightMode: lightTheme,
-        darkMode: darkTheme,
-      }}
-    />
-  );
-};
-```
-
 #### Theme properties:
 
 ```ts
@@ -640,13 +619,13 @@ Widget component provides `tracking` prop for analytics to track user actions an
 
 ```tsx
 import "@stakekit/widget/package/css";
-import { SKApp, darkTheme, lightTheme } from "@stakekit/widget";
+import { SKApp, darkTheme } from "@stakekit/widget";
 
 const App = () => {
   return (
     <SKApp
       apiKey="your-api-key"
-      theme={{ darkMode: darkTheme }}
+      theme={darkTheme}
       tracking={{
         trackEvent: (event, props) => {
           console.log(event, props);