| | | 1 | | import { useEffect, useRef, useState } from "react"; |
| | | 2 | | import { useNavigate, useRouteLoaderData } from "react-router"; |
| | | 3 | | import type { ItemResponse, LocationResponse, RoomResponse } from "~/api/client"; |
| | | 4 | | import type { SessionUser } from "~/lib/session.server"; |
| | | 5 | | |
| | | 6 | | type Line = { kind: "in" | "out" | "err" | "info"; text: string }; |
| | | 7 | | |
| | 0 | 8 | | const INTRO: Line[] = [ |
| | | 9 | | { kind: "info", text: "clutter:stock terminal" }, |
| | | 10 | | { kind: "info", text: "type 'help' for commands · 'clear' to wipe · Esc to close" }, |
| | | 11 | | ]; |
| | | 12 | | |
| | 0 | 13 | | export function TuiTerminal({ open, onClose, items, rooms, locations, currentFilter, onFilter }: { |
| | | 14 | | open: boolean; |
| | | 15 | | onClose: () => void; |
| | | 16 | | items: ItemResponse[]; |
| | | 17 | | rooms: RoomResponse[]; |
| | | 18 | | locations: LocationResponse[]; |
| | | 19 | | currentFilter: string; |
| | | 20 | | onFilter: (text: string) => void; |
| | | 21 | | }) { |
| | 0 | 22 | | const inputRef = useRef<HTMLInputElement>(null); |
| | 0 | 23 | | const scrollRef = useRef<HTMLDivElement>(null); |
| | 0 | 24 | | const [history, setHistory] = useState<Line[]>(INTRO); |
| | 0 | 25 | | const [value, setValue] = useState(""); |
| | 0 | 26 | | const rootData = useRouteLoaderData("root") as { user: SessionUser | null } | undefined; |
| | 0 | 27 | | const user = rootData?.user ?? null; |
| | 0 | 28 | | const navigate = useNavigate(); |
| | | 29 | | |
| | 0 | 30 | | useEffect(() => { |
| | 0 | 31 | | if (open) { |
| | 0 | 32 | | inputRef.current?.focus(); |
| | | 33 | | } |
| | | 34 | | }, [open]); |
| | | 35 | | |
| | 0 | 36 | | useEffect(() => { |
| | 0 | 37 | | scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight }); |
| | | 38 | | }, [history]); |
| | | 39 | | |
| | 0 | 40 | | if (!open) return null; |
| | | 41 | | |
| | 0 | 42 | | function run(cmd: string) { |
| | 0 | 43 | | const trimmed = cmd.trim(); |
| | 0 | 44 | | if (!trimmed) return; |
| | 0 | 45 | | const echo: Line = { kind: "in", text: `$ ${trimmed}` }; |
| | | 46 | | |
| | 0 | 47 | | if (trimmed === "clear" || trimmed === "cls") { |
| | 0 | 48 | | setHistory([]); |
| | 0 | 49 | | return; |
| | | 50 | | } |
| | 0 | 51 | | if (trimmed === "exit" || trimmed === "q" || trimmed === ":q") { |
| | 0 | 52 | | onClose(); |
| | 0 | 53 | | return; |
| | | 54 | | } |
| | | 55 | | |
| | 0 | 56 | | const args = trimmed.split(/\s+/); |
| | 0 | 57 | | const head = args[0]!.toLowerCase(); |
| | 0 | 58 | | const rest = trimmed.slice(args[0]!.length).trim(); |
| | | 59 | | |
| | 0 | 60 | | if (trimmed === "help" || trimmed === "?") { |
| | 0 | 61 | | setHistory(h => [ |
| | | 62 | | ...h, echo, |
| | | 63 | | { kind: "out", text: "available commands:" }, |
| | | 64 | | { kind: "out", text: " help this list" }, |
| | | 65 | | { kind: "out", text: " clear / cls wipe scrollback" }, |
| | | 66 | | { kind: "out", text: " exit / q / :q close terminal" }, |
| | | 67 | | { kind: "out", text: " list rooms show all rooms" }, |
| | | 68 | | { kind: "out", text: " list items show all items" }, |
| | | 69 | | { kind: "out", text: " filter <text> narrow visible items" }, |
| | | 70 | | { kind: "out", text: " filter clear filter" }, |
| | | 71 | | { kind: "out", text: " whoami show current user" }, |
| | | 72 | | { kind: "out", text: " logout / signout sign out" }, |
| | | 73 | | ]); |
| | 0 | 74 | | return; |
| | | 75 | | } |
| | | 76 | | |
| | 0 | 77 | | if (head === "whoami") { |
| | 0 | 78 | | const lines = whoami(user); |
| | 0 | 79 | | setHistory(h => [...h, echo, ...lines]); |
| | 0 | 80 | | return; |
| | | 81 | | } |
| | | 82 | | |
| | 0 | 83 | | if (head === "logout" || head === "signout") { |
| | 0 | 84 | | setHistory(h => [...h, echo, { kind: "info", text: "signing out…" }]); |
| | 0 | 85 | | onClose(); |
| | | 86 | | // Defer slightly so the user sees the message before the redirect |
| | 0 | 87 | | setTimeout(() => navigate("/auth/signout"), 50); |
| | 0 | 88 | | return; |
| | | 89 | | } |
| | | 90 | | |
| | 0 | 91 | | if (head === "list") { |
| | 0 | 92 | | const sub = (args[1] ?? "").toLowerCase(); |
| | 0 | 93 | | if (sub === "rooms") { |
| | 0 | 94 | | const lines = listRooms(rooms, locations, items); |
| | 0 | 95 | | setHistory(h => [...h, echo, ...lines]); |
| | 0 | 96 | | return; |
| | | 97 | | } |
| | 0 | 98 | | if (sub === "items") { |
| | 0 | 99 | | const lines = listItems(items, rooms); |
| | 0 | 100 | | setHistory(h => [...h, echo, ...lines]); |
| | 0 | 101 | | return; |
| | | 102 | | } |
| | 0 | 103 | | setHistory(h => [...h, echo, { kind: "err", text: "usage: list rooms | list items" }]); |
| | 0 | 104 | | return; |
| | | 105 | | } |
| | | 106 | | |
| | 0 | 107 | | if (head === "filter") { |
| | 0 | 108 | | onFilter(rest); |
| | 0 | 109 | | const out: Line = rest |
| | | 110 | | ? { kind: "out", text: `filter set: "${rest}"` } |
| | | 111 | | : currentFilter |
| | | 112 | | ? { kind: "out", text: `filter cleared (was "${currentFilter}")` } |
| | | 113 | | : { kind: "out", text: "filter is empty" }; |
| | 0 | 114 | | setHistory(h => [...h, echo, out]); |
| | 0 | 115 | | return; |
| | | 116 | | } |
| | | 117 | | |
| | 0 | 118 | | setHistory(h => [...h, echo, { kind: "err", text: `unknown command: ${args[0]} (try 'help')` }]); |
| | | 119 | | } |
| | | 120 | | |
| | | 121 | | // (helpers `listRooms` / `listItems` are defined below) |
| | 0 | 122 | | return ( |
| | | 123 | | <div className="tui-terminal" role="region" aria-label="Terminal"> |
| | | 124 | | <span className="tui-panel-title">─[ terminal ]─</span> |
| | | 125 | | <button |
| | | 126 | | type="button" |
| | | 127 | | onClick={onClose} |
| | | 128 | | className="tui-terminal-close" |
| | | 129 | | aria-label="Close terminal" |
| | | 130 | | >[x]</button> |
| | | 131 | | |
| | | 132 | | <div ref={scrollRef} className="tui-terminal-history"> |
| | 0 | 133 | | {history.map((line, i) => ( |
| | 0 | 134 | | <div key={i} className={`tui-terminal-line tui-terminal-line--${line.kind}`}> |
| | | 135 | | {line.text} |
| | | 136 | | </div> |
| | | 137 | | ))} |
| | | 138 | | </div> |
| | | 139 | | |
| | | 140 | | <form |
| | | 141 | | className="tui-terminal-prompt" |
| | 0 | 142 | | onSubmit={(e) => { |
| | 0 | 143 | | e.preventDefault(); |
| | 0 | 144 | | run(value); |
| | 0 | 145 | | setValue(""); |
| | | 146 | | }} |
| | | 147 | | > |
| | | 148 | | <span className="tui-terminal-sigil">$</span> |
| | | 149 | | <input |
| | | 150 | | ref={inputRef} |
| | | 151 | | type="text" |
| | | 152 | | value={value} |
| | 0 | 153 | | onChange={(e) => setValue(e.target.value)} |
| | 0 | 154 | | onKeyDown={(e) => { |
| | 0 | 155 | | if (e.key === "Escape") { |
| | 0 | 156 | | e.preventDefault(); |
| | 0 | 157 | | e.stopPropagation(); |
| | 0 | 158 | | onClose(); |
| | | 159 | | } |
| | | 160 | | }} |
| | | 161 | | spellCheck={false} |
| | | 162 | | autoCorrect="off" |
| | | 163 | | autoCapitalize="off" |
| | | 164 | | className="tui-terminal-input" |
| | | 165 | | aria-label="Command" |
| | | 166 | | /> |
| | | 167 | | <span className="tui-cursor">▌</span> |
| | | 168 | | </form> |
| | | 169 | | </div> |
| | | 170 | | ); |
| | | 171 | | } |
| | | 172 | | |
| | 0 | 173 | | function pad(s: string, width: number): string { |
| | 0 | 174 | | if (s.length >= width) return s.slice(0, width - 1) + "…"; |
| | 0 | 175 | | return s + " ".repeat(width - s.length); |
| | | 176 | | } |
| | | 177 | | |
| | 0 | 178 | | function whoami(user: SessionUser | null): Line[] { |
| | 0 | 179 | | if (!user) return [{ kind: "err", text: "(unauthenticated)" }]; |
| | 0 | 180 | | const groups = (user.groups ?? []).filter(Boolean); |
| | 0 | 181 | | const rows: [string, string][] = [ |
| | | 182 | | ["user", user.name ?? user.preferred_username ?? user.sub], |
| | | 183 | | ["username", user.preferred_username ?? "(none)"], |
| | | 184 | | ["email", user.email ?? "(none)"], |
| | | 185 | | ["groups", groups.length > 0 ? groups.join(", ") : "(none)"], |
| | | 186 | | ["sub", user.sub], |
| | | 187 | | ]; |
| | 0 | 188 | | return rows.map(([k, v]) => ({ kind: "out", text: `${pad(k, 10)}: ${v}` })); |
| | | 189 | | } |
| | | 190 | | |
| | 0 | 191 | | function listRooms(rooms: RoomResponse[], locations: LocationResponse[], items: ItemResponse[]): Line[] { |
| | 0 | 192 | | const locationById = new Map(locations.map(l => [l.id, l])); |
| | 0 | 193 | | const lines: Line[] = [ |
| | | 194 | | { kind: "out", text: pad("ID", 5) + pad("LOCATION", 22) + pad("ROOM", 24) + "ITEMS" }, |
| | | 195 | | ]; |
| | 0 | 196 | | if (rooms.length === 0) { |
| | 0 | 197 | | lines.push({ kind: "out", text: "(no rooms)" }); |
| | 0 | 198 | | return lines; |
| | | 199 | | } |
| | 0 | 200 | | for (const r of rooms) { |
| | 0 | 201 | | const loc = r.locationId != null ? locationById.get(r.locationId) : null; |
| | 0 | 202 | | const count = items.filter(i => i.roomId === r.id).length; |
| | 0 | 203 | | lines.push({ |
| | | 204 | | kind: "out", |
| | | 205 | | text: |
| | | 206 | | pad(String(r.id ?? "—"), 5) + |
| | | 207 | | pad(loc?.name ?? "—", 22) + |
| | | 208 | | pad(r.name ?? "—", 24) + |
| | | 209 | | String(count), |
| | | 210 | | }); |
| | | 211 | | } |
| | 0 | 212 | | lines.push({ kind: "out", text: `${rooms.length} room${rooms.length === 1 ? "" : "s"}` }); |
| | 0 | 213 | | return lines; |
| | | 214 | | } |
| | | 215 | | |
| | 0 | 216 | | function listItems(items: ItemResponse[], rooms: RoomResponse[]): Line[] { |
| | 0 | 217 | | const roomById = new Map(rooms.map(r => [r.id, r])); |
| | 0 | 218 | | const lines: Line[] = [ |
| | | 219 | | { kind: "out", text: pad("ID", 6) + pad("NAME", 28) + pad("ROOM", 18) + "CATEGORY" }, |
| | | 220 | | ]; |
| | 0 | 221 | | if (items.length === 0) { |
| | 0 | 222 | | lines.push({ kind: "out", text: "(no items)" }); |
| | 0 | 223 | | return lines; |
| | | 224 | | } |
| | | 225 | | // Cap at 200 lines to keep scrollback manageable |
| | 0 | 226 | | const max = 200; |
| | 0 | 227 | | const head = items.slice(0, max); |
| | 0 | 228 | | for (const it of head) { |
| | 0 | 229 | | const room = it.roomId != null ? roomById.get(it.roomId) : null; |
| | 0 | 230 | | lines.push({ |
| | | 231 | | kind: "out", |
| | | 232 | | text: |
| | | 233 | | pad(String(it.id ?? "—").padStart(3, "0"), 6) + |
| | | 234 | | pad(it.name ?? "—", 28) + |
| | | 235 | | pad(room?.name ?? "—", 18) + |
| | | 236 | | (it.category ?? "—"), |
| | | 237 | | }); |
| | | 238 | | } |
| | 0 | 239 | | if (items.length > max) { |
| | 0 | 240 | | lines.push({ kind: "out", text: `… ${items.length - max} more (use 'filter <text>' to narrow)` }); |
| | | 241 | | } |
| | 0 | 242 | | lines.push({ kind: "out", text: `${items.length} item${items.length === 1 ? "" : "s"}` }); |
| | 0 | 243 | | return lines; |
| | | 244 | | } |