From 546c6e75ea9554285fb544d960e2c9e62b406d55 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 16:38:37 +0000
Subject: [PATCH 1/3] [#331] Combine create + chain into tabbed page with Add
 Plot shortcut

- Unified /create page with [New] and [Add Plot] tabs
- New tab: full create storyline form (unchanged behavior)
- Add Plot tab: chain plot form with storyline selector
- ?tab=chain and ?storyline=<id> query params auto-select and prefill
- /chain now redirects to /create?tab=chain
- Removed "chain" link from NavBar
- Added AddPlotButton client component on story detail page,
  visible only to the connected writer, links to /create?tab=chain

Fixes #331

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/chain/page.tsx               | 243 +------------
 src/app/create/page.tsx              | 521 ++++++++++++++++++++-------
 src/app/story/[storylineId]/page.tsx |   4 +
 src/components/AddPlotButton.tsx     |  24 ++
 src/components/NavBar.tsx            |   1 -
 5 files changed, 421 insertions(+), 372 deletions(-)
 create mode 100644 src/components/AddPlotButton.tsx

diff --git a/src/app/chain/page.tsx b/src/app/chain/page.tsx
index 07172ae4..1c1e6b2c 100644
--- a/src/app/chain/page.tsx
+++ b/src/app/chain/page.tsx
@@ -1,234 +1,11 @@
-"use client";
-
-import { useState } from "react";
-import { useAccount } from "wagmi";
-import { useQuery } from "@tanstack/react-query";
-import {
-  validateContentLength,
-  MIN_CONTENT_LENGTH,
-  MAX_CONTENT_LENGTH,
-} from "../../../lib/content";
-import { supabase, type Storyline } from "../../../lib/supabase";
-import { STORY_FACTORY } from "../../../lib/contracts/constants";
-import { useChainPlot } from "../../hooks/useChainPlot";
-import { usePublishIntent } from "../../hooks/usePublishIntent";
-import { RecoveryBanner } from "../../components/RecoveryBanner";
-import type { PublishState } from "../../hooks/usePublish";
-import Link from "next/link";
-import { ConnectWallet } from "../../components/ConnectWallet";
-import { Select } from "../../components/Select";
-
-const STATE_LABELS: Record<PublishState, string> = {
-  idle: "",
-  uploading: "Uploading to IPFS...",
-  confirming: "Confirm in wallet...",
-  pending: "Publishing to Base...",
-  indexing: "Indexing...",
-  published: "Published!",
-  error: "Error",
-};
-
-async function fetchWriterStorylines(address: string): Promise<Storyline[]> {
-  if (!supabase) return [];
-  const { data } = await supabase
-    .from("storylines")
-    .select("*")
-    .eq("writer_address", address.toLowerCase())
-    .eq("hidden", false)
-    .eq("sunset", false)
-    .eq("contract_address", STORY_FACTORY.toLowerCase())
-    .order("block_timestamp", { ascending: false })
-    .returns<Storyline[]>();
-  return data ?? [];
-}
-
-export default function ChainPlotPage() {
-  const { address, isConnected } = useAccount();
-  const [storylineId, setStorylineId] = useState<number | null>(null);
-  const [title, setTitle] = useState("");
-  const [content, setContent] = useState("");
-
-  const { data: storylines = [], isLoading: loadingStorylines } = useQuery({
-    queryKey: ["writer-active-storylines", address],
-    queryFn: () => fetchWriterStorylines(address!),
-    enabled: isConnected && !!address,
-  });
-
-  const { pendingIntent, saveIntent, persistTxHash, clearIntent, attemptRetry } =
-    usePublishIntent();
-  const { state, error, chainPlot, reset } = useChainPlot({
-    onIntentSave: saveIntent,
-    onTxConfirmed: persistTxHash,
-    onIndexed: clearIntent,
-  });
-  const { valid, charCount } = validateContentLength(content);
-  const titleValid = title.trim().length > 0;
-  const canSubmit =
-    (state === "idle" || state === "error") &&
-    storylineId !== null &&
-    titleValid &&
-    valid;
-
-  if (!isConnected) {
-    return (
-      <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-4 px-6">
-        <p className="text-muted text-sm">
-          Connect your wallet to chain a plot.
-        </p>
-        <ConnectWallet />
-      </div>
-    );
-  }
-
-  if (state === "published") {
-    return (
-      <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-6 px-6">
-        <h1 className="text-accent text-2xl font-bold">Plot chained!</h1>
-        <div className="flex gap-3">
-          {storylineId && (
-            <Link
-              href={`/story/${storylineId}`}
-              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-sm transition-colors"
-            >
-              View story
-            </Link>
-          )}
-          <button
-            onClick={reset}
-            className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
-          >
-            Chain another
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  const busy = state !== "idle" && state !== "error";
-  const noStoryline = storylineId === null;
-
-  return (
-    <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
-        Chain Plot
-      </h1>
-
-      {pendingIntent && (
-        <div className="mt-6">
-          <RecoveryBanner
-            intent={pendingIntent}
-            onRetry={attemptRetry}
-            onDismiss={clearIntent}
-          />
-        </div>
-      )}
-
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          if (canSubmit) chainPlot(storylineId, content, title);
-        }}
-        className="mt-8 space-y-6"
-      >
-        {/* Storyline selector */}
-        <div>
-          <label className="text-foreground mb-2 block text-sm">
-            Storyline
-          </label>
-          {loadingStorylines ? (
-            <p className="text-muted text-sm">Loading storylines...</p>
-          ) : storylines.length === 0 ? (
-            <p className="text-muted text-sm">
-              No active storylines.{" "}
-              <Link href="/create" className="text-accent hover:underline">
-                Create one
-              </Link>
-            </p>
-          ) : (
-            <Select
-              value={storylineId != null ? String(storylineId) : ""}
-              onChange={(v) => setStorylineId(v ? Number(v) : null)}
-              disabled={busy}
-              placeholder="Select a storyline"
-              options={storylines.map((s) => ({
-                value: String(s.storyline_id),
-                label: `${s.title} (${s.plot_count} ${s.plot_count === 1 ? "plot" : "plots"})`,
-              }))}
-            />
-          )}
-        </div>
-
-        {/* Chapter title */}
-        <div>
-          <label className="text-foreground mb-2 block text-sm">
-            Chapter Title
-          </label>
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value.slice(0, 100))}
-            disabled={busy || noStoryline}
-            placeholder={noStoryline ? "Select a storyline first" : "e.g. The Silent Storm"}
-            maxLength={100}
-            className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
-          />
-          <div className="mt-1 flex justify-between text-xs">
-            {!titleValid && content.length > 0 ? (
-              <span className="text-error">Title is required</span>
-            ) : (
-              <span />
-            )}
-            <span className="text-muted">{title.length} / 100 chars</span>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div>
-          <label className="text-foreground mb-2 block text-sm">
-            Next Chapter
-          </label>
-          <textarea
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            disabled={busy || noStoryline}
-            rows={12}
-            placeholder={noStoryline ? "Select a storyline above to chain a plot" : "Write the next plot (500–10,000 characters)"}
-            className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
-          />
-          <div className="mt-1 text-xs">
-            <span
-              className={
-                content.length > 0 && !valid ? "text-error" : "text-muted"
-              }
-            >
-              {charCount.toLocaleString()} /{" "}
-              {MIN_CONTENT_LENGTH.toLocaleString()}–
-              {MAX_CONTENT_LENGTH.toLocaleString()} chars
-            </span>
-          </div>
-        </div>
-
-        {/* Status */}
-        {state === "error" && (
-          <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
-            {error}
-          </div>
-        )}
-        {busy && (
-          <div className="border-border text-muted rounded border px-3 py-2 text-xs">
-            {STATE_LABELS[state]}
-          </div>
-        )}
-
-        {/* Submit */}
-        <button
-          type="submit"
-          disabled={!canSubmit || busy}
-          className="border-accent text-accent hover:bg-accent hover:text-background w-full rounded border py-2.5 text-sm font-medium transition-colors disabled:opacity-50"
-        >
-          {busy ? STATE_LABELS[state] : "Chain Plot"}
-        </button>
-      </form>
-    </div>
-  );
+import { redirect } from "next/navigation";
+
+export default function ChainRedirect({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string>>;
+}) {
+  // Forward any query params (e.g. ?storyline=123)
+  void searchParams;
+  redirect("/create?tab=chain");
 }
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 57c7029a..4231b815 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -1,21 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { Suspense, useState, useEffect } from "react";
 import { useAccount } from "wagmi";
+import { useSearchParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
 import {
   validateContentLength,
   MIN_CONTENT_LENGTH,
   MAX_CONTENT_LENGTH,
 } from "../../../lib/content";
 import { usePublish, type PublishState } from "../../hooks/usePublish";
+import { useChainPlot } from "../../hooks/useChainPlot";
 import { usePublishIntent } from "../../hooks/usePublishIntent";
 import { RecoveryBanner } from "../../components/RecoveryBanner";
 import { storyFactoryAbi, storylineCreatedEvent } from "../../../lib/contracts/abi";
 import { STORY_FACTORY } from "../../../lib/contracts/constants";
+import { supabase, type Storyline } from "../../../lib/supabase";
 import { decodeEventLog, encodeEventTopics } from "viem";
 import Link from "next/link";
 import { ConnectWallet } from "../../components/ConnectWallet";
 import { DropdownSelect } from "../../components/DropdownSelect";
+import { Select } from "../../components/Select";
 import { GENRES, LANGUAGES } from "../../../lib/genres";
 
 const genreOptions = [
@@ -39,38 +44,128 @@ const STATE_LABELS: Record<PublishState, string> = {
   error: "Error",
 };
 
-export default function CreateStorylinePage() {
-  const { isConnected } = useAccount();
-  const [title, setTitle] = useState("");
+type Tab = "new" | "chain";
+
+async function fetchWriterStorylines(address: string): Promise<Storyline[]> {
+  if (!supabase) return [];
+  const { data } = await supabase
+    .from("storylines")
+    .select("*")
+    .eq("writer_address", address.toLowerCase())
+    .eq("hidden", false)
+    .eq("sunset", false)
+    .eq("contract_address", STORY_FACTORY.toLowerCase())
+    .order("block_timestamp", { ascending: false })
+    .returns<Storyline[]>();
+  return data ?? [];
+}
+
+export default function CreatePageWrapper() {
+  return (
+    <Suspense>
+      <CreatePage />
+    </Suspense>
+  );
+}
+
+function CreatePage() {
+  const searchParams = useSearchParams();
+  const { address, isConnected } = useAccount();
+
+  // Tab selection from query params
+  const initialTab: Tab =
+    searchParams.get("tab") === "chain" || searchParams.get("storyline")
+      ? "chain"
+      : "new";
+  const [tab, setTab] = useState<Tab>(initialTab);
+
+  // ---- New Storyline state ----
+  const [newTitle, setNewTitle] = useState("");
   const [genre, setGenre] = useState("");
   const [language, setLanguage] = useState("English");
-  const [content, setContent] = useState("");
-  const hasDeadline = true; // mandatory 7-day deadline for all storylines
-
-  const { state, error, receipt, execute } = usePublish();
-  const { pendingIntent, saveIntent, persistTxHash, clearIntent, attemptRetry } =
-    usePublishIntent();
-  const { valid, charCount } = validateContentLength(content);
-  const titleValid = title.trim().length > 0;
-  const genreValid = genre.length > 0;
-  const canSubmit =
-    state === "idle" || state === "error"
-      ? titleValid && genreValid && valid
+  const [newContent, setNewContent] = useState("");
+  const hasDeadline = true;
+
+  const { state: newState, error: newError, receipt, execute } = usePublish();
+  const {
+    pendingIntent: newPendingIntent,
+    saveIntent: newSaveIntent,
+    persistTxHash: newPersistTxHash,
+    clearIntent: newClearIntent,
+    attemptRetry: newAttemptRetry,
+  } = usePublishIntent();
+  const { valid: newValid, charCount: newCharCount } = validateContentLength(newContent);
+  const newTitleValid = newTitle.trim().length > 0;
+  const newGenreValid = genre.length > 0;
+  const newCanSubmit =
+    newState === "idle" || newState === "error"
+      ? newTitleValid && newGenreValid && newValid
       : false;
+  const newBusy = newState !== "idle" && newState !== "error";
+
+  // ---- Chain Plot state ----
+  const prefillStoryline = searchParams.get("storyline");
+  const [chainStorylineId, setChainStorylineId] = useState<number | null>(
+    prefillStoryline ? Number(prefillStoryline) : null,
+  );
+  const [chainTitle, setChainTitle] = useState("");
+  const [chainContent, setChainContent] = useState("");
+
+  const { data: storylines = [], isLoading: loadingStorylines } = useQuery({
+    queryKey: ["writer-active-storylines", address],
+    queryFn: () => fetchWriterStorylines(address!),
+    enabled: isConnected && !!address,
+  });
+
+  const {
+    pendingIntent: chainPendingIntent,
+    saveIntent: chainSaveIntent,
+    persistTxHash: chainPersistTxHash,
+    clearIntent: chainClearIntent,
+    attemptRetry: chainAttemptRetry,
+  } = usePublishIntent();
+  const {
+    state: chainState,
+    error: chainError,
+    chainPlot,
+    reset: chainReset,
+  } = useChainPlot({
+    onIntentSave: chainSaveIntent,
+    onTxConfirmed: chainPersistTxHash,
+    onIndexed: chainClearIntent,
+  });
+  const { valid: chainValid, charCount: chainCharCount } = validateContentLength(chainContent);
+  const chainTitleValid = chainTitle.trim().length > 0;
+  const chainCanSubmit =
+    (chainState === "idle" || chainState === "error") &&
+    chainStorylineId !== null &&
+    chainTitleValid &&
+    chainValid;
+  const chainBusy = chainState !== "idle" && chainState !== "error";
+
+  // Prefill storyline from query param when storylines load
+  useEffect(() => {
+    if (prefillStoryline && storylines.length > 0) {
+      const id = Number(prefillStoryline);
+      if (storylines.some((s) => s.storyline_id === id)) {
+        setChainStorylineId(id);
+      }
+    }
+  }, [prefillStoryline, storylines]);
 
   if (!isConnected) {
     return (
       <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-4 px-6">
         <p className="text-muted text-sm">
-          Connect your wallet to create a storyline.
+          Connect your wallet to create or chain a plot.
         </p>
         <ConnectWallet />
       </div>
     );
   }
 
-  if (state === "published") {
-    // Decode storylineId from receipt logs
+  // ---- New Storyline published state ----
+  if (tab === "new" && newState === "published") {
     let newStorylineId: number | null = null;
     if (receipt) {
       const log = receipt.logs.find((l) => l.topics[0] === STORYLINE_CREATED_TOPIC);
@@ -111,134 +206,284 @@ export default function CreateStorylinePage() {
     );
   }
 
-  const busy = state !== "idle" && state !== "error";
+  // ---- Chain Plot published state ----
+  if (tab === "chain" && chainState === "published") {
+    return (
+      <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-6 px-6">
+        <h1 className="text-accent text-2xl font-bold">Plot chained!</h1>
+        <div className="flex gap-3">
+          {chainStorylineId && (
+            <Link
+              href={`/story/${chainStorylineId}`}
+              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-sm transition-colors"
+            >
+              View story
+            </Link>
+          )}
+          <button
+            onClick={chainReset}
+            className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+          >
+            Chain another
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const noStoryline = chainStorylineId === null;
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
-        Create Storyline
-      </h1>
-
-      {pendingIntent && (
-        <div className="mt-6">
-          <RecoveryBanner
-            intent={pendingIntent}
-            onRetry={attemptRetry}
-            onDismiss={clearIntent}
-          />
-        </div>
-      )}
+      <h1 className="text-accent text-2xl font-bold tracking-tight">Create</h1>
 
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          if (canSubmit)
-            execute({
-              content,
-              uploadKeyPrefix: "plotlink/genesis",
-              indexerRoute: "/api/index/storyline",
-              buildWriteCall: (cid, contentHash) => ({
-                address: STORY_FACTORY,
-                abi: storyFactoryAbi as unknown as [],
-                functionName: "createStoryline",
-                args: [title.trim(), cid, contentHash, hasDeadline],
-                gas: BigInt(16_000_000),
-              }),
-              metadata: { genre, language },
-              onIntentSave: saveIntent,
-              onTxConfirmed: persistTxHash,
-              onIndexed: clearIntent,
-            });
-        }}
-        className="mt-8 space-y-6"
-      >
-        {/* Title */}
-        <div>
-          <label className="text-foreground mb-2 block text-sm">Title</label>
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            disabled={busy}
-            placeholder="Enter storyline title"
-            className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
-          />
-        </div>
+      {/* Tab bar */}
+      <div className="mt-6 flex gap-2">
+        <button
+          onClick={() => setTab("new")}
+          className={`rounded border px-3 py-1 text-xs font-medium transition-colors ${
+            tab === "new"
+              ? "border-accent text-accent"
+              : "border-border text-muted hover:text-foreground"
+          }`}
+        >
+          New
+        </button>
+        <button
+          onClick={() => setTab("chain")}
+          className={`rounded border px-3 py-1 text-xs font-medium transition-colors ${
+            tab === "chain"
+              ? "border-accent text-accent"
+              : "border-border text-muted hover:text-foreground"
+          }`}
+        >
+          Add Plot
+        </button>
+      </div>
 
-        {/* Genre + Language */}
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="text-foreground mb-2 block text-sm">Genre</label>
-            <DropdownSelect
-              value={genre}
-              onChange={setGenre}
-              options={genreOptions}
-              placeholder="Select genre..."
-              disabled={busy}
-            />
-          </div>
-          <div>
-            <label className="text-foreground mb-2 block text-sm">Language</label>
-            <DropdownSelect
-              value={language}
-              onChange={setLanguage}
-              options={languageOptions}
-              disabled={busy}
-            />
-          </div>
-        </div>
+      {/* ---- New Storyline Tab ---- */}
+      {tab === "new" && (
+        <>
+          {newPendingIntent && (
+            <div className="mt-6">
+              <RecoveryBanner
+                intent={newPendingIntent}
+                onRetry={newAttemptRetry}
+                onDismiss={newClearIntent}
+              />
+            </div>
+          )}
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (newCanSubmit)
+                execute({
+                  content: newContent,
+                  uploadKeyPrefix: "plotlink/genesis",
+                  indexerRoute: "/api/index/storyline",
+                  buildWriteCall: (cid, contentHash) => ({
+                    address: STORY_FACTORY,
+                    abi: storyFactoryAbi as unknown as [],
+                    functionName: "createStoryline",
+                    args: [newTitle.trim(), cid, contentHash, hasDeadline],
+                    gas: BigInt(16_000_000),
+                  }),
+                  metadata: { genre, language },
+                  onIntentSave: newSaveIntent,
+                  onTxConfirmed: newPersistTxHash,
+                  onIndexed: newClearIntent,
+                });
+            }}
+            className="mt-6 space-y-6"
+          >
+            <div>
+              <label className="text-foreground mb-2 block text-sm">Title</label>
+              <input
+                type="text"
+                value={newTitle}
+                onChange={(e) => setNewTitle(e.target.value)}
+                disabled={newBusy}
+                placeholder="Enter storyline title"
+                className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-foreground mb-2 block text-sm">Genre</label>
+                <DropdownSelect
+                  value={genre}
+                  onChange={setGenre}
+                  options={genreOptions}
+                  placeholder="Select genre..."
+                  disabled={newBusy}
+                />
+              </div>
+              <div>
+                <label className="text-foreground mb-2 block text-sm">Language</label>
+                <DropdownSelect
+                  value={language}
+                  onChange={setLanguage}
+                  options={languageOptions}
+                  disabled={newBusy}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="text-foreground mb-2 block text-sm">Opening Chapter</label>
+              <textarea
+                value={newContent}
+                onChange={(e) => setNewContent(e.target.value)}
+                disabled={newBusy}
+                rows={12}
+                placeholder="Write the genesis plot (500\u201310,000 characters)"
+                className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+              />
+              <div className="mt-1 flex justify-between text-xs">
+                <span className={newContent.length > 0 && !newValid ? "text-error" : "text-muted"}>
+                  {newCharCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}&ndash;
+                  {MAX_CONTENT_LENGTH.toLocaleString()} chars
+                </span>
+              </div>
+            </div>
+
+            <p className="text-muted text-xs">
+              All storylines have a 7-day deadline &mdash; the story sunsets if no new plot is added within 7 days.
+            </p>
 
-        {/* Content */}
-        <div>
-          <label className="text-foreground mb-2 block text-sm">
-            Opening Chapter
-          </label>
-          <textarea
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            disabled={busy}
-            rows={12}
-            placeholder="Write the genesis plot (500–10,000 characters)"
-            className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
-          />
-          <div className="mt-1 flex justify-between text-xs">
-            <span
-              className={
-                content.length > 0 && !valid ? "text-error" : "text-muted"
-              }
+            {newState === "error" && (
+              <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
+                {newError}
+              </div>
+            )}
+            {newBusy && (
+              <div className="border-border text-muted rounded border px-3 py-2 text-xs">
+                {STATE_LABELS[newState]}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={!newCanSubmit || newBusy}
+              className="border-accent text-accent hover:bg-accent hover:text-background w-full rounded border py-2.5 text-sm font-medium transition-colors disabled:opacity-50"
             >
-              {charCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}–
-              {MAX_CONTENT_LENGTH.toLocaleString()} chars
-            </span>
-          </div>
-        </div>
+              {newBusy ? STATE_LABELS[newState] : "Publish Storyline"}
+            </button>
+          </form>
+        </>
+      )}
 
-        {/* Deadline info */}
-        <p className="text-muted text-xs">
-          All storylines have a 7-day deadline — the story sunsets if no new plot is added within 7 days.
-        </p>
+      {/* ---- Add Plot Tab ---- */}
+      {tab === "chain" && (
+        <>
+          {chainPendingIntent && (
+            <div className="mt-6">
+              <RecoveryBanner
+                intent={chainPendingIntent}
+                onRetry={chainAttemptRetry}
+                onDismiss={chainClearIntent}
+              />
+            </div>
+          )}
 
-        {/* Status */}
-        {state === "error" && (
-          <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
-            {error}
-          </div>
-        )}
-        {busy && (
-          <div className="border-border text-muted rounded border px-3 py-2 text-xs">
-            {STATE_LABELS[state]}
-          </div>
-        )}
-
-        {/* Submit */}
-        <button
-          type="submit"
-          disabled={!canSubmit || busy}
-          className="border-accent text-accent hover:bg-accent hover:text-background w-full rounded border py-2.5 text-sm font-medium transition-colors disabled:opacity-50"
-        >
-          {busy ? STATE_LABELS[state] : "Publish Storyline"}
-        </button>
-      </form>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (chainCanSubmit) chainPlot(chainStorylineId, chainContent, chainTitle);
+            }}
+            className="mt-6 space-y-6"
+          >
+            <div>
+              <label className="text-foreground mb-2 block text-sm">Storyline</label>
+              {loadingStorylines ? (
+                <p className="text-muted text-sm">Loading storylines...</p>
+              ) : storylines.length === 0 ? (
+                <p className="text-muted text-sm">
+                  No active storylines.{" "}
+                  <button
+                    type="button"
+                    onClick={() => setTab("new")}
+                    className="text-accent hover:underline"
+                  >
+                    Create one
+                  </button>
+                </p>
+              ) : (
+                <Select
+                  value={chainStorylineId != null ? String(chainStorylineId) : ""}
+                  onChange={(v) => setChainStorylineId(v ? Number(v) : null)}
+                  disabled={chainBusy}
+                  placeholder="Select a storyline"
+                  options={storylines.map((s) => ({
+                    value: String(s.storyline_id),
+                    label: `${s.title} (${s.plot_count} ${s.plot_count === 1 ? "plot" : "plots"})`,
+                  }))}
+                />
+              )}
+            </div>
+
+            <div>
+              <label className="text-foreground mb-2 block text-sm">Chapter Title</label>
+              <input
+                type="text"
+                value={chainTitle}
+                onChange={(e) => setChainTitle(e.target.value.slice(0, 100))}
+                disabled={chainBusy || noStoryline}
+                placeholder={noStoryline ? "Select a storyline first" : "e.g. The Silent Storm"}
+                maxLength={100}
+                className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+              />
+              <div className="mt-1 flex justify-between text-xs">
+                {!chainTitleValid && chainContent.length > 0 ? (
+                  <span className="text-error">Title is required</span>
+                ) : (
+                  <span />
+                )}
+                <span className="text-muted">{chainTitle.length} / 100 chars</span>
+              </div>
+            </div>
+
+            <div>
+              <label className="text-foreground mb-2 block text-sm">Next Chapter</label>
+              <textarea
+                value={chainContent}
+                onChange={(e) => setChainContent(e.target.value)}
+                disabled={chainBusy || noStoryline}
+                rows={12}
+                placeholder={noStoryline ? "Select a storyline above to chain a plot" : "Write the next plot (500\u201310,000 characters)"}
+                className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+              />
+              <div className="mt-1 text-xs">
+                <span className={chainContent.length > 0 && !chainValid ? "text-error" : "text-muted"}>
+                  {chainCharCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}&ndash;
+                  {MAX_CONTENT_LENGTH.toLocaleString()} chars
+                </span>
+              </div>
+            </div>
+
+            {chainState === "error" && (
+              <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
+                {chainError}
+              </div>
+            )}
+            {chainBusy && (
+              <div className="border-border text-muted rounded border px-3 py-2 text-xs">
+                {STATE_LABELS[chainState]}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={!chainCanSubmit || chainBusy}
+              className="border-accent text-accent hover:bg-accent hover:text-background w-full rounded border py-2.5 text-sm font-medium transition-colors disabled:opacity-50"
+            >
+              {chainBusy ? STATE_LABELS[chainState] : "Chain Plot"}
+            </button>
+          </form>
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 4fb7330e..e508ef50 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -2,6 +2,7 @@ import { type Metadata } from "next";
 import { Suspense } from "react";
 import { createServerClient, type Storyline, type Plot } from "../../../../lib/supabase";
 import { DeadlineCountdown } from "../../../components/DeadlineCountdown";
+import { AddPlotButton } from "../../../components/AddPlotButton";
 import { TradingWidget } from "../../../components/TradingWidget";
 import { PriceChart } from "../../../components/PriceChart";
 import { DonateWidget } from "../../../components/DonateWidget";
@@ -284,6 +285,9 @@ function StoryHeader({
       ) : storyline.last_plot_time ? (
         <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
       ) : null}
+      {!storyline.sunset && (
+        <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} />
+      )}
     </header>
   );
 }
diff --git a/src/components/AddPlotButton.tsx b/src/components/AddPlotButton.tsx
new file mode 100644
index 00000000..91acdf7f
--- /dev/null
+++ b/src/components/AddPlotButton.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useAccount } from "wagmi";
+import Link from "next/link";
+
+export function AddPlotButton({
+  storylineId,
+  writerAddress,
+}: {
+  storylineId: number;
+  writerAddress: string;
+}) {
+  const { address } = useAccount();
+  if (!address || address.toLowerCase() !== writerAddress.toLowerCase())
+    return null;
+  return (
+    <Link
+      href={`/create?tab=chain&storyline=${storylineId}`}
+      className="border-accent text-accent hover:bg-accent/10 mt-3 block w-full rounded border py-2 text-center text-xs font-medium transition-colors"
+    >
+      + Add a new Plot
+    </Link>
+  );
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 5480c0e9..ffe690ec 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -10,7 +10,6 @@ const NAV_LINKS = [
   { href: "/create", label: "create" },
   { href: "/dashboard/writer", label: "writer" },
   { href: "/dashboard/reader", label: "reader" },
-  { href: "/chain", label: "chain" },
 ] as const;
 
 export function NavBar() {

From 9bca7d4fdbfa2238921b9e7ef8cc92d37bbdd2ed Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 16:40:34 +0000
Subject: [PATCH 2/3] [#331] Fix /chain redirect to forward query params

Await searchParams and forward all params (e.g. storyline=123)
to /create?tab=chain&storyline=123 so old deep links still work.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/chain/page.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/chain/page.tsx b/src/app/chain/page.tsx
index 1c1e6b2c..aa4605ba 100644
--- a/src/app/chain/page.tsx
+++ b/src/app/chain/page.tsx
@@ -1,11 +1,14 @@
 import { redirect } from "next/navigation";
 
-export default function ChainRedirect({
+export default async function ChainRedirect({
   searchParams,
 }: {
   searchParams: Promise<Record<string, string>>;
 }) {
-  // Forward any query params (e.g. ?storyline=123)
-  void searchParams;
-  redirect("/create?tab=chain");
+  const params = await searchParams;
+  const sp = new URLSearchParams({ tab: "chain" });
+  for (const [key, value] of Object.entries(params)) {
+    if (key !== "tab") sp.set(key, value);
+  }
+  redirect(`/create?${sp.toString()}`);
 }

From 5ffdd59f0f9347fae7fb996e36f26099b50140bb Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 16:43:09 +0000
Subject: [PATCH 3/3] [#331] Fix lint: remove useEffect for storyline prefill

The initial useState already reads from the query param, so the
effect was redundant. Removes the set-state-in-effect lint violation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/create/page.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 4231b815..be207abf 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useState, useEffect } from "react";
+import { Suspense, useState } from "react";
 import { useAccount } from "wagmi";
 import { useSearchParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
@@ -143,16 +143,6 @@ function CreatePage() {
     chainValid;
   const chainBusy = chainState !== "idle" && chainState !== "error";
 
-  // Prefill storyline from query param when storylines load
-  useEffect(() => {
-    if (prefillStoryline && storylines.length > 0) {
-      const id = Number(prefillStoryline);
-      if (storylines.some((s) => s.storyline_id === id)) {
-        setChainStorylineId(id);
-      }
-    }
-  }, [prefillStoryline, storylines]);
-
   if (!isConnected) {
     return (
       <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-4 px-6">