From 9d58d973732ceff7495e8e82cb964a666c9a5275 Mon Sep 17 00:00:00 2001
From: ginnoir <ginnoir@users.noreply.github.com>
Date: Thu, 11 Jun 2026 18:57:30 -0500
Subject: [PATCH] feat(ui): full-screen story panel with VN layout and story
 log

---
 src/ui/StoryPanel.tsx | 74 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/ui/StoryPanel.tsx

diff --git a/src/ui/StoryPanel.tsx b/src/ui/StoryPanel.tsx
new file mode 100644
index 0000000..833aedd
--- /dev/null
+++ b/src/ui/StoryPanel.tsx
@@ -0,0 +1,74 @@
+import { gameRuntime } from '../state/runtime';
+import { useGameStore } from '../state/store';
+
+/** Full-screen VN overlay with prose, choices, and desktop story log sidebar. */
+export function StoryPanel() {
+  const open = useGameStore((s) => s.storyPanelOpen);
+  const story = useGameStore((s) => s.story);
+  const storyLog = useGameStore((s) => s.storyLog);
+
+  if (!open) return null;
+
+  const hasChoices = story.choices.length > 0;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex bg-black/80"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Story"
+    >
+      <div className="flex flex-1 flex-col md:flex-row">
+        <aside className="hidden max-h-full w-full overflow-y-auto border-slate-700 border-r p-4 md:block md:w-1/3">
+          <h3 className="mb-2 font-medium text-slate-400 text-xs uppercase tracking-wide">
+            Story log
+          </h3>
+          <ul className="flex flex-col gap-2 text-slate-300 text-sm">
+            {storyLog.map((entry, i) => (
+              <li key={`${entry.nodeId}-${i}`}>
+                {entry.choiceLabel ? (
+                  <span className="text-amber-400/80">[{entry.choiceLabel}] </span>
+                ) : null}
+                {entry.prose}
+              </li>
+            ))}
+          </ul>
+        </aside>
+        <main className="flex flex-1 flex-col gap-4 p-6">
+          <p className="flex-1 text-lg text-slate-100 leading-relaxed">{story.currentProse}</p>
+          {hasChoices ? (
+            <div className="flex flex-col gap-2">
+              {story.choices.map((choice) => (
+                <button
+                  key={choice.id}
+                  type="button"
+                  disabled={choice.disabled}
+                  title={choice.disabled ? (choice.disabledReason ?? undefined) : undefined}
+                  onClick={() => gameRuntime.applyStoryChoice(choice.id)}
+                  className="rounded-lg border border-slate-600 bg-slate-900/60 px-4 py-3 text-left transition-colors hover:border-amber-500/60 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  {choice.label}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => gameRuntime.continueStory()}
+              className="self-start rounded-lg bg-amber-600 px-4 py-2 transition-colors hover:bg-amber-500"
+            >
+              Continue
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => gameRuntime.closeStoryPanel()}
+            className="self-end text-slate-400 text-sm transition-colors hover:text-slate-200"
+          >
+            Close
+          </button>
+        </main>
+      </div>
+    </div>
+  );
+}