@frixaco/anitrack 0.0.7 → 0.0.9

package/index.ts

@@ -2,15 +2,14 @@
 // TORRENT SEARCH APP
 // - Search input with loading bar
 // - Virtual windowing results list
-// - Keyboard navigation (j/k/h/l)
+// - Keyboard navigation (j/k/h/l/tab)
 
 import { existsSync } from "fs";
 import { COLORS } from "./colors";
-import { Button, Column, Input, Row, run, onKey } from "@frixaco/letui";
-import { $, ff, whenSettled } from "@frixaco/letui";
+import { Button, Column, Input, Row, Text, run, onKey } from "@frixaco/letui";
+import { $, ff } from "@frixaco/letui";
 import { LoadingBar } from "./progress-bar";
 
-// --- Types ---
 type ScrapeResultItem = {
   title: string;
   size: string;
@@ -18,173 +17,390 @@ type ScrapeResultItem = {
   magnet: string;
 };
 
-type ScrapeResult = {
-  results: ScrapeResultItem[];
-};
-
-type TorrentDetails = {
-  id: number;
-  info_hash: string;
-  name: string;
-  files: unknown[];
-};
-
-type TorrentResponse = {
-  id: number;
-  details: TorrentDetails;
-};
-
-// --- State ---
 const results = $<ScrapeResultItem[]>([]);
 const loading = $(false);
 const selectedIndex = $(0);
+const focusTarget = $<"input" | "results">("input");
+const MPV_SOCKET_WAIT_MS = 5000;
 
-// --- Loading Bars ---
 const loadingBar = LoadingBar({
-  dotColor: COLORS.default.green,
-  trackColor: COLORS.default.bg_alt,
+  dotColor: COLORS.default.cyan,
+  trackColor: COLORS.default.bg_highlight,
 });
 
-// --- API ---
+function toScrapeResults(payload: unknown): ScrapeResultItem[] {
+  const rawResults =
+    payload && typeof payload === "object" ? (payload as any).results : undefined;
+  if (!Array.isArray(rawResults)) return [];
+
+  const normalized: ScrapeResultItem[] = [];
+  for (const item of rawResults) {
+    if (!item || typeof item !== "object") continue;
+
+    normalized.push({
+      title: String((item as any).title ?? ""),
+      size: String((item as any).size ?? ""),
+      date: String((item as any).date ?? ""),
+      magnet: String((item as any).magnet ?? ""),
+    });
+  }
+  return normalized;
+}
+
+function toStreamTarget(payload: unknown): { infoHash: string; fileIndex: number } | null {
+  if (!payload || typeof payload !== "object") return null;
+  const details = (payload as any).details;
+  if (!details || typeof details !== "object") return null;
+
+  const infoHash = details.info_hash;
+  const files = details.files;
+
+  if (typeof infoHash !== "string" || !Array.isArray(files) || files.length === 0) {
+    return null;
+  }
+
+  return {
+    infoHash,
+    fileIndex: files.length - 1,
+  };
+}
+
+function resetResultsToInput(): void {
+  results([]);
+  selectedIndex(0);
+  focusTarget("input");
+}
+
 async function fetchResults(query: string) {
   loading(true);
   loadingBar.start();
 
-  const response = await fetch(
-    `https://scrape.anitrack.frixaco.com/scrape?q=${query}`,
-  );
-  const data = (await response.json()) as ScrapeResult;
-
-  results(data.results);
-  selectedIndex(0);
-  loading(false);
-  loadingBar.stop();
+  try {
+    const response = await fetch(
+      `https://scrape.anitrack.frixaco.com/scrape?q=${encodeURIComponent(query)}`,
+    );
+    if (!response.ok) {
+      throw new Error(`Search failed with status ${response.status}`);
+    }
+    const payload = await response.json();
+    const parsedResults = toScrapeResults(payload);
+    results(parsedResults);
+    selectedIndex(0);
+    focusTarget(parsedResults.length > 0 ? "results" : "input");
+  } catch {
+    resetResultsToInput();
+  } finally {
+    loading(false);
+    loadingBar.stop();
+  }
 }
 
 async function streamResult(magnet: string) {
   loadingBar.start();
 
-  const response = await fetch("https://rqbit.anitrack.frixaco.com/torrents", {
-    method: "post",
-    body: magnet,
-  });
-  const data = (await response.json()) as TorrentResponse;
-  const streamUrl = `https://rqbit.anitrack.frixaco.com/torrents/${data.details.info_hash}/stream/${
-    data.details.files.length - 1
-  }`;
-
-  const ipcPath = `/tmp/mpv-socket-${Date.now()}`;
-  Bun.spawn({
-    cmd: ["mpv", `--input-ipc-server=${ipcPath}`, streamUrl],
-    stdout: "ignore",
-    stderr: "ignore",
-  });
+  try {
+    const response = await fetch("https://rqbit.anitrack.frixaco.com/torrents", {
+      method: "post",
+      body: magnet,
+    });
+    if (!response.ok) {
+      throw new Error(`Stream failed with status ${response.status}`);
+    }
 
-  // Poll until socket exists (mpv fully initialized)
-  while (!existsSync(ipcPath)) {
-    await Bun.sleep(50);
-  }
+    const payload = await response.json();
+    const target = toStreamTarget(payload);
+    if (!target) return;
 
-  loadingBar.stop();
-}
+    const streamUrl = `https://rqbit.anitrack.frixaco.com/torrents/${target.infoHash}/stream/${target.fileIndex}`;
 
-// --- Styles ---
-const borderStyle = {
-  color: COLORS.default.fg,
-  style: "square" as const,
-};
+    const ipcPath = `/tmp/mpv-socket-${Date.now()}`;
+    Bun.spawn({
+      cmd: ["mpv", `--input-ipc-server=${ipcPath}`, streamUrl],
+      stdout: "ignore",
+      stderr: "ignore",
+    });
+
+    const deadline = Date.now() + MPV_SOCKET_WAIT_MS;
+    while (!existsSync(ipcPath) && Date.now() < deadline) {
+      await Bun.sleep(50);
+    }
+  } catch {
+    // Keep UI alive even when backend endpoints are unavailable.
+  } finally {
+    loadingBar.stop();
+  }
+}
 
 const focusedBorderStyle = {
   color: COLORS.default.green,
-  style: "square" as const,
+  style: "rounded" as const,
 };
 
-// --- Nodes ---
+const titleLine = Text({
+  text: "ANITRACK // TORRENT SEARCH + STREAM STAGING",
+  foreground: COLORS.default.cyan,
+});
+
+const subtitleLine = Text({
+  text: "keyboard-first flow with wrapped panels and live result status",
+  foreground: COLORS.default.grey,
+});
+
+const searchStatusLine = Text({
+  text: "",
+  foreground: COLORS.default.fg,
+});
+
+const resultsSummaryLine = Text({
+  text: "",
+  foreground: COLORS.default.fg,
+});
+
+const helpLine = Text({
+  text: "/ focus input   Tab switch pane   j/k navigate   Enter stream   q quit",
+  foreground: COLORS.default.grey,
+});
+
 const searchInput = Input({
   placeholder: "Search torrents...",
-  border: borderStyle,
+  border: undefined,
   padding: "1 0",
-  onSubmit: (val) => fetchResults(val),
-  onFocus: (self) => self.setStyle({ border: focusedBorderStyle }),
-  onBlur: (self) => self.setStyle({ border: borderStyle }),
+  foreground: COLORS.default.fg,
+  height: 3,
+  minWidth: 28,
+  onSubmit: (val) => {
+    const query = val.trim();
+    if (query.length === 0) {
+      resetResultsToInput();
+      return;
+    }
+    fetchResults(query);
+  },
+  onFocus: (self) => {
+    focusTarget("input");
+    self.setStyle({ border: focusedBorderStyle });
+  },
+  onBlur: (self) => self.setStyle({ border: undefined }),
 });
-whenSettled(() => searchInput.focus());
 
-const loadingBars = Row({ flexGrow: 1 }, [loadingBar.node]);
+const loadingBars = Row({}, [loadingBar.node]);
+const searchInputRow = Row({ minHeight: 3, alignItems: "stretch" }, [searchInput]);
+
+const resultsList = Column({ padding: "1 0", flexGrow: 1 }, []);
+
+const searchPanel = Column(
+  {
+    gap: 1,
+    padding: "0 0",
+    flexGrow: 1,
+    flexBasis: 32,
+    minWidth: 28,
+  },
+  [titleLine, subtitleLine, searchInputRow, loadingBars, searchStatusLine],
+);
+
+const resultsPanel = Column(
+  {
+    gap: 1,
+    padding: "0 0",
+    flexGrow: 2,
+    flexBasis: 50,
+    minWidth: 40,
+    minHeight: 14,
+  },
+  [resultsSummaryLine, resultsList, helpLine],
+);
+
+const root = Column(
+  {
+    flexGrow: 1,
+    gap: 1,
+    padding: "1 1",
+  },
+  [
+    Row(
+      {
+        flexGrow: 1,
+        gap: 1,
+        flexWrap: "wrap",
+        alignItems: "stretch",
+      },
+      [searchPanel, resultsPanel],
+    ),
+  ],
+);
 
-const resultsList = Column({ gap: 1, padding: "1 0", flexGrow: 1 }, []);
-
-const root = Column({ border: borderStyle, gap: 1, padding: "1 0" }, [
-  Column({ padding: "1 0" }, [searchInput, loadingBars]),
-  resultsList,
-]);
-
-// --- Keep track of result buttons for focus management ---
 let resultButtons: ReturnType<typeof Button>[] = [];
+let visibleStartIndex = 0;
+let lastResultsSnapshot: ScrapeResultItem[] | null = null;
+const resultHeights = new Map<number, number>();
 
-// --- Reactive effects ---
+function resultLabel(item: ScrapeResultItem, isActive: boolean): string {
+  return `${isActive ? "▶ " : "  "}${item.title}`;
+}
 
-// Update results list with virtual windowing
 ff(() => {
   const all = results();
   const selected = selectedIndex();
+  const isLoading = loading();
+  const activePane = focusTarget();
+
+  titleLine.setStyle({
+    foreground:
+      activePane === "input" ? COLORS.default.green : COLORS.default.cyan,
+  });
+  searchStatusLine.setText(
+    isLoading
+      ? "status: searching remote scrape endpoint..."
+      : activePane === "input"
+        ? "status: input armed; submit query to populate results"
+        : "status: results active; input still available with /",
+  );
+  searchStatusLine.setStyle({
+    foreground:
+      isLoading
+        ? COLORS.default.yellow
+        : activePane === "input"
+          ? COLORS.default.green
+          : COLORS.default.grey,
+  });
+  resultsSummaryLine.setText(
+    all.length === 0
+      ? "results: empty"
+      : `results: ${all.length} items   selected: ${Math.min(all.length, selected + 1)}/${all.length}`,
+  );
+  resultsSummaryLine.setStyle({
+    foreground:
+      all.length === 0
+        ? COLORS.default.grey
+        : activePane === "results"
+          ? COLORS.default.green
+          : COLORS.default.cyan,
+  });
+
+  if (all !== lastResultsSnapshot) {
+    resultHeights.clear();
+    lastResultsSnapshot = all;
+  }
+
+  for (let i = 0; i < resultButtons.length; i++) {
+    const measuredHeight = Math.floor(resultButtons[i]?.frameHeight() ?? 0);
+    if (measuredHeight > 0) {
+      resultHeights.set(visibleStartIndex + i, measuredHeight);
+    }
+  }
 
   if (all.length === 0) {
+    visibleStartIndex = 0;
+    resultButtons = [];
     resultsList.setChildren?.([]);
+    if (focusTarget() === "results") {
+      focusInput();
+    }
     return;
   }
 
-  // Use actual computed frame height from Taffy
-  const availableHeight = resultsList.frameHeight();
+  const clampedSelected = Math.max(0, Math.min(selected, all.length - 1));
+  if (clampedSelected !== selected) {
+    selectedIndex(clampedSelected);
+    return;
+  }
 
-  // Each item: border(2) + text(1) = 3, plus gap(1) between items
-  const itemHeight = 3;
-  const visibleCount = Math.max(1, Math.floor(availableHeight / itemHeight));
+  const availableHeight = Math.max(1, Math.floor(resultsList.frameHeight()));
+  const fallbackHeight = Math.max(
+    1,
+    Math.floor(
+      resultHeights.get(selected) ??
+        resultButtons[0]?.frameHeight() ??
+        searchInput.frameHeight(),
+    ),
+  );
+  const itemHeightAt = (index: number) =>
+    Math.max(1, Math.floor(resultHeights.get(index) ?? fallbackHeight));
+
+  let start = selected;
+  let usedHeight = 0;
+  while (start >= 0) {
+    const height = itemHeightAt(start);
+    if (usedHeight + height > availableHeight) {
+      if (usedHeight > 0) {
+        start += 1;
+      }
+      break;
+    }
+    usedHeight += height;
+    if (start === 0) break;
+    start -= 1;
+  }
+  start = Math.max(0, start);
+
+  let end = start;
+  let windowHeight = 0;
+  while (end < all.length) {
+    const height = itemHeightAt(end);
+    if (windowHeight + height > availableHeight) {
+      if (end === start) {
+        end += 1;
+      }
+      break;
+    }
+    windowHeight += height;
+    end += 1;
+  }
 
-  // Calculate window with selection at bottom (scroll only when needed)
-  let start = selected - visibleCount + 1;
-  start = Math.max(0, Math.min(start, all.length - visibleCount));
-  const end = Math.min(start + visibleCount, all.length);
   const visible = all.slice(start, end);
+  visibleStartIndex = start;
 
   resultButtons = visible.map((item, i) => {
     const globalIdx = start + i;
     const isActive = globalIdx === selected;
     return Button({
-      text: `${isActive ? "▶ " : "  "}${item.title}`,
-      border: isActive ? focusedBorderStyle : borderStyle,
-      padding: "1 0",
-      onClick: () => streamResult(item.magnet),
+      text: resultLabel(item, isActive),
+      border: undefined,
+      foreground: isActive ? COLORS.default.green : COLORS.default.fg,
+      onFocus: () => {
+        focusTarget("results");
+        if (selectedIndex() !== globalIdx) {
+          selectedIndex(globalIdx);
+        }
+      },
+      onClick: () => {
+        focusTarget("results");
+        selectedIndex(globalIdx);
+        streamResult(item.magnet);
+      },
     });
   });
 
   resultsList.setChildren?.(resultButtons);
 
-  // Focus the selected button
-  const selectedVisibleIndex = selected - start;
-  if (resultButtons[selectedVisibleIndex]) {
-    resultButtons[selectedVisibleIndex].focus();
+  if (focusTarget() === "results") {
+    focusSelectedResult();
   }
 });
 
-// --- Keyboard navigation ---
-onKey("/", () => searchInput.focus());
-
+onKey("/", () => focusInput());
+onKey("\t", () => toggleFocusTarget());
+onKey("\x1b[Z", () => toggleFocusTarget());
 onKey("j", () => selectNext());
-onKey("\x1b[B", () => selectNext()); // Arrow Down
-
+onKey("\x1b[B", () => selectNext());
 onKey("k", () => selectPrev());
-onKey("\x1b[A", () => selectPrev()); // Arrow Up
-
+onKey("\x1b[A", () => selectPrev());
 onKey("l", () => selectLast());
-onKey("\x1b[C", () => selectLast()); // Arrow Right - jump to end
-
+onKey("\x1b[C", () => selectLast());
 onKey("h", () => selectFirst());
-onKey("\x1b[D", () => selectFirst()); // Arrow Left - jump to start
+onKey("\x1b[D", () => selectFirst());
+
+const app = run(root, {
+  debug: true,
+});
 
-onKey("q", () => app.quit());
+onKey("q", () => {
+  app.quit();
+});
 
 function selectNext() {
+  if (focusTarget() !== "results") return;
   const max = results().length - 1;
   if (selectedIndex() < max) {
     selectedIndex(selectedIndex() + 1);
@@ -192,21 +408,55 @@ function selectNext() {
 }
 
 function selectPrev() {
+  if (focusTarget() !== "results") return;
   if (selectedIndex() > 0) {
     selectedIndex(selectedIndex() - 1);
   }
 }
 
 function selectFirst() {
+  if (focusTarget() !== "results") return;
   selectedIndex(0);
 }
 
 function selectLast() {
+  if (focusTarget() !== "results") return;
   const max = results().length - 1;
   if (max >= 0) {
     selectedIndex(max);
   }
 }
 
-// --- Start app ---
-const app = run(root, { debug: true });
+function focusInput() {
+  focusTarget("input");
+  searchInput.focus();
+}
+
+function focusSelectedResult() {
+  if (results().length === 0) {
+    focusInput();
+    return;
+  }
+  focusTarget("results");
+  const selectedVisibleIndex = selectedIndex() - visibleStartIndex;
+  const selectedButton = resultButtons[selectedVisibleIndex];
+  if (selectedButton) {
+    selectedButton.focus();
+    return;
+  }
+  resultButtons[0]?.focus();
+}
+
+function toggleFocusTarget() {
+  if (results().length === 0) {
+    focusInput();
+    return;
+  }
+  if (focusTarget() === "input") {
+    focusSelectedResult();
+  } else {
+    focusInput();
+  }
+}
+
+focusInput();

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@frixaco/anitrack",
-  "version": "0.0.7",
-  "module": "index.ts",
+  "version": "0.0.9",
   "type": "module",
   "bin": {
     "anitrack": "./index.ts"
   },
   "files": [
     "index.ts",
-    "colors.ts"
+    "colors.ts",
+    "progress-bar.ts",
+    "README.md"
   ],
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "bun run index.ts"
   },
   "dependencies": {
-    "@frixaco/letui": "^0.0.11"
+    "@frixaco/letui": "^0.0.12"
   },
   "devDependencies": {
     "@types/bun": "1.3.9"
-  },
-  "peerDependencies": {
-    "typescript": "^5"
   }
 }

package/progress-bar.ts

@@ -0,0 +1,100 @@
+import type { Node } from "@frixaco/letui";
+import { $, ff, Row, Text } from "@frixaco/letui";
+
+export type LoadingBarProps = {
+  dotColor: number;
+  trackColor: number;
+  flexGrow?: number;
+  interval?: number; // ms between frames
+};
+
+export type LoadingBarController = {
+  node: Node;
+  start: () => void;
+  stop: () => void;
+};
+
+export function LoadingBar(props: LoadingBarProps): LoadingBarController {
+  const { dotColor, trackColor, flexGrow = 1, interval = 80 } = props;
+
+  const position = $(0);
+  const direction = $(1); // 1 = right, -1 = left
+  const active = $(false);
+  let timer: Timer | null = null;
+
+  const leftTrack = Text({
+    text: "",
+    background: trackColor,
+    foreground: trackColor,
+  });
+  const dot = Text({ text: "", background: dotColor, foreground: dotColor });
+  const rightTrack = Text({
+    text: "",
+    background: trackColor,
+    foreground: trackColor,
+  });
+
+  const node = Row({ flexGrow }, [leftTrack, dot, rightTrack]);
+
+  // React to position changes
+  ff(() => {
+    const isActive = active();
+    const pos = position();
+    const width = node.frameWidth();
+    if (width === 0 || !isActive) return;
+
+    const maxPos = width - 1;
+    const clampedPos = Math.max(0, Math.min(pos, maxPos));
+
+    leftTrack.setText?.(" ".repeat(clampedPos));
+    dot.setText?.(" ");
+    rightTrack.setText?.(" ".repeat(maxPos - clampedPos));
+  });
+
+  function clearTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  function start() {
+    if (active()) return;
+    active(true);
+    position(0);
+    direction(1);
+
+    timer = setInterval(() => {
+      const width = node.frameWidth();
+      if (width === 0) return;
+
+      const maxPos = width - 1;
+      const pos = position();
+      const dir = direction();
+
+      const step = 12;
+      const nextPos = pos + dir * step;
+      if (nextPos >= maxPos) {
+        direction(-1);
+        position(maxPos);
+      } else if (nextPos <= 0) {
+        direction(1);
+        position(0);
+      } else {
+        position(nextPos);
+      }
+    }, interval);
+  }
+
+  function stop() {
+    clearTimer();
+    active(false);
+    position(0);
+    // Clear all three segments
+    leftTrack.setText?.("");
+    dot.setText?.("");
+    rightTrack.setText?.("");
+  }
+
+  return { node, start, stop };
+}