@howaboua/pi-pet 0.1.1

package/dist/web/styles.css

@@ -0,0 +1,592 @@
+:root {
+  color-scheme: dark;
+  --ink: #f6f1e7;
+  --muted: #aba89f;
+  --faint: #77776f;
+  --ground: #171815;
+  --panel: #20211d;
+  --line: #34352f;
+  --orange: #ff941f;
+  --orange-soft: #ffc06b;
+  --teal: #3ee5d2;
+  --danger: #ff726d;
+  --radius: 18px;
+  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 28% 44%, rgba(255, 148, 31, 0.09), transparent 27rem),
+    linear-gradient(115deg, #191a17, var(--ground) 62%);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+button,
+select {
+  cursor: pointer;
+}
+
+.shell {
+  width: min(1180px, calc(100% - 48px));
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 28px 0 36px;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.masthead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.wordmark {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 7px;
+  color: var(--ink);
+  text-decoration: none;
+  font-weight: 760;
+  letter-spacing: -0.04em;
+  font-size: 20px;
+}
+
+.wordmark-mark,
+.dialog-mark {
+  color: var(--orange);
+  font-family: Georgia, serif;
+  font-weight: 700;
+}
+
+.connection {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.connection-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--faint);
+  box-shadow: 0 0 0 4px rgba(119, 119, 111, 0.12);
+}
+
+.connection-dot.online {
+  background: var(--teal);
+  box-shadow:
+    0 0 0 4px rgba(62, 229, 210, 0.11),
+    0 0 16px rgba(62, 229, 210, 0.35);
+}
+
+.companion-layout {
+  align-self: center;
+  display: grid;
+  grid-template-columns: minmax(440px, 1.35fr) minmax(320px, 0.65fr);
+  align-items: center;
+  gap: clamp(44px, 8vw, 110px);
+  padding: 64px 0 30px;
+}
+
+.stage {
+  min-height: 560px;
+  position: relative;
+  display: grid;
+  place-items: center;
+  isolation: isolate;
+}
+
+.stage::before {
+  content: "";
+  position: absolute;
+  width: min(82%, 480px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 148, 31, 0.12), rgba(255, 148, 31, 0.025) 49%, transparent 70%);
+  filter: blur(2px);
+  z-index: -2;
+}
+
+.stage::after {
+  content: "";
+  position: absolute;
+  width: 270px;
+  height: 34px;
+  bottom: 105px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.26);
+  filter: blur(14px);
+  z-index: -1;
+}
+
+#pet-canvas {
+  width: min(390px, 72vw);
+  height: auto;
+  aspect-ratio: 192 / 208;
+  image-rendering: auto;
+  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.24));
+}
+
+.pet-hit-area {
+  position: absolute;
+  width: min(330px, 62vw);
+  aspect-ratio: 1;
+  border: 0;
+  background: transparent;
+  border-radius: 48%;
+}
+
+.pet-hit-area:focus-visible {
+  outline: 2px solid var(--teal);
+  outline-offset: 10px;
+}
+
+.pointer-hint {
+  position: absolute;
+  bottom: 56px;
+  margin: 0;
+  color: var(--faint);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+.bubble {
+  position: absolute;
+  z-index: 4;
+  top: 18px;
+  left: 55%;
+  width: min(270px, 70%);
+  padding: 14px 16px;
+  color: #29251f;
+  background: #fff7e9;
+  border: 2px solid #1d1d1a;
+  border-radius: 18px 18px 18px 5px;
+  box-shadow: 5px 6px 0 #1d1d1a;
+  font-size: 14px;
+  line-height: 1.4;
+  animation: bubble-in 180ms ease-out;
+}
+
+.desktop-prompt {
+  display: none;
+}
+
+.console {
+  align-self: stretch;
+  padding: 12px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.console > section,
+.identity {
+  padding: 23px 0;
+  border-bottom: 1px solid var(--line);
+}
+.console > section:last-child {
+  border-bottom: 0;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--orange-soft);
+  font-size: 11px;
+  font-weight: 760;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+h1 {
+  margin-bottom: 10px;
+  font-size: clamp(38px, 5vw, 58px);
+  line-height: 0.94;
+  letter-spacing: -0.055em;
+}
+h2 {
+  margin: 0;
+  font-size: 13px;
+  letter-spacing: 0.01em;
+}
+
+.description {
+  max-width: 38ch;
+  margin-bottom: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.section-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 14px;
+}
+.quiet {
+  color: var(--faint);
+  font-size: 12px;
+}
+
+.current-state {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 0;
+}
+.action-name {
+  color: var(--teal);
+  font-size: 21px;
+  font-weight: 740;
+  letter-spacing: -0.025em;
+}
+.action-note {
+  color: var(--muted);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-button {
+  padding: 0;
+  color: var(--orange-soft);
+  border: 0;
+  background: transparent;
+  font-size: 12px;
+}
+.text-button:hover {
+  color: var(--ink);
+}
+
+.quick-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-bottom: 13px;
+}
+.quick-actions button {
+  min-height: 34px;
+  padding: 6px 11px;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  font-size: 12px;
+}
+.quick-actions button:hover,
+.quick-actions button:focus-visible {
+  color: var(--ink);
+  border-color: #65665d;
+  background: #292a25;
+}
+
+.select-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--faint);
+  font-size: 11px;
+}
+select,
+textarea {
+  width: 100%;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  background: #1c1d1a;
+  outline: none;
+}
+select {
+  height: 40px;
+  padding: 0 10px;
+}
+textarea {
+  resize: vertical;
+  min-height: 78px;
+  padding: 11px 12px;
+  line-height: 1.45;
+}
+select:focus,
+textarea:focus {
+  border-color: var(--teal);
+  box-shadow: 0 0 0 3px rgba(62, 229, 210, 0.1);
+}
+
+.prompt-section form {
+  display: grid;
+  gap: 9px;
+}
+.prompt-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.prompt-buttons {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.prompt-feedback {
+  min-height: 18px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.send-button {
+  min-height: 38px;
+  padding: 8px 16px;
+  color: #24170a;
+  border: 0;
+  border-radius: 10px;
+  background: var(--orange);
+  font-weight: 780;
+  font-size: 13px;
+}
+.send-button:hover {
+  background: #ffad4c;
+}
+.send-button:disabled,
+.voice-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.voice-button {
+  min-height: 38px;
+  padding: 8px 13px;
+  color: var(--orange-soft);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+}
+.voice-button:hover {
+  color: var(--ink);
+  border-color: #65665d;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes bubble-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+}
+
+@media (max-width: 820px) {
+  .shell {
+    width: min(100% - 30px, 620px);
+  }
+  .companion-layout {
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding-top: 24px;
+  }
+  .stage {
+    min-height: 430px;
+  }
+  .stage::after {
+    bottom: 62px;
+  }
+  .pointer-hint {
+    bottom: 22px;
+  }
+  .bubble {
+    top: 0;
+  }
+  .console {
+    padding-top: 0;
+  }
+}
+
+html.desktop-shell,
+html.desktop-shell body {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+.desktop-shell .shell {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+}
+
+.desktop-shell .masthead,
+.desktop-shell .console,
+.desktop-shell .pointer-hint {
+  display: none;
+}
+
+.desktop-shell .companion-layout {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+.desktop-shell .stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  -webkit-app-region: drag;
+}
+
+.desktop-shell .stage::before,
+.desktop-shell .stage::after {
+  display: none;
+}
+
+.desktop-shell #pet-canvas {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.2));
+}
+
+.desktop-shell .pet-hit-area {
+  width: 82%;
+  -webkit-app-region: no-drag;
+}
+
+.desktop-shell .bubble {
+  top: 8px;
+  right: 8px;
+  left: 8px;
+  width: auto;
+  padding: 9px 11px;
+  border-width: 1px;
+  border-radius: 13px 13px 13px 4px;
+  box-shadow: 3px 4px 0 #1d1d1a;
+  font-size: 12px;
+  -webkit-app-region: no-drag;
+}
+
+.desktop-shell .desktop-prompt {
+  position: absolute;
+  z-index: 6;
+  right: 8px;
+  bottom: 8px;
+  left: 8px;
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+  color: var(--ink);
+  border: 1px solid rgba(255, 192, 107, 0.55);
+  border-radius: 14px;
+  background: rgba(28, 29, 26, 0.96);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
+  -webkit-app-region: no-drag;
+}
+
+.desktop-shell .desktop-prompt[hidden] {
+  display: none;
+}
+
+.desktop-prompt-heading,
+.desktop-prompt-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.desktop-prompt-heading label {
+  color: var(--orange-soft);
+  font-size: 11px;
+  font-weight: 760;
+  letter-spacing: 0.04em;
+}
+
+.desktop-prompt-heading button {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: var(--muted);
+  border: 0;
+  background: transparent;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.desktop-shell .desktop-prompt textarea {
+  min-height: 50px;
+  max-height: 92px;
+  resize: none;
+  padding: 8px 9px;
+  border-color: #4a4b43;
+  border-radius: 9px;
+  font-size: 12px;
+}
+
+.desktop-prompt-footer span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.desktop-prompt-footer button {
+  min-height: 28px;
+  padding: 5px 11px;
+  color: #24170a;
+  border: 0;
+  border-radius: 8px;
+  background: var(--orange);
+  font-size: 11px;
+  font-weight: 780;
+}
+
+.desktop-prompt-footer .voice-button {
+  color: var(--orange-soft);
+  border: 1px solid #4a4b43;
+  background: transparent;
+}
+
+.desktop-prompt-footer button:disabled {
+  opacity: 0.42;
+}
+
+.desktop-shell.conversation-open #pet-canvas {
+  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.2)) brightness(0.86);
+}

package/docs/architecture.md

@@ -0,0 +1,41 @@
+# Architecture
+
+```mermaid
+flowchart LR
+    Pi[Pi session] --> G[GipPity Control]
+    Pi --> Route[Folder device selection]
+    Route --> Local[Owned local Node child]
+    Route --> SSH[Owned SSH command]
+    Local --> Build[Versioned source + build in ~/.pi/agent/pi-pet]
+    SSH --> Build
+    Build --> Electron[Transparent Electron shell]
+    G --> SDK[GipPity Remote mini-SDK]
+    SDK --> Web[Pi Pet web miniapp]
+    Store[Durable pets + runs in Pi agent directory] --> Web
+    Web --> Browser[Browser or PWA]
+    Web --> Electron
+    Pet[Pi Pet extension: pet_show] --> G
+```
+
+## Ownership
+
+- GipPity owns the HTTPS server, active Pi session, browser events, prompts, drafts, voice, reconnection, and namespaced static delivery under `/_gippity/apps/pi-pet/`.
+- `extensions/` registers Pi Pet's built web root and one bounded reaction snapshot through GipPity's remote-app bridge. It also owns each folder-selected local or SSH device process for exactly the lifetime of that Pi session.
+- `src/web/` owns catalog loading, canvas animation, pointer direction, local previews, prompt presentation, and voice controls. It uses only the hosted `GippityRemote` SDK.
+- `src/desktop/` owns the transparent native window, local attention preferences, navigation confinement, and a cursor-only sandboxed preload.
+- `src/protocol/` owns pet/catalog and reaction-state shapes.
+- `src/pet-loader.ts` validates inert pet data and assets during builds.
+- `src/pet-storage.ts` selects durable user pets from the Pi agent directory and falls back visibly to the bundled pet.
+- `authoring/` is read on demand through free-form `/pet` requests; it is shipped as package data, not registered as an always-visible skill.
+
+An attached device keeps Pi Pet at `~/.pi/agent/pi-pet` without installing an application. The direct local child or SSH command compares its build record with the version and source digest of the package loaded by Pi. A mismatch updates the source and runs npm install and build; a match starts the existing build directly. Closing its Pi owner closes Electron through an inherited pipe but leaves the source and build for the next Pi session.
+
+## State flow
+
+GipPity sends its retained `idle`, `working`, and `settled` activity plus ordinary Pi events. The miniapp maps them onto the pet's standard actions and derives waiting/failure presentation from tool events. Settled assistant text becomes one bounded temporary bubble.
+
+`pet_show` publishes the latest explicit reaction through the in-process remote-app bridge. Its versioned state identifies the pet catalog and carries a revision, action, and optional note. GipPity broadcasts it as `app.state` and replays the snapshot to newly connected or reconnecting renderers whether or not Electron is attached. The browser SDK requires no pet-specific transport.
+
+## Pet flow
+
+The npm package's `pets/` directory contains templates. Authoring copies and modifies pets under `<pi-agent-directory>/pi-pet/pets/`, keeps generation evidence under `runs/`, and writes each validated miniapp under `web/<pet-id>/`. Global `config.json` selects the default pet; project `<config-directory>/pi-pet.json` may override it by ID without duplicating assets. The adjacent global `pi-pet.json` registers reusable device definitions, while the project config selects which devices receive sessions from that folder. On reload the extension serves the repository selection, global default, or bundled Clawa in that order and starts only the folder's selected devices. Invalid higher-precedence state is reported visibly.

package/docs/research.md

@@ -0,0 +1,17 @@
+# Pet evidence
+
+## Atlas contract
+
+The retained Clawa fixture establishes Pi Pet's Codex-v2 `1536x2288`, 8×11, `192x208` atlas: nine standard action rows, sixteen clockwise look directions, and the minimal `pet.json` package. Clawa's committed validation reports no errors or warnings.
+
+OpenAI's public Hatch Pet skill confirms deterministic spritesheet creation, validation, visual QA, and `pet.json` packaging for the legacy 8×9 contract: <https://github.com/openai/skills/tree/main/skills/.curated/hatch-pet>
+
+Codex issue #20863 documents that current animation timing, chaining, and activity triggers are hardcoded rather than pet-manifest driven: <https://github.com/openai/codex/issues/20863>
+
+Codex issue #21657 requests click, hover, drag, and first-party action hooks, indicating those interaction APIs are not currently available: <https://github.com/openai/codex/issues/21657>
+
+## Pi and GipPity integration
+
+Pi's extension API provides lifecycle, tool, settlement, and user-message primitives. GipPity Remote already reduces those events into browser activity, carries complete bounded Pi events, accepts synchronized prompts, and owns realtime voice. Pi Pet therefore registers a static miniapp and reaction snapshot instead of reproducing those transports.
+
+The browser-to-Pi prompt bridge and transparent desktop presentation are Pi/GipPity additions, not claims of Codex desktop parity.