From fcf6d22f6f83b13af61b7c2c395d37411d40a92a Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Mon, 22 Dec 2025 14:18:27 +0000
Subject: Update makima FE to have autoscroll and simplify FE

---
 makima/frontend/src/routes/_index.tsx | 93 +++++++----------------------------
 makima/frontend/src/routes/listen.tsx | 10 ++--
 2 files changed, 22 insertions(+), 81 deletions(-)

(limited to 'makima/frontend/src/routes')

diff --git a/makima/frontend/src/routes/_index.tsx b/makima/frontend/src/routes/_index.tsx
index 568e300..4c3c2c0 100644
--- a/makima/frontend/src/routes/_index.tsx
+++ b/makima/frontend/src/routes/_index.tsx
@@ -1,91 +1,32 @@
 import { Masthead } from "../components/Masthead";
 import { Logo } from "../components/Logo";
-import { RewriteLink } from "../components/RewriteLink";
 
 export default function HomePage() {
   return (
     <div className="relative z-10 min-h-screen flex flex-col">
       <Masthead showTicker showNav />
 
-      <main className="flex-1 p-6 md:p-8">
-        <section className="grid grid-cols-1 md:grid-cols-[1.1fr_0.9fr] gap-6 items-center mb-8">
-          <div className="order-2 md:order-1">
-            <span className="inline-block px-2 py-1 border border-[#3f6fb3] bg-[#0f1c2f] text-[#9bc3ff] font-mono text-xs tracking-wide uppercase mb-3">
-              Real-time STT Platform
-            </span>
-            <h2 className="m-0 mb-3 text-xl text-[#f0f5ff] tracking-wide">
-              リアルタイム音声認識
-            </h2>
-            <p className="my-2 text-[#e4edff]">
-              Makima provides real-time speech-to-text transcription with speaker
-              diarization. Stream audio from your microphone or upload files for
-              instant transcription.
-            </p>
-            <p className="my-2 text-[#e4edff]">
-              高精度なリアルタイム音声認識エンジン。WebSocket
-              経由でストリーミング処理を行い、話者分離にも対応。
-            </p>
-
-            <div className="flex flex-wrap gap-3 mt-4">
-              <RewriteLink to="/listen" className="!py-2 !px-3 text-sm">
-                Start Listening
-              </RewriteLink>
-              <RewriteLink href="https://github.com/soryu-co" external className="!py-2 !px-3 text-sm">
-                GitHub
-              </RewriteLink>
-              <RewriteLink href="https://soryu.co" external className="!py-2 !px-3 text-sm">
-                soryu.co
-              </RewriteLink>
-            </div>
-          </div>
-
-          <div className="order-1 md:order-2 flex justify-center">
+      <main className="flex-1 p-6 md:p-8 flex flex-col items-center justify-center">
+        <section className="text-center max-w-xl">
+          <div className="flex justify-center mb-6">
             <Logo size={160} />
           </div>
-        </section>
 
-        <div className="panel p-4 md:p-5 relative">
-          <span className="absolute -top-2.5 left-3 px-1.5 py-0.5 bg-[#0f1c2f] border border-[#3f6fb3] font-mono text-xs tracking-wide">
-            FEATURES//MAKIMA
+          <span className="inline-block px-2 py-1 border border-[#3f6fb3] bg-[#0f1c2f] text-[#9bc3ff] font-mono text-xs tracking-wide uppercase mb-3">
+            Listening System
           </span>
-          <h3 className="mt-2 mb-3 text-lg text-[#eef5ff]">Platform Features</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3 text-sm text-[#e4edff]">
-            <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
-              <strong className="text-[#9bc3ff]">Real-time Streaming</strong>
-              <br />
-              WebSocket-based audio streaming with low latency transcription
-            </div>
-            <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
-              <strong className="text-[#9bc3ff]">Speaker Diarization</strong>
-              <br />
-              Automatic speaker identification and labeling
-            </div>
-            <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
-              <strong className="text-[#9bc3ff]">End-of-Utterance</strong>
-              <br />
-              Smart detection of speech boundaries
-            </div>
-            <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
-              <strong className="text-[#9bc3ff]">Multi-format</strong>
-              <br />
-              Support for PCM32F and PCM16 audio encoding
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-6 border border-[#0f3c78] bg-[#0f3c78] text-[#dbe7ff] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]">
-          <header className="border-b border-[rgba(197,219,255,0.4)] px-3 py-2.5 font-mono tracking-wide text-xs flex justify-between items-center">
-            <strong>API // makima.jp</strong>
-            <span className="text-[#92b8ff]">endpoint: wss://api.makima.jp</span>
-          </header>
-          <pre className="m-0 px-3 py-4 font-mono text-xs leading-relaxed bg-[linear-gradient(0deg,rgba(255,255,255,0.05)_1px,rgba(15,60,120,0.25)_1px)]">
-{`[001] endpoint ............... /api/v1/listen
-[002] protocol ............... WebSocket
-[003] encoding ............... pcm32f / pcm16
-[004] sample_rate ............ 16000 Hz (default)
-[005] features ............... transcription, diarization, eou`}
-          </pre>
-        </div>
+          <h2 className="m-0 mb-3 text-xl text-[#f0f5ff] tracking-wide">
+            Mesh Listening Lattice
+          </h2>
+          <p className="my-2 text-[#e4edff]">
+            Makima is a mesh listening lattice for contested domains, delivering
+            live audio surveillance, detection, and analysis in one persistent layer.
+          </p>
+          <p className="my-2 text-[#e4edff]">
+            Dynamic telemetry for detection, orchestration, and mission-critical
+            decisions. Real-time transcription with speaker diarization.
+          </p>
+        </section>
       </main>
 
       <footer className="px-4 py-3 border-t-4 border-double border-[#23477a] bg-gradient-to-b from-[rgba(11,18,32,0.95)] to-[rgba(14,26,45,0.7)] text-xs text-[#e4edff] text-center">
diff --git a/makima/frontend/src/routes/listen.tsx b/makima/frontend/src/routes/listen.tsx
index 06769fd..9ac0a94 100644
--- a/makima/frontend/src/routes/listen.tsx
+++ b/makima/frontend/src/routes/listen.tsx
@@ -126,22 +126,22 @@ export default function ListenPage() {
   const error = ws.error || mic.error;
 
   return (
-    <div className="relative z-10 min-h-screen flex flex-col">
+    <div className="relative z-10 h-screen flex flex-col overflow-hidden">
       <Masthead showTicker={false} showNav />
 
-      <main className="flex-1 p-4 md:p-6 grid grid-cols-1 md:grid-cols-[300px_1fr] grid-rows-[1fr_auto] md:grid-rows-[1fr_200px] gap-4 min-h-0">
+      <main className="flex-1 p-4 md:p-6 grid grid-cols-1 md:grid-cols-[300px_1fr] grid-rows-[minmax(0,1fr)_auto] md:grid-rows-[minmax(0,1fr)_auto] gap-4 min-h-0 overflow-hidden">
         {/* Speaker Panel - top left on desktop, hidden on mobile */}
-        <div className="hidden md:block row-span-1">
+        <div className="hidden md:block row-span-1 min-h-0 overflow-hidden">
           <SpeakerPanel speakers={speakers} />
         </div>
 
         {/* Transcript Panel - right side, spans 2 rows on desktop */}
-        <div className="md:row-span-2 min-h-[300px] md:min-h-0">
+        <div className="md:row-span-2 min-h-0 overflow-hidden">
           <TranscriptPanel transcripts={ws.transcripts} />
         </div>
 
         {/* Control Panel - bottom left on desktop */}
-        <div className="md:col-start-1 md:row-start-2">
+        <div className="md:col-start-1 md:row-start-2 shrink-0">
           <ControlPanel
             isListening={isListening}
             isConnected={ws.isConnected}
-- 
cgit v1.2.3