fix(canvas): keep comments available with Pick & polish

.github/extensions/replica-prototype/marketplace.test.mjs

@@ -16,7 +16,7 @@ it("resolves the marketplace's relative source to the shipped plugin", async ()
   )
   const manifest = JSON.parse(await readFile(new URL(`${plugin.source}/plugin.json`, root)))
   assert.equal(manifest.name, plugin.name)
-  assert.equal(manifest.version, "1.5.0")
+  assert.equal(manifest.version, "1.5.1")
   const skill = await readFile(
     new URL(`${plugin.source}/skills/replica-publish-prototype/SKILL.md`, root),
     "utf8",

.github/extensions/replica-prototype/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "replica-prototype",
   "description": "Wrap a running prototype with Replica publish controls and repository status.",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "author": {
     "name": "GitHub"
   },

hub/app/javascript/application/prototype-canvas/index.tsx

@@ -59,6 +59,11 @@ export function App({ config }: Props) {
     collapsedGroups: {},
   })
   const [hubOpen, setHubOpen] = useState(false)
+  const [reviewSurface, setReviewSurface] = useState<"comments" | "improvements">(
+    config.pickAndPolish ? "improvements" : "comments",
+  )
+  const [commentInteraction, setCommentInteraction] = useState(false)
+  const [improvementInteraction, setImprovementInteraction] = useState(false)
   const [improvementControls, setImprovementControls] = useState<HTMLDivElement | null>(null)
   const [buildDetailsOpen, setBuildDetailsOpen] = useState(false)
   const feedbackInFlight = useRef(false)
@@ -300,6 +305,10 @@ export function App({ config }: Props) {
 
         <PrototypeCanvasHubPanel
           config={config}
+          active={reviewSurface === "comments"}
+          onActivate={() => setReviewSurface("comments")}
+          selectionDisabled={improvementInteraction}
+          onInteractionChange={setCommentInteraction}
           frameRef={frameRef}
           onRouteChange={reportRoute}
           status={hub.status}
@@ -339,7 +348,13 @@ export function App({ config }: Props) {
                 prototypeUrl: config.prototypeUrl,
                 previewUrl: config.previewUrl,
                 hubOpen,
-                onOpenNotes: () => setHubOpen(false),
+                active: reviewSurface === "improvements",
+                selectionDisabled: commentInteraction,
+                onInteractionChange: setImprovementInteraction,
+                onOpenNotes: () => {
+                  setHubOpen(false)
+                  setReviewSurface("improvements")
+                },
                 onNavigate: navigate,
               }}
             />

hub/app/javascript/application/prototype-canvas/stories.tsx

@@ -16,12 +16,14 @@ function PublicationDemo({
   prototypeUrl,
   withShareLinks = false,
   withComments = false,
+  withPickAndPolish = false,
   onImproveContext,
 }: {
   scenario: string
   prototypeUrl: string
   withShareLinks?: boolean
   withComments?: boolean
+  withPickAndPolish?: boolean
   onImproveContext?: () => void
 }) {
   const [ready, setReady] = useState(false)
@@ -191,6 +193,34 @@ function PublicationDemo({
           hasMore: false,
           nextCursor: null,
         }
+      else if (
+        withPickAndPolish &&
+        (path === "/api/improvement-notes" || path === "/api/improvement-notes/sync")
+      )
+        data = {
+          identity: "storybook-notes",
+          revision: 1,
+          syncError: null,
+          activeBatch: null,
+          notes: [
+            {
+              id: 1,
+              localId: "storybook-save-action",
+              kind: "improvement_note",
+              author: "local",
+              body: "Keep the save action visible while editing project details.",
+              thread: { originalStatus: "open", messages: [] },
+              anchor: repliedReviewThread.root.anchor,
+              status: "open",
+              sync: "local",
+              revision: 1,
+              route: "/",
+              target: "Save",
+              selector: "#save",
+              rect: { x: 64, y: 180, width: 88, height: 44 },
+            },
+          ],
+        }
       else if (withComments && /^\/api\/hub\/comments\/\d+\/read$/.test(path)) {
         const id = Number(path.split("/").at(-2))
         const root = comments.find((comment) => comment.id === id && comment.kind === "root")
@@ -228,12 +258,19 @@ function PublicationDemo({
       window.clearTimeout(timer)
       window.fetch = originalFetch
     }
-  }, [scenario, withShareLinks, withComments, onImproveContext])
+  }, [scenario, withShareLinks, withComments, withPickAndPolish, onImproveContext])
   return (
     <div className="publication-demo">
       <div className="publication-demo-canvas">
         {ready ? (
-          <App config={{ prototypeUrl, name: "Welcome prototype", token: "fixture-only" }} />
+          <App
+            config={{
+              prototypeUrl,
+              name: "Welcome prototype",
+              token: "fixture-only",
+              pickAndPolish: withPickAndPolish,
+            }}
+          />
         ) : null}
       </div>
     </div>
@@ -263,7 +300,7 @@ const meta = {
   argTypes: { scenario: { control: "select", options: Object.keys(publicationExamples) } },
   render: (args) => (
     <PublicationDemo
-      key={`${args.scenario}/${args.withShareLinks}/${args.withComments}`}
+      key={`${args.scenario}/${args.withShareLinks}/${args.withComments}/${args.withPickAndPolish}`}
       {...args}
     />
   ),
@@ -407,6 +444,30 @@ export const CommentsSidebar: Story = {
       throw new Error("The compact avatar must align above the unread dot beside the author.")
   },
 }
+
+export const CommentsAndPickAndPolish: Story = {
+  args: {
+    scenario: "Published",
+    withComments: true,
+    withPickAndPolish: true,
+  },
+  render: (args) => (
+    <PublicationDemo
+      {...args}
+      prototypeUrl={new URL("/prototype-preview/index.html", window.location.href).href}
+    />
+  ),
+}
+
+export const CommentsWithPickAndPolishSidebar: Story = {
+  ...CommentsAndPickAndPolish,
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(
+      await canvas.findByRole("button", { name: /^Comments, 3/ }, { timeout: 5_000 }),
+    )
+    await canvas.findByRole("complementary", { name: "Comments" })
+  },
+}
 export const ShareManagement: Story = {
   args: {
     scenario: "Published",