@screenpipe-ui/tui 0.1.0

package/dist/index.js

@@ -0,0 +1,431 @@
+#!/usr/bin/env bun
+
+// src/index.tsx
+import "react";
+import { render } from "ink";
+
+// src/app.tsx
+import { useState as useState4, useMemo } from "react";
+import { Box as Box6, Text as Text6, useApp, useInput as useInput4 } from "ink";
+import { createClient } from "@screenpipe-ui/core";
+
+// src/views/search-view.tsx
+import { useState, useEffect } from "react";
+import { Box as Box2, Text as Text2, useInput } from "ink";
+import TextInput from "ink-text-input";
+import Spinner from "ink-spinner";
+import { useSearch } from "@screenpipe-ui/react";
+
+// src/components/result-item.tsx
+import "react";
+import { Box, Text } from "ink";
+import {
+  contentPreview,
+  contentTypeLabel,
+  timeAgo,
+  getContentAppName,
+  getContentTimestamp
+} from "@screenpipe-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ResultItem({ item, selected }) {
+  const label = contentTypeLabel(item);
+  const app = getContentAppName(item);
+  const ts = getContentTimestamp(item);
+  const ago = timeAgo(ts);
+  const preview = contentPreview(item, 48);
+  const typeColor = item.type === "OCR" ? "blue" : item.type === "Audio" ? "green" : "magenta";
+  return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Text, { color: selected ? "cyan" : "gray", children: selected ? ">" : " " }),
+    /* @__PURE__ */ jsx(Text, { color: typeColor, bold: true, children: label.padEnd(6) }),
+    /* @__PURE__ */ jsx(Text, { color: "gray", children: ago.padEnd(8) }),
+    /* @__PURE__ */ jsx(Text, { color: "white", bold: true, children: (app ?? "").slice(0, 12).padEnd(12) }),
+    /* @__PURE__ */ jsx(Text, { color: selected ? "white" : void 0, dimColor: !selected, children: preview })
+  ] });
+}
+
+// src/views/search-view.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SearchView({ client }) {
+  const {
+    query,
+    results,
+    pagination,
+    loading,
+    error,
+    search,
+    nextPage,
+    prevPage,
+    setQuery,
+    setContentType,
+    contentType
+  } = useSearch(client);
+  const [inputFocused, setInputFocused] = useState(true);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    search();
+  }, []);
+  useInput((input, key) => {
+    if (inputFocused) {
+      if (key.return) {
+        setQuery(inputValue);
+        search(inputValue);
+        setInputFocused(false);
+        setSelectedIndex(0);
+      }
+      if (key.escape) {
+        setInputFocused(false);
+      }
+      return;
+    }
+    if (input === "/") {
+      setInputFocused(true);
+      return;
+    }
+    if (input === "j") {
+      setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+    }
+    if (input === "k") {
+      setSelectedIndex((i) => Math.max(i - 1, 0));
+    }
+    if (input === "n") {
+      nextPage();
+      setSelectedIndex(0);
+    }
+    if (input === "p") {
+      prevPage();
+      setSelectedIndex(0);
+    }
+    if (input === "t") {
+      const types = ["all", "ocr", "audio", "ui"];
+      const idx = types.indexOf(contentType);
+      setContentType(types[(idx + 1) % types.length]);
+    }
+  });
+  const page = pagination.total > 0 ? Math.floor(pagination.offset / pagination.limit) + 1 : 0;
+  const totalPages = pagination.total > 0 ? Math.ceil(pagination.total / pagination.limit) : 0;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs2(Box2, { gap: 1, children: [
+      /* @__PURE__ */ jsx2(Text2, { color: "yellow", bold: true, children: ">" }),
+      inputFocused ? /* @__PURE__ */ jsx2(
+        TextInput,
+        {
+          value: inputValue,
+          onChange: setInputValue,
+          placeholder: "search screenpipe..."
+        }
+      ) : /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: inputValue || query || "press / to search" }),
+      /* @__PURE__ */ jsx2(Box2, { flexGrow: 1 }),
+      /* @__PURE__ */ jsxs2(Text2, { color: "magenta", bold: true, children: [
+        "[",
+        contentType,
+        "]"
+      ] }),
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "t: type" })
+    ] }),
+    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: "\u2500".repeat(76) }) }),
+    loading && /* @__PURE__ */ jsxs2(Box2, { gap: 1, children: [
+      /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: /* @__PURE__ */ jsx2(Spinner, { type: "dots" }) }),
+      /* @__PURE__ */ jsx2(Text2, { children: "Searching..." })
+    ] }),
+    error && /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsxs2(Text2, { color: "red", bold: true, children: [
+      "Error: ",
+      error
+    ] }) }),
+    !loading && results.length === 0 && !error && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "No results. Try a different query or press / to search." }),
+    !loading && results.map((item, idx) => /* @__PURE__ */ jsx2(
+      ResultItem,
+      {
+        item,
+        selected: idx === selectedIndex
+      },
+      idx
+    )),
+    pagination.total > 0 && /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, gap: 2, children: [
+      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        pagination.total,
+        " results | page ",
+        page,
+        "/",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "n: next | p: prev | j/k: navigate" })
+    ] })
+  ] });
+}
+
+// src/views/timeline-view.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
+import Spinner2 from "ink-spinner";
+import {
+  contentPreview as contentPreview2,
+  contentTypeLabel as contentTypeLabel2,
+  formatTime,
+  getContentAppName as getContentAppName2,
+  getContentTimestamp as getContentTimestamp2
+} from "@screenpipe-ui/core";
+import { useTimeline } from "@screenpipe-ui/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function groupByHour(items) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const ts = getContentTimestamp2(item);
+    const date = new Date(ts);
+    const hourKey = `${date.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric"
+    })} ${date.getHours().toString().padStart(2, "0")}:00`;
+    const existing = groups.get(hourKey) ?? [];
+    existing.push(item);
+    groups.set(hourKey, existing);
+  }
+  return Array.from(groups.entries()).map(([hour, items2]) => ({
+    hour,
+    items: items2
+  }));
+}
+function TimelineView({ client }) {
+  const { items, loading, error, load, startTime, endTime } = useTimeline(client);
+  const [scrollOffset, setScrollOffset] = useState2(0);
+  useEffect2(() => {
+    load();
+  }, []);
+  useInput2((input) => {
+    if (input === "j") {
+      setScrollOffset((o) => Math.min(o + 1, Math.max(0, items.length - 10)));
+    }
+    if (input === "k") {
+      setScrollOffset((o) => Math.max(o - 1, 0));
+    }
+    if (input === "r") {
+      load();
+      setScrollOffset(0);
+    }
+  });
+  const groups = groupByHour(items);
+  const flatRows = [];
+  let globalIdx = 0;
+  for (const group of groups) {
+    flatRows.push({ type: "header", text: group.hour });
+    for (const item of group.items) {
+      flatRows.push({ type: "item", item, idx: globalIdx });
+      globalIdx++;
+    }
+  }
+  const visibleRows = flatRows.slice(scrollOffset, scrollOffset + 20);
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs3(Box3, { gap: 2, marginBottom: 1, children: [
+      /* @__PURE__ */ jsx3(Text3, { color: "cyan", bold: true, children: "Timeline" }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        new Date(startTime).toLocaleDateString(),
+        " -",
+        " ",
+        new Date(endTime).toLocaleTimeString()
+      ] }),
+      /* @__PURE__ */ jsx3(Box3, { flexGrow: 1 }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        items.length,
+        " items | r: reload | j/k: scroll"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(Box3, { marginBottom: 1, children: /* @__PURE__ */ jsx3(Text3, { color: "gray", children: "\u2500".repeat(76) }) }),
+    loading && /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+      /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: /* @__PURE__ */ jsx3(Spinner2, { type: "dots" }) }),
+      /* @__PURE__ */ jsx3(Text3, { children: "Loading timeline..." })
+    ] }),
+    error && /* @__PURE__ */ jsxs3(Text3, { color: "red", bold: true, children: [
+      "Error: ",
+      error
+    ] }),
+    !loading && items.length === 0 && !error && /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "No timeline items for today. Press r to reload." }),
+    !loading && visibleRows.map((row, i) => {
+      if (row.type === "header") {
+        return /* @__PURE__ */ jsx3(Box3, { marginTop: i > 0 ? 1 : 0, children: /* @__PURE__ */ jsx3(Text3, { color: "yellow", bold: true, children: row.text }) }, `h-${i}`);
+      }
+      const label = contentTypeLabel2(row.item);
+      const app = getContentAppName2(row.item);
+      const time = formatTime(getContentTimestamp2(row.item));
+      const preview = contentPreview2(row.item, 50);
+      const typeColor = row.item.type === "OCR" ? "blue" : row.item.type === "Audio" ? "green" : "magenta";
+      return /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { color: "gray", children: time }),
+        /* @__PURE__ */ jsx3(Text3, { color: typeColor, bold: true, children: label.padEnd(6) }),
+        /* @__PURE__ */ jsx3(Text3, { color: "white", bold: true, children: (app ?? "").slice(0, 12).padEnd(12) }),
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: preview })
+      ] }, `i-${i}`);
+    }),
+    flatRows.length > 20 && /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "Showing ",
+      scrollOffset + 1,
+      "-",
+      Math.min(scrollOffset + 20, flatRows.length),
+      " of ",
+      flatRows.length,
+      " ",
+      "rows"
+    ] }) })
+  ] });
+}
+
+// src/views/meetings-view.tsx
+import { useState as useState3, useEffect as useEffect3 } from "react";
+import { Box as Box4, Text as Text4, useInput as useInput3 } from "ink";
+import Spinner3 from "ink-spinner";
+import {
+  formatTime as formatTime2,
+  getContentAppName as getContentAppName3,
+  getContentText,
+  getContentTimestamp as getContentTimestamp3,
+  truncate
+} from "@screenpipe-ui/core";
+import { useTimeline as useTimeline2 } from "@screenpipe-ui/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MeetingsView({ client }) {
+  const { items, loading, error, load } = useTimeline2(client);
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const [expandedIndex, setExpandedIndex] = useState3(null);
+  const audioItems = items.filter((item) => item.type === "Audio");
+  useEffect3(() => {
+    load();
+  }, []);
+  useInput3((input, key) => {
+    if (input === "j") {
+      setSelectedIndex((i) => Math.min(i + 1, audioItems.length - 1));
+    }
+    if (input === "k") {
+      setSelectedIndex((i) => Math.max(i - 1, 0));
+    }
+    if (key.return) {
+      setExpandedIndex(
+        (prev) => prev === selectedIndex ? null : selectedIndex
+      );
+    }
+    if (input === "r") {
+      load();
+      setSelectedIndex(0);
+      setExpandedIndex(null);
+    }
+  });
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs4(Box4, { gap: 2, marginBottom: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { color: "green", bold: true, children: "Meetings / Audio" }),
+      /* @__PURE__ */ jsx4(Box4, { flexGrow: 1 }),
+      /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        audioItems.length,
+        " recordings | r: reload | j/k: navigate | Enter: expand"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "\u2500".repeat(76) }) }),
+    loading && /* @__PURE__ */ jsxs4(Box4, { gap: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner3, { type: "dots" }) }),
+      /* @__PURE__ */ jsx4(Text4, { children: "Loading audio items..." })
+    ] }),
+    error && /* @__PURE__ */ jsxs4(Text4, { color: "red", bold: true, children: [
+      "Error: ",
+      error
+    ] }),
+    !loading && audioItems.length === 0 && !error && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "No audio recordings found. Press r to reload." }),
+    !loading && audioItems.map((item, idx) => {
+      const isSelected = idx === selectedIndex;
+      const isExpanded = idx === expandedIndex;
+      const time = formatTime2(getContentTimestamp3(item));
+      const device = getContentAppName3(item);
+      const text = getContentText(item);
+      return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs4(Box4, { gap: 1, children: [
+          /* @__PURE__ */ jsx4(Text4, { color: isSelected ? "cyan" : "gray", children: isSelected ? ">" : " " }),
+          /* @__PURE__ */ jsx4(Text4, { color: "gray", children: time }),
+          /* @__PURE__ */ jsx4(Text4, { color: "green", bold: true, children: (device ?? "mic").slice(0, 16).padEnd(16) }),
+          /* @__PURE__ */ jsx4(Text4, { color: isSelected ? "white" : void 0, dimColor: !isSelected, children: truncate(text.replace(/\n/g, " "), 50) })
+        ] }),
+        isExpanded && /* @__PURE__ */ jsx4(
+          Box4,
+          {
+            marginLeft: 4,
+            marginTop: 0,
+            marginBottom: 1,
+            borderStyle: "round",
+            borderColor: "green",
+            paddingX: 1,
+            flexDirection: "column",
+            children: /* @__PURE__ */ jsx4(Text4, { color: "white", children: text })
+          }
+        )
+      ] }, idx);
+    })
+  ] });
+}
+
+// src/components/status-bar.tsx
+import { useEffect as useEffect4 } from "react";
+import { Box as Box5, Text as Text5 } from "ink";
+import { useHealth } from "@screenpipe-ui/react";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function StatusBar({ client }) {
+  const { health, loading, error, check } = useHealth(client);
+  useEffect4(() => {
+    check();
+    const interval = setInterval(check, 15e3);
+    return () => clearInterval(interval);
+  }, []);
+  const statusColor = error ? "red" : health?.status === "ok" ? "green" : "yellow";
+  const statusText = loading ? "checking..." : error ? "disconnected" : health ? `${health.status} | frame: ${health.frame_status} | audio: ${health.audio_status}` : "unknown";
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx5(Box5, { paddingX: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "\u2500".repeat(78) }) }),
+    /* @__PURE__ */ jsxs5(Box5, { paddingX: 1, gap: 1, children: [
+      /* @__PURE__ */ jsx5(Text5, { color: statusColor, bold: true, children: "\u25CF" }),
+      /* @__PURE__ */ jsx5(Text5, { color: statusColor, children: statusText }),
+      /* @__PURE__ */ jsx5(Box5, { flexGrow: 1 }),
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "screenpipe-tui" })
+    ] })
+  ] });
+}
+
+// src/app.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var TABS = ["Search", "Timeline", "Meetings"];
+function App() {
+  const app = useApp();
+  const client = useMemo(() => createClient(), []);
+  const [activeTab, setActiveTab] = useState4("Search");
+  useInput4((input, key) => {
+    if (input === "q" && !key.ctrl) {
+      app.exit();
+    }
+    if (key.tab) {
+      setActiveTab((prev) => {
+        const idx = TABS.indexOf(prev);
+        return TABS[(idx + 1) % TABS.length];
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", width: "100%", children: [
+    /* @__PURE__ */ jsxs6(Box6, { paddingX: 1, gap: 1, children: [
+      TABS.map((tab) => /* @__PURE__ */ jsx6(
+        Text6,
+        {
+          bold: activeTab === tab,
+          color: activeTab === tab ? "cyan" : "gray",
+          inverse: activeTab === tab,
+          children: ` ${tab} `
+        },
+        tab
+      )),
+      /* @__PURE__ */ jsx6(Box6, { flexGrow: 1 }),
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Tab: switch | q: quit" })
+    ] }),
+    /* @__PURE__ */ jsx6(Box6, { paddingX: 1, children: /* @__PURE__ */ jsx6(Text6, { color: "gray", children: "\u2500".repeat(78) }) }),
+    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [
+      activeTab === "Search" && /* @__PURE__ */ jsx6(SearchView, { client }),
+      activeTab === "Timeline" && /* @__PURE__ */ jsx6(TimelineView, { client }),
+      activeTab === "Meetings" && /* @__PURE__ */ jsx6(MeetingsView, { client })
+    ] }),
+    /* @__PURE__ */ jsx6(StatusBar, { client })
+  ] });
+}
+
+// src/index.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var { waitUntilExit } = render(/* @__PURE__ */ jsx7(App, {}));
+await waitUntilExit();

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@screenpipe-ui/tui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "bin": {
+    "screenpipe-tui": "./dist/index.js"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "test": "bun test",
+    "dev": "bun run src/index.tsx",
+    "build": "tsup src/index.tsx --format esm --target node18 --clean && chmod +x dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@screenpipe-ui/core": "workspace:*",
+    "@screenpipe-ui/react": "workspace:*",
+    "ink": "^5.1.0",
+    "ink-text-input": "^6.0.0",
+    "ink-spinner": "^5.0.0",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.1.14",
+    "@types/react": "^18.3.0",
+    "ink-testing-library": "^4.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  }
+}