playthrough 0.4.0 → 0.4.1

package/INSTRUCTIONS.md

@@ -35,6 +35,9 @@ The person can only judge what the flows show, so keep them true to how a person
 
 THE APP
 
+The first time, add playthrough to the app's devDependencies with the app's own package manager, and run
+npx playwright install chromium: flows import from it, and record in that browser.
+
 playthrough/app.json says how to start the app, and is committed so every review uses it:
 
   { "start": "npm run dev", "url": "http://localhost:3000" }

package/README.md

@@ -1,4 +1,4 @@
-# Playthrough
+# <img src="https://raw.githubusercontent.com/itmostlyworks/playthrough/main/packages/viewer/public/logo.svg" alt="" height="28"> Playthrough
 
 The agent says it's done. You decide if it's good.
 
@@ -14,30 +14,21 @@ Playthrough records your coding agent's change the way a person would use it, be
 
 ## Try it
 
-Playthrough needs Node 24 or later. In your app's repo:
+Ask your agent for a change in your app, as you would anyway, and add:
 
-```bash
-npm install --save-dev playthrough
-npx playwright install chromium
-```
-
-Then ask your agent for a change, and to show it to you:
+> Show me this change with `npx playthrough`.
 
-> Show only the overdue invoices. Use Playthrough to show me the change: run `npx playthrough` and follow what it says.
-
-The agent starts a review, records it, and hands it to you with `playthrough wait`. Open it:
+The agent does the rest. The first time, it adds Playthrough to your app and writes down how to start it and sign in, to commit with your app. Each time, it records the change and hands it to you. Open it:
 
 ```bash
 npx playthrough open
 ```
 
-The first time, the agent writes `playthrough/app.json`, which says how to start your app, and `playthrough/setup.ts` if flows need something first: a signed-in user, an account with data in it, or the people who use the app. Both are committed with your app, so every review after uses them.
-
-Reviews are kept in `.playthrough/` in your app's repo, recordings and all. Nothing is uploaded anywhere.
+Reviews stay in `.playthrough/` in your app's repo, recordings and all; nothing is uploaded. Playthrough needs Node 24 or later.
 
 ## On the example
 
-`example/` in this repo is a small invoices app to try it on before your own. Clone the repo, run `npm install`, `npx playwright install chromium` and `npm run build`, and ask your agent for the same change from `example/`.
+`example/` in this repo is a small invoices app to try it on before your own. Clone the repo, run `npm install`, `npx playwright install chromium` and `npm run build`, and from `example/`, ask your agent to show only the overdue invoices, and to show you the change with `npx playthrough`.
 
 ## In the viewer
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playthrough",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Review an AI agent's work on a web app by watching recordings of it.",
   "type": "module",
   "license": "Apache-2.0",

package/viewer/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
     <title>Playthrough</title>
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <script type="module" crossorigin src="/assets/index-Ds2iot3O.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-gTfnUrcK.css">
   </head>

package/viewer/logo.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <title>Playthrough</title>
+  <!-- The round before and the next, side by side, and a note over where they meet, in the viewer's own colours. -->
+  <style>
+    .round { fill: #2b2e35; }
+    .note { fill: #d9a23a; }
+    @media (prefers-color-scheme: dark) {
+      .round { fill: #e3e4e7; }
+      .note { fill: #e2b04f; }
+    }
+  </style>
+  <mask id="around-the-note">
+    <rect width="32" height="32" fill="#fff" />
+    <circle cx="16" cy="16" r="7" fill="#000" />
+  </mask>
+  <g mask="url(#around-the-note)">
+    <rect class="round" x="2" y="6" width="12" height="20" rx="3" opacity="0.35" />
+    <rect class="round" x="18" y="6" width="12" height="20" rx="3" />
+  </g>
+  <circle class="note" cx="16" cy="16" r="5" />
+</svg>