token-larper 1.8.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "token-larper",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Token Larper — Multi-Harness AI Coding Usage & Cost Telemetry Dashboard powered by ccusage",
   "type": "module",
   "license": "MIT",

package/src/client/App.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AlertTriangle, Heart, Moon, Power, RefreshCw, Search, Settings, Sun } from "lucide-react";
+import { AlertTriangle, Moon, Power, RefreshCw, Search, Settings, Sun } from "lucide-react";
 import type { DashboardPayload, HarnessId, StartupConfig } from "../types.ts";
 import { OTHER_SERIES, SERIES_SLOTS, seriesColor, type SeriesInfo } from "./charts.tsx";
 import { DashboardProvider, type Dashboard } from "./context.tsx";
 import { DateRangePicker } from "./components/DateRangePicker.tsx";
+import { AppFooter } from "./components/AppFooter.tsx";
 import { Logo } from "./components/Logo.tsx";
 import { RankChip } from "./components/RankChip.tsx";
 import { SettingsDialog } from "./components/SettingsDialog.tsx";
@@ -553,14 +554,7 @@ export function App() {
           {view.id === "rank" && <Rank />}
         </main>
 
-        <footer className="credit">
-          <span>
-            Made with <Heart size={12} aria-label="love" className="credit-heart" /> by{" "}
-            <a href="https://github.com/YarooqH" target="_blank" rel="noreferrer">qray</a>
-          </span>
-          <span aria-hidden="true">·</span>
-          <a href="https://github.com/YarooqH/token-larper" target="_blank" rel="noreferrer">Source on GitHub</a>
-        </footer>
+        <AppFooter />
 
         {showSettings && (
           <SettingsDialog

package/src/client/components/AppFooter.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+const JOKES = [
+  "Tokens were harmed in the making.",
+  "The context window remembers.",
+  "One more prompt. Famous last words.",
+  "Your cache misses have been noted.",
+  "The bill has entered the chat.",
+  "This footer also cost tokens.",
+  "The tokens know what they did.",
+] as const;
+
+const LAST_JOKE_KEY = "token-larper-last-footer-joke";
+
+function pickJoke(): string {
+  let previous = -1;
+  try {
+    const saved = sessionStorage.getItem(LAST_JOKE_KEY);
+    if (saved !== null) previous = Number(saved);
+  } catch {
+    // The footer still works when storage is unavailable.
+  }
+
+  const choices = JOKES.map((_, index) => index).filter((index) => index !== previous);
+  const index = choices[Math.floor(Math.random() * choices.length)]!;
+  try { sessionStorage.setItem(LAST_JOKE_KEY, String(index)); } catch {}
+  return JOKES[index];
+}
+
+const joke = pickJoke();
+
+export function AppFooter() {
+  return (
+    <footer className="app-footer">
+      <span>Made by <a href="https://github.com/YarooqH" target="_blank" rel="noopener noreferrer">qray</a></span>
+      <span className="footer-separator" aria-hidden="true">·</span>
+      <span>{joke}</span>
+      <span className="footer-separator" aria-hidden="true">·</span>
+      <a className="footer-source" href="https://github.com/YarooqH/token-larper" target="_blank" rel="noopener noreferrer">
+        <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.23.48-2.69-1.08-2.69-1.08-.36-.92-.89-1.16-.89-1.16-.73-.5.06-.49.06-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.22 2.2.82a7.65 7.65 0 0 1 4.01 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.08-.01 1.95-.01 2.21 0 .21.15.46.55.38A8.02 8.02 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+        </svg>
+        <span>Source on GitHub</span>
+      </a>
+    </footer>
+  );
+}

package/src/client/styles.css

@@ -310,9 +310,32 @@ img { display: block; }
 
 .app {
   max-width: 1240px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   margin: 0 auto;
-  padding: 0 32px 72px;
+  padding: 0 32px 24px;
+}
+
+.app-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-top: auto;
+  padding-top: 64px;
+  color: var(--text-3);
+  font-size: 11px;
+  line-height: 1.5;
+  text-align: center;
 }
+.app-footer a { color: var(--text-2); text-decoration: none; }
+.app-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
+.app-footer a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
+.footer-source { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.footer-separator { color: var(--text-3); }
 
 .topbar {
   display: flex;
@@ -1161,10 +1184,6 @@ html[data-theme="dark"] .toggle.on .toggle-knob { background: var(--accent-ink);
 
 /* ---------- Credit ---------- */
 
-.credit { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 48px; color: var(--text-3); font-size: 12px; }
-.credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
-.credit a:hover { color: var(--text); text-decoration-color: currentColor; }
-.credit-heart { vertical-align: -1px; color: var(--accent); fill: currentColor; }
 
 /* ---------- Splash screens ---------- */
 
@@ -1329,7 +1348,8 @@ html[data-theme="dark"] .toggle.on .toggle-knob { background: var(--accent-ink);
 @media (max-width: 700px) {
   .update-banner { flex-wrap: wrap; }
   .update-banner-actions { width: 100%; justify-content: flex-end; }
-  .app { padding: 0 16px 48px; }
+  .app { padding: 0 16px 24px; }
+  .app-footer { padding-top: 48px; }
   .topbar { margin: 0 -16px; padding: 12px 16px; }
   .updated { display: none; }
   .filters { margin: 0 -16px 16px; padding: 8px 16px 10px; }