fix(web): use Pythinker robot in sidebar brand

Author: elkaix

apps/pythinker-web/src/components/Sidebar.vue

@@ -21,6 +21,7 @@ import {
 } from '../lib/storage';
 import { moveInOrder, type DropPosition, type WorkspaceSortMode } from '../lib/workspaceOrder';
 import type { Session, WorkspaceGroup as WorkspaceGroupType, WorkspaceView } from '../types';
+import PythinkerLogo from './PythinkerLogo.vue';
 import SearchSessionsDialog from './dialogs/SearchSessionsDialog.vue';
 import WorkspaceGroup from './WorkspaceGroup.vue';
 import { isMacosDesktop } from '../lib/desktopFlag';
@@ -33,11 +34,10 @@ import Pill from './ui/Pill.vue';
 
 const { t } = useI18n();
 
-// Dev-only affordance: when the page is served by the Vite dev server, the
-// logo turns yellow and a backend pill next to the brand shows the engine
+// Dev-only affordance: a backend pill next to the brand shows the engine
 // generation reported by /meta (v1 = older server binary, v2 = kap-server)
 // plus the endpoint the dev proxy forwards to — click it to switch presets
-// without restarting Vite. In production this is all inert.
+// without restarting Vite. In production this is inert.
 const isDev = import.meta.env.DEV;
 const devBackend = ref<DevBackendState | null>(isDev ? initialDevBackendState() : null);
 if (isDev) {
@@ -575,42 +575,23 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', closeBackendMenu);
 });
 
-// Logo easter-egg: clicking the Pythinker mark plays one quick blink. It's a one-shot
-// animation — force a reflow so rapid clicks restart it, then drop the class so
-// the idle look/blink loop resumes.
-const logoRef = ref<SVGSVGElement | null>(null);
-let blinkTimer: ReturnType<typeof setTimeout> | undefined;
-
 // Temporarily hide the new-workspace button while we evaluate the entry point.
 const showNewWorkspaceButton = false;
 
-function blinkOnce(): void {
-  const el = logoRef.value;
-  if (!el) return;
-  el.classList.remove('blink-now');
-  void el.getBoundingClientRect();
-  el.classList.add('blink-now');
-  clearTimeout(blinkTimer);
-  blinkTimer = setTimeout(() => el.classList.remove('blink-now'), 300);
-}
-
 // Logo long-press easter-egg: holding the Pythinker mark for 1 second opens the
-// design system as a full-screen overlay. A short click still just blinks.
+// design system as a full-screen overlay.
 // Pointer capture keeps the hold alive even if the pointer drifts off the mark.
 const DesignSystemView = defineAsyncComponent(
   () => import('../views/DesignSystemView.vue'),
 );
 const showDesignSystem = ref(false);
 const EGG_HOLD_MS = 1000;
 let logoPressTimer: ReturnType<typeof setTimeout> | undefined;
-let logoLongPressed = false;
 
 function onLogoPointerDown(event: PointerEvent): void {
-  logoLongPressed = false;
   clearTimeout(logoPressTimer);
   (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
   logoPressTimer = setTimeout(() => {
-    logoLongPressed = true;
     showDesignSystem.value = true;
   }, EGG_HOLD_MS);
 }
@@ -621,14 +602,6 @@ function onLogoPointerUp(event: PointerEvent): void {
   if (el.hasPointerCapture?.(event.pointerId)) el.releasePointerCapture(event.pointerId);
 }
 
-function onLogoClick(): void {
-  if (logoLongPressed) {
-    logoLongPressed = false;
-    return;
-  }
-  blinkOnce();
-}
-
 onBeforeUnmount(() => {
   clearTimeout(logoPressTimer);
 });
@@ -650,18 +623,14 @@ onBeforeUnmount(() => {
       <div class="ch">
         <div class="ch-brand">
           <template v-if="!isMacosDesktop">
-            <svg ref="logoRef" class="ch-logo" :class="{ 'is-dev': isDev }" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Pythinker Code" @click="onLogoClick" @pointerdown="onLogoPointerDown" @pointerup="onLogoPointerUp" @pointercancel="onLogoPointerUp">
-              <defs>
-                <mask id="pythinkerEyes" maskUnits="userSpaceOnUse">
-                  <rect x="0" y="0" width="32" height="22" fill="#fff" />
-                  <g class="ch-eyes" fill="#000">
-                    <rect class="ch-eye" x="11.8" y="7" width="2.8" height="8" rx="1.4" />
-                    <rect class="ch-eye" x="17.4" y="7" width="2.8" height="8" rx="1.4" />
-                  </g>
-                </mask>
-              </defs>
-              <rect x="1" y="1" width="30" height="20" rx="6" fill="var(--logo)" mask="url(#pythinkerEyes)" />
-            </svg>
+            <PythinkerLogo
+              class="ch-logo"
+              size="sm"
+              :animated="false"
+              @pointerdown="onLogoPointerDown"
+              @pointerup="onLogoPointerUp"
+              @pointercancel="onLogoPointerUp"
+            />
             <span class="ch-name">Pythinker Code</span>
             <Pill
               v-if="isDev"
@@ -967,8 +936,9 @@ onBeforeUnmount(() => {
   display: none;
 }
 .ch-logo {
-  height: 22px;
-  width: 32px;
+  height: 28px;
+  width: 28px;
+  object-fit: contain;
   flex: none;
   display: block;
   cursor: pointer;
@@ -979,12 +949,6 @@ onBeforeUnmount(() => {
 .ch-logo:hover {
   transform: scale(1.08);
 }
-/* Dev-only: tint the mark yellow so a `pnpm dev:web` tab is obvious at a
-   glance. `--logo` is read by the mark's `fill`; overriding it on the svg
-   recolors just this instance. */
-.ch-logo.is-dev {
-  --logo: var(--color-logo-dev);
-}
 .ch-brand {
   display: flex;
   align-items: center;

apps/pythinker-web/src/style.css

@@ -453,11 +453,6 @@ html[data-color-scheme="dark"][data-accent="mono"] {
   --color-done-soft: #f3e8ff;
   --color-done-bd: #e0ccff;
   --color-info: var(--accent-primary);
-  /* Dev-only brand tint: recolors the logo mark golden-yellow so a `pnpm dev:web`
-     tab is visually distinct from production. Referenced by Sidebar's
-     `.ch-logo.is-dev` override of `--logo`. Scheme-independent on purpose. */
-  --color-logo-dev: #f5b301;
-
   /* -- spacing (4px grid) -------------------------------------------------- */
   --space-1: 4px;
   --space-2: 8px;
@@ -843,48 +838,6 @@ body {
     transition-duration: 0.001ms !important;
   }
 }
-/* ---- Pythinker Code logo (sidebar header): lively eyes — glance left/right + the
-   occasional blink. The two bars are mask cutouts, so animating them moves /
-   squishes the transparent holes (adapts to whatever's behind the logo). The
-   look (6s) and blink (5.4s) run on different periods so they drift in and out
-   of sync, which reads as more organic. ---- */
-.ch-eyes {
-  animation: pythinker-eye-look 16s ease-in-out infinite;
-}
-.ch-eye {
-  transform-box: fill-box;
-  transform-origin: center;
-  animation: pythinker-eye-blink 11s ease-in-out infinite;
-}
-@keyframes pythinker-eye-look {
-  /* Rest centered most of the time; a quick glance right (~7.5s) then a glance
-     left (~13.5s), with long still holds between — calm, not busy. */
-  0%, 42% { transform: translateX(0); }
-  47%, 53% { transform: translateX(2px); }
-  58%, 80% { transform: translateX(0); }
-  84%, 90% { transform: translateX(-2px); }
-  95%, 100% { transform: translateX(0); }
-}
-@keyframes pythinker-eye-blink {
-  /* one quick blink per cycle (~10.6s) */
-  0%, 94%, 100% { transform: scaleY(1); }
-  96.5%, 98% { transform: scaleY(0.12); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ch-eyes,
-  .ch-eye { animation: none; }
-}
-
-/* Click-to-blink: a single quick blink on click (overrides the idle 11s blink
-   while the .blink-now class is present, ~300ms). */
-.ch-logo.blink-now .ch-eye {
-  animation: pythinker-eye-blink-once 0.24s ease-in-out;
-}
-@keyframes pythinker-eye-blink-once {
-  0%, 100% { transform: scaleY(1); }
-  50% { transform: scaleY(0.1); }
-}
-
 /* Markdown images at natural size. markstream enforces a min-width/min-height
    floor (--ms-size-image-*, ~33px) that scales small inline images UP — README
    shields.io badges (78×20) were rendered at 128×33. Higher specificity than

apps/pythinker-web/src/views/DesignSystemView.vue

@@ -331,7 +331,7 @@ onUnmounted(() => {
               </template>
             </div>
 
-            <p>Do not use emoji as functional icons (the sole exception is the moon phases 🌑…🌘, used only in the "waiting for the Agent to respond" chat state). The Pythinker brand mark (the 32×22 eye logo) is a brand asset and is not part of this icon system.</p>
+            <p>Do not use emoji as functional icons (the sole exception is the moon phases 🌑…🌘, used only in the "waiting for the Agent to respond" chat state). The Pythinker robot mascot is a brand asset and is not part of this icon system.</p>
             <p>A few <b>special graphics</b> are not in the registry; each has a dedicated component maintained in one place, and must not be copied by hand: <code>&lt;ContextRing :pct /&gt;</code> (the Composer context progress ring, data-driven), <code>&lt;AuthStateIcon kind /&gt;</code> (the success / expired / error colored illustrations in the login flow), <code>&lt;Spinner /&gt;</code> (loading state). Status dots (such as in the Provider list) always use CSS dots (<code>border-radius:50%</code>), not SVG. The <code>scripts/check-style.mjs</code> <code>icon-from-registry</code> rule exempts the above and the brand mark; all other hand-written <code>&lt;svg&gt;</code> is flagged.</p>
 
             <h3 class="sub">Spacing</h3>
@@ -1396,7 +1396,7 @@ onUnmounted(() => {
             <table class="dt">
               <thead><tr><th>Block</th><th>Use</th><th>Note</th></tr></thead>
               <tbody>
-                <tr><td>Brand header</td><td>logo + name + collapse IconButton (right-aligned)</td><td>on Windows / web the brand is left and the collapse IconButton sm is right-aligned inside the header; the logo is animated (a blinking eye). On macOS desktop the header is a bare drag strip (brand hidden, traffic lights + resident floating toggle over it)</td></tr>
+                <tr><td>Brand header</td><td>robot mascot + name + collapse IconButton (right-aligned)</td><td>on Windows / web the brand is left and the collapse IconButton sm is right-aligned inside the header. On macOS desktop the header is a bare drag strip (brand hidden, traffic lights + resident floating toggle over it)</td></tr>
                 <tr><td>New chat</td><td>full-width left-aligned button (custom)</td><td>same rhythm as the session rows in the list (left-aligned, hover = <code>--sb-hover</code>). <b>Do not</b> use Button (centered, breaks the rhythm)</td></tr>
                 <tr><td>Search</td><td>bare search row (custom)</td><td>no border, hover/focus shows a sunken background; icon + label, with the <code>Kbd</code> keycaps (⌘K / Ctrl K) pushed to the trailing edge — label and shortcut are justified apart. <b>Do not</b> use Input (the 38px bordered version is too heavy). Last fixed row above the list — its wrapper carries the scroll-linked seam</td></tr>
                 <tr><td>Section label</td><td><code>.p-section-label</code></td><td>uppercase muted small titles like "Workspaces"</td></tr>

apps/pythinker-web/test/app-shell-contracts.test.ts

@@ -4,6 +4,7 @@ import { describe, expect, it } from 'vitest';
 
 const app = readFileSync(join(import.meta.dirname, '../src/App.vue'), 'utf8');
 const composer = readFileSync(join(import.meta.dirname, '../src/components/chat/Composer.vue'), 'utf8');
+const sidebar = readFileSync(join(import.meta.dirname, '../src/components/Sidebar.vue'), 'utf8');
 
 describe('app shell contracts', () => {
   it('mounts the desktop chrome', () => {
@@ -17,4 +18,11 @@ describe('app shell contracts', () => {
     expect(composer).toContain("import CapabilityMenu from '../CapabilityMenu.vue';");
     expect(composer).toContain('<CapabilityMenu :session-id="sessionId" />');
   });
+
+  it('uses the Pythinker robot in the sidebar brand', () => {
+    expect(sidebar).toContain("import PythinkerLogo from './PythinkerLogo.vue';");
+    expect(sidebar).toContain('<PythinkerLogo');
+    expect(sidebar).not.toContain('<svg ref="logoRef"');
+    expect(sidebar).not.toContain("'is-dev': isDev");
+  });
 });