Refine terminal copy and inline wrapped clickable link rows

ReKylee · ReKylee · commit cabc961b4448 · 2026-02-27T02:55:45.000+02:00
diff --git a/src/lib/components/features/terminal/BootSequence.svelte b/src/lib/components/features/terminal/BootSequence.svelte
@@ -4,13 +4,13 @@ import { accessibility } from "$lib/stores/accessibility";
 import { finishBooting } from "$lib/stores/terminalStore";
 
     const lines = [
-        "HANDSHAKE: KYLEE-LINK v2.4",
-        "AUTH: VERIFYING TRANSMISSION KEYS",
+        "ATZ",
+        "ATDT KYLEE-BBS",
         "",
-        "ROUTING: SYNCHRONIZING RELAY NODES",
-        "PROFILE: LOADING OPERATOR DATA",
-        "ACCESS: CLEARANCE CONFIRMED",
-        "CHANNEL OPEN. WELCOME, GUEST.",
+        "CONNECT 9600",
+        "LOGIN: guest",
+        "MESSAGE BASE: SCANNING NEW",
+        "MAIN MENU READY. TYPE HELP.",
     ];
 
     const progressLineIndex = 2;
diff --git a/src/lib/components/features/terminal/FileExplorer.svelte b/src/lib/components/features/terminal/FileExplorer.svelte
@@ -91,11 +91,11 @@
     in:fade={{ duration: $accessibility.reducedMotion ? 0 : 150 }}
     class="flex h-full min-h-0 flex-col">
     <div class="w-full">
-        <p class="text-ctp-green">RX: ARCHIVE TRAFFIC ONLINE</p>
+        <p class="text-ctp-green">MESSAGE BASE</p>
         <p class="text-xs text-ctp-subtext0">
-            MODE: RADIO LOG | ARROWS: NAV | ENTER: OPEN TRANSMISSION
+            COMMANDS: ARROWS MOVE | ENTER READ | ESC BACK
         </p>
-        <p class="mt-1 text-xs text-ctp-subtext1">CHANNELS: 01-09 | STREAM: STABLE</p>
+        <p class="mt-1 text-xs text-ctp-subtext1">SCAN: NEW MAIL | STATUS: ONLINE</p>
     </div>
     <div
         class="my-4 min-h-0 flex-1 overflow-auto">
@@ -125,7 +125,7 @@
     </div>
     <div class="mt-1 flex w-full flex-shrink-0 items-center">
         <p class="flex items-baseline">
-            <span>RX_READY&gt;&nbsp;</span>
+            <span>BBS&gt;&nbsp;</span>
             <BlinkingCursor />
         </p>
     </div>
diff --git a/src/lib/components/features/terminal/ProjectFile.svelte b/src/lib/components/features/terminal/ProjectFile.svelte
@@ -5,7 +5,7 @@ export let index: number;
 
     $: seq = String(index + 1).padStart(2, "0");
     $: id = project.id.slice(-6).toUpperCase();
-    $: channel = `CH-${String((index % 9) + 1).padStart(2, "0")}`;
+    $: channel = `AREA-${String((index % 9) + 1).padStart(2, "0")}`;
     $: stamp = project.date.toUpperCase();
 </script>
 
diff --git a/src/lib/components/features/terminal/ProjectView.svelte b/src/lib/components/features/terminal/ProjectView.svelte
@@ -6,6 +6,7 @@
     import { crtShutdown } from "$lib/transitions/crtShutdown";
     import { fade } from "svelte/transition";
     export let project: Project;
+    // TODO: Redesign project view layout/content hierarchy while preserving terminal aesthetic.
 
     const wrap = (text: string, width: number) => {
         const words = text.split(/\s+/);
@@ -27,23 +28,59 @@
     const BOX_WIDTH = 60;
     const CONTENT_WIDTH = BOX_WIDTH - 2;
     const BORDER = `+${"-".repeat(CONTENT_WIDTH)}+`;
+    const FIELD_LABEL = "SOURCE  :: ";
+    const FIELD_INDENT = " ".repeat(FIELD_LABEL.length);
     const line = (label: string, value = "") =>
         `|${(` ${label}${value}`).slice(0, CONTENT_WIDTH).padEnd(CONTENT_WIDTH, " ")}|`;
+    const splitForField = (label: string, value: string) => {
+        const prefix = ` ${label}`;
+        const width = Math.max(8, CONTENT_WIDTH - prefix.length);
+        const normalized = value.trim();
+        if (!normalized) return [""];
+
+        const breakChars = new Set(["/", "?", "&", "=", "#", "-", "_", "."]);
+        const segments: string[] = [];
+        let remaining = normalized;
+
+        while (remaining.length > width) {
+            let breakAt = -1;
+            for (let i = 0; i < width; i++) {
+                if (breakChars.has(remaining[i])) {
+                    breakAt = i + 1;
+                }
+            }
+
+            if (breakAt <= 0) {
+                breakAt = width;
+            }
+
+            segments.push(remaining.slice(0, breakAt));
+            remaining = remaining.slice(breakAt);
+        }
+
+        segments.push(remaining);
+        return segments.filter((segment) => segment.length > 0);
+    };
     $: descLines = wrap(project.description, CONTENT_WIDTH - 2);
+    $: visualSrc = project.visual?.src ?? "";
+    $: visualSrcLower = visualSrc.toLowerCase();
+    $: isVideoAsset = visualSrcLower.endsWith(".webm") || visualSrcLower.endsWith(".mp4");
+    $: videoMimeType = visualSrcLower.endsWith(".webm") ? "video/webm" : "video/mp4";
+    $: sourceLink = project.links?.github ?? "";
+    $: previewLink = project.links?.live ?? "";
+    $: sourceChunks = splitForField(FIELD_LABEL, sourceLink || "NONE");
+    $: previewChunks = splitForField("PREVIEW :: ", previewLink || "NONE");
     $: printout = [
         BORDER,
-        line("RECORD :: ", project.title),
-        line("ID     :: ", project.id.toUpperCase()),
-        line("STAMP  :: ", project.date),
-        line("CLASS  :: ", project.extension.toUpperCase()),
-        line("TECH   :: ", project.tech.join(" | ")),
+        line("SUBJ    :: ", project.title),
+        line("MSG#    :: ", project.id.toUpperCase()),
+        line("POSTED  :: ", project.date),
+        line("FORMAT  :: ", project.extension.toUpperCase()),
+        line("KEYWORDS:: ", project.tech.join(" | ")),
         BORDER,
-        line("BRIEFING"),
+        line("TEXT"),
         ...descLines.map((entry) => line("", entry)),
         BORDER,
-        line("CODE UPLINK :: ", project.links?.github ? "ONLINE" : "OFFLINE"),
-        line("LIVE UPLINK :: ", project.links?.live ? "ONLINE" : "OFFLINE"),
-        BORDER,
     ].join("\n");
 
     let viewEl: HTMLDivElement;
@@ -70,14 +107,14 @@
     out:crtShutdown={{ duration: $accessibility.reducedMotion ? 0 : 550 }}
     class="project-view absolute inset-0 flex h-full max-h-full min-h-0 flex-col">
     <header class="mb-4 flex-shrink-0">
-        <p>RX: OPEN_RECORD {project.id.toUpperCase()}</p>
+        <p>READ MAIL {project.id.toUpperCase()}</p>
     </header>
 
     <main class="flex-grow overflow-auto min-h-0">
         <div class="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] md:gap-x-4">
             <div class="visual-container mb-8 md:mb-0">
                 {#if project.visual && project.visual.src}
-                    {#if project.visual.type === "image"}
+                    {#if project.visual.type === "image" && !isVideoAsset}
                         <img
                             src={project.visual.src}
                             alt={project.title}
@@ -87,9 +124,14 @@
                                     e.currentTarget as HTMLImageElement
                                 ).style.display = "none";
                             }} />
-                    {:else if project.visual.type === "video"}
-                        <video controls class="w-full h-auto border-2 border-ctp-surface1 p-1">
-                            <source src={project.visual.src} type="video/mp4" />
+                    {:else if project.visual.type === "video" || isVideoAsset}
+                        <video
+                            autoplay
+                            loop
+                            muted
+                            playsinline
+                            class="w-full h-auto border-2 border-ctp-surface1 p-1">
+                            <source src={project.visual.src} type={videoMimeType} />
                             Your browser does not support the video tag.
                         </video>
                     {:else if project.visual.type === "embed"}
@@ -121,6 +163,59 @@
 
             <div class="details-container">
                 <pre class="text-ctp-text text-xs sm:text-sm overflow-x-auto">{printout}</pre>
+                <div class="ascii-link-block mt-0 text-xs sm:text-sm">
+                    {#if sourceLink}
+                        <a
+                            href={sourceLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="ascii-link-group">
+                            {#each sourceChunks as chunk, index (`source-${index}`)}
+                                <span class="ascii-link-line">
+                                    <span class="ascii-side">|</span>
+                                    <span class="ascii-label">{index === 0 ? ` ${FIELD_LABEL}` : ` ${FIELD_INDENT}`}</span>
+                                    <span class="ascii-link-value">{chunk}</span>
+                                    <span class="ascii-side">|</span>
+                                </span>
+                            {/each}
+                        </a>
+                    {:else}
+                        {#each sourceChunks as chunk, index (`source-${index}`)}
+                            <p class="ascii-link-line">
+                                <span class="ascii-side">|</span>
+                                <span class="ascii-label">{index === 0 ? ` ${FIELD_LABEL}` : ` ${FIELD_INDENT}`}</span>
+                                <span class="ascii-link-value">{chunk}</span>
+                                <span class="ascii-side">|</span>
+                            </p>
+                        {/each}
+                    {/if}
+                    {#if previewLink}
+                        <a
+                            href={previewLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="ascii-link-group">
+                            {#each previewChunks as chunk, index (`preview-${index}`)}
+                                <span class="ascii-link-line">
+                                    <span class="ascii-side">|</span>
+                                    <span class="ascii-label">{index === 0 ? " PREVIEW :: " : ` ${FIELD_INDENT}`}</span>
+                                    <span class="ascii-link-value">{chunk}</span>
+                                    <span class="ascii-side">|</span>
+                                </span>
+                            {/each}
+                        </a>
+                    {:else}
+                        {#each previewChunks as chunk, index (`preview-${index}`)}
+                            <p class="ascii-link-line">
+                                <span class="ascii-side">|</span>
+                                <span class="ascii-label">{index === 0 ? " PREVIEW :: " : ` ${FIELD_INDENT}`}</span>
+                                <span class="ascii-link-value">{chunk}</span>
+                                <span class="ascii-side">|</span>
+                            </p>
+                        {/each}
+                    {/if}
+                    <p class="ascii-border-line">{BORDER}</p>
+                </div>
             </div>
         </div>
     </main>
@@ -130,7 +225,7 @@
             on:click={closeProject}
             aria-label="Close project window"
             class="text-ctp-red hover:bg-ctp-red hover:text-ctp-base p-1"
-            >[TERMINATE LINK]</button>
+            >[RETURN TO MENU]</button>
     </footer>
 </div>
 
@@ -151,4 +246,44 @@
     footer {
         flex-shrink: 0;
     }
+
+    .ascii-link-block {
+        max-width: 100%;
+    }
+
+    .ascii-link-line {
+        display: grid;
+        grid-template-columns: auto auto minmax(0, 1fr) auto;
+        align-items: baseline;
+        margin: 0;
+        white-space: nowrap;
+    }
+
+    .ascii-link-group {
+        display: block;
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .ascii-side,
+    .ascii-label {
+        color: var(--color-ctp-text);
+    }
+
+    .ascii-link-value {
+        min-width: 0;
+        white-space: nowrap;
+        color: var(--color-ctp-blue);
+        text-decoration: none;
+    }
+
+    .ascii-link-group:hover .ascii-link-value,
+    .ascii-link-group:focus-visible .ascii-link-value {
+        text-decoration: underline;
+    }
+
+    .ascii-border-line {
+        margin: 0;
+        color: var(--color-ctp-text);
+    }
 </style>
diff --git a/src/lib/components/features/terminal/Terminal.svelte b/src/lib/components/features/terminal/Terminal.svelte
@@ -31,19 +31,19 @@
     dir="ltr"
     lang="en"
     role="region"
-    aria-label="Terminal project browser"
+    aria-label="Terminal message browser"
     class="relative flex h-[68dvh] min-h-[22rem] w-full flex-col overflow-hidden rounded border-2 border-ctp-surface0 bg-ctp-crust p-4 font-mono text-sm leading-relaxed text-ctp-green sm:h-[38rem] sm:min-h-[38rem] sm:max-h-[38rem] sm:text-base">
     <div
         class="mb-3 flex flex-shrink-0 gap-3 overflow-x-auto text-xs whitespace-nowrap sm:text-sm">
-        <p>[COMMS_NODE] KYLEE-LINK</p>
-        <p>[CHANNEL] PORTFOLIO_FEED</p>
+        <p>[SYSTEM] KYLEE BBS</p>
+        <p>[NODE] 1</p>
         <p>[STATE] {$terminalStore.state.toUpperCase()}</p>
     </div>
 
     <div class="relative min-h-0 flex-1 overflow-hidden">
         {#if $terminalStore.state === "waiting"}
             <div class="absolute inset-0 overflow-auto p-2">
-                <p>LINK STATUS: STANDBY_</p>
+                <p>WAITING FOR CONNECT_</p>
             </div>
         {:else if $terminalStore.state === "booting"}
             <div class="absolute inset-0 overflow-auto p-2">
