From aada63481c90f92c19394d67522480af6c9cfead Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 23 Apr 2026 15:33:26 +0900
Subject: [PATCH] [#954] Rename Agents nav to AI Writer, replace hero with
 install button + demo video
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nav label: "Agents" → "AI Writer" (URL stays /agents)
- Hero: removed 5-step guide + Quick Start code block (covered in Build tab)
- Added prominent "Install AI Writer" button linking to GitHub
- Added YouTube demo video embed below the button
- Updated NavBar test

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json                             |  2 +-
 src/app/agents/page.tsx                  | 54 ++++++++----------------
 src/components/NavBar.tsx                |  2 +-
 src/components/__tests__/NavBar.test.tsx |  2 +-
 4 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 4136ebf4..1e277dfb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/app/agents/page.tsx b/src/app/agents/page.tsx
index c02a010c..39678b73 100644
--- a/src/app/agents/page.tsx
+++ b/src/app/agents/page.tsx
@@ -128,42 +128,24 @@ function AgentsPageInner() {
           Anyone can become a fiction writer with just an idea. The OWS Writer pairs you with an AI co-writer to brainstorm, draft, and publish tokenized stories.
         </p>
 
-        {/* OWS Writer card */}
-        <div className="border-accent/20 bg-surface mt-6 rounded-lg border p-5">
-          {/* Steps */}
-          <div className="space-y-3 mb-5">
-            {[
-              { n: 1, title: "Install & run", desc: "One command to set up on your computer" },
-              { n: 2, title: "Connect your LLM", desc: "Anthropic, OpenAI, Gemini, or local models (Ollama, LM Studio)" },
-              { n: 3, title: "Chat with your AI writer", desc: "Brainstorm ideas, outline stories, refine drafts collaboratively" },
-              { n: 4, title: "Publish on-chain", desc: "The AI uploads to IPFS and signs the transaction via your OWS wallet" },
-              { n: 5, title: "Earn royalties", desc: "Every trade of your story token earns you 5% royalties automatically" },
-            ].map(({ n, title, desc }) => (
-              <div key={n} className="flex gap-3">
-                <div className="border-accent/30 text-accent flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-[10px] font-bold">{n}</div>
-                <div>
-                  <p className="text-foreground text-xs font-semibold">{title}</p>
-                  <p className="text-muted text-xs mt-0.5">{desc}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Quick start */}
-          <p className="text-foreground text-xs font-semibold mb-2">Quick Start</p>
-          <pre className="border-border bg-background text-foreground overflow-x-auto rounded border p-3 text-xs leading-relaxed font-mono">
-{`npx plotlink-ows init    # guided setup
-npx plotlink-ows         # start writing`}
-          </pre>
-
-          <a
-            href="https://github.com/realproject7/plotlink-ows"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-accent hover:underline mt-4 inline-block text-xs font-medium"
-          >
-            View full docs &rarr; github.com/realproject7/plotlink-ows
-          </a>
+        <a
+          href="https://github.com/realproject7/plotlink-ows"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bg-accent text-background hover:bg-accent/90 mt-5 inline-flex items-center gap-2 rounded px-5 py-2.5 text-sm font-semibold transition-colors"
+        >
+          Install AI Writer &rarr;
+        </a>
+
+        {/* Demo video */}
+        <div className="mt-6 aspect-video w-full overflow-hidden rounded-lg border border-[var(--border)]">
+          <iframe
+            src="https://www.youtube.com/embed/GWCLV1BZWdw"
+            title="PlotLink AI Writer Demo"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            className="h-full w-full"
+          />
         </div>
       </div>
 
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index c6b7a45c..5a8674a8 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -19,7 +19,7 @@ export function NavBar() {
   const navLinks = [
     { href: "/create", label: "Create" },
     { href: dashboardHref, label: "Dashboard" },
-    { href: "/agents", label: "Agents" },
+    { href: "/agents", label: "AI Writer" },
     { href: "/airdrop", label: "Airdrop" },
     { href: "/token", label: "$PLOT" },
   ];
diff --git a/src/components/__tests__/NavBar.test.tsx b/src/components/__tests__/NavBar.test.tsx
index 2b346e7b..3cce9dd1 100644
--- a/src/components/__tests__/NavBar.test.tsx
+++ b/src/components/__tests__/NavBar.test.tsx
@@ -41,6 +41,6 @@ describe("NavBar", () => {
     const createLinks = screen.getAllByText("Create");
     expect(createLinks[0].closest("a")).toHaveAttribute("href", "/create");
     expect(screen.getAllByText("Dashboard")[0].closest("a")).toHaveAttribute("href", "/dashboard/writer");
-    expect(screen.getAllByText("Agents")[0].closest("a")).toHaveAttribute("href", "/agents");
+    expect(screen.getAllByText("AI Writer")[0].closest("a")).toHaveAttribute("href", "/agents");
   });
 });