feat(ui): story tab with tree and prose log

src/ui/StoryView.tsx

@@ -1,76 +1,43 @@
 import { gameRuntime } from '../state/runtime';
 import { useGameStore } from '../state/store';
+import { StoryProseLog } from './StoryProseLog';
+import { StoryTree } from './StoryTree';
 
 export function StoryView() {
-  const story = useGameStore((s) => s.story);
-  const storyLog = useGameStore((s) => s.storyLog);
+  const tree = useGameStore((s) => s.story.tree);
+  const log = useGameStore((s) => s.storyLog);
+  const selectedId = useGameStore((s) => s.selectedStoryNodeId);
+  const currentProse = useGameStore((s) => s.story.currentProse);
+  const choicesLength = useGameStore((s) => s.story.choices.length);
 
-  const hasChoices = story.choices.length > 0;
+  // Boot intro: show Continue button when there's prose, no choices, and no tree yet
+  const isBootIntro = currentProse != null && choicesLength === 0 && tree.length === 0;
+
+  if (isBootIntro) {
+    return (
+      <div className="flex h-[calc(100dvh-6rem)] flex-col items-center justify-center gap-6">
+        <p className="max-w-lg text-center text-lg leading-relaxed text-slate-100 whitespace-pre-wrap">
+          {currentProse}
+        </p>
+        <button
+          type="button"
+          onClick={() => gameRuntime.continueStory()}
+          className="cursor-pointer rounded-lg bg-amber-600 px-6 py-2.5 font-medium text-slate-100 transition-colors hover:bg-amber-500"
+        >
+          Continue
+        </button>
+      </div>
+    );
+  }
 
   return (
-    <div className="flex h-full flex-col gap-8 lg:grid lg:grid-cols-3">
-      {/* Story Log Section */}
-      <div className="order-2 flex max-h-[30vh] flex-col overflow-y-auto border-slate-800 border-t pt-6 lg:order-1 lg:max-h-[calc(100vh-6rem)] lg:border-t-0 lg:border-r lg:pt-0 lg:pr-6">
-        <h2 className="mb-4 text-xs font-semibold text-slate-400 tracking-wider uppercase">
-          Story Log
-        </h2>
-        {storyLog.length === 0 ? (
-          <p className="text-sm text-slate-500 italic">The chronicle is empty...</p>
-        ) : (
-          <ul className="space-y-3 text-sm text-slate-300">
-            {storyLog.map((entry) => (
-              <li
-                key={`${entry.nodeId}:${entry.choiceLabel ?? ''}:${entry.prose}`}
-                className="border-slate-900 border-b pb-2 last:border-0"
-              >
-                {entry.choiceLabel ? (
-                  <span className="font-medium text-amber-400/80">[{entry.choiceLabel}] </span>
-                ) : null}
-                <span className="leading-relaxed">{entry.prose}</span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-
-      {/* Active Node Section */}
-      <div className="order-1 flex min-h-[300px] flex-col justify-between rounded-xl border border-slate-800/60 bg-slate-900/40 p-6 shadow-inner lg:order-2 lg:col-span-2">
-        <div className="flex flex-1 flex-col justify-center">
-          <p className="text-lg text-slate-100 leading-relaxed whitespace-pre-wrap">
-            {story.currentProse ||
-              'The path ahead is shrouded in mist. Begin an action to unveil your story.'}
-          </p>
-        </div>
-
-        {story.currentProse && (
-          <div className="mt-6 border-slate-800/80 border-t pt-6">
-            {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="w-full cursor-pointer rounded-lg border border-slate-700 bg-slate-950/40 px-4 py-3 text-left text-slate-200 transition-all duration-200 hover:border-amber-500/60 hover:bg-slate-900/60 disabled:cursor-not-allowed disabled:opacity-40"
-                  >
-                    {choice.label}
-                  </button>
-                ))}
-              </div>
-            ) : (
-              <button
-                type="button"
-                onClick={() => gameRuntime.continueStory()}
-                className="cursor-pointer rounded-lg bg-amber-600 px-6 py-2.5 font-medium text-slate-100 transition-colors hover:bg-amber-500"
-              >
-                Continue
-              </button>
-            )}
-          </div>
-        )}
-      </div>
+    <div className="grid h-[calc(100dvh-6rem)] grid-cols-[3fr_2fr] gap-4">
+      <StoryTree
+        nodes={tree}
+        selectedId={selectedId}
+        onSelect={(id) => useGameStore.getState().setSelectedStoryNodeId(id)}
+      />
+      <StoryProseLog log={log} selectedId={selectedId} />
     </div>
   );
 }