@screenpipe-ui/core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+import { ScreenpipeQueryParams, ScreenpipeResponse, ContentItem, PaginationInfo } from '@screenpipe/js';
+export { AudioContent, ContentItem, ContentType, OCRContent, PaginationInfo, ScreenpipeQueryParams, ScreenpipeResponse, Speaker, UiContent } from '@screenpipe/js';
+import * as zustand_vanilla from 'zustand/vanilla';
+
+interface HealthCheckResponse {
+    status: string;
+    status_code: number;
+    last_frame_timestamp?: string;
+    last_audio_timestamp?: string;
+    frame_status: string;
+    audio_status: string;
+    message: string;
+}
+interface ScreenpipeClientConfig {
+    baseUrl?: string;
+}
+declare class ScreenpipeUIClient {
+    private baseUrl;
+    constructor(config?: ScreenpipeClientConfig);
+    private get;
+    search(params?: ScreenpipeQueryParams): Promise<ScreenpipeResponse>;
+    health(): Promise<HealthCheckResponse>;
+    getFrameUrl(frameId: number): string;
+}
+declare function createClient(config?: ScreenpipeClientConfig): ScreenpipeUIClient;
+declare function getContentText(item: ContentItem): string;
+declare function getContentTimestamp(item: ContentItem): string;
+declare function getContentAppName(item: ContentItem): string;
+
+interface TimeRange {
+    start: string;
+    end: string;
+}
+
+interface SearchState {
+    query: string;
+    contentType: ScreenpipeQueryParams["contentType"];
+    results: ContentItem[];
+    pagination: PaginationInfo;
+    loading: boolean;
+    error: string | null;
+    setQuery: (q: string) => void;
+    setContentType: (t: ScreenpipeQueryParams["contentType"]) => void;
+    executeSearch: (client: ScreenpipeUIClient) => Promise<void>;
+    nextPage: (client: ScreenpipeUIClient) => Promise<void>;
+    prevPage: (client: ScreenpipeUIClient) => Promise<void>;
+    reset: () => void;
+}
+declare function createSearchStore(): zustand_vanilla.StoreApi<SearchState>;
+
+interface TimelineState {
+    items: ContentItem[];
+    startTime: string;
+    endTime: string;
+    appFilter: string | undefined;
+    loading: boolean;
+    error: string | null;
+    setTimeRange: (start: string, end: string) => void;
+    setAppFilter: (app: string | undefined) => void;
+    loadTimeline: (client: ScreenpipeUIClient) => Promise<void>;
+    reset: () => void;
+}
+declare function createTimelineStore(): zustand_vanilla.StoreApi<TimelineState>;
+
+interface HealthState {
+    health: HealthCheckResponse | null;
+    loading: boolean;
+    error: string | null;
+    checkHealth: (client: ScreenpipeUIClient) => Promise<void>;
+}
+declare function createHealthStore(): zustand_vanilla.StoreApi<HealthState>;
+
+declare function timeAgo(timestamp: string): string;
+declare function formatDuration(ms: number): string;
+declare function formatTime(timestamp: string): string;
+declare function formatDate(timestamp: string): string;
+declare function formatDateTime(timestamp: string): string;
+declare function todayRange(): {
+    start: string;
+    end: string;
+};
+
+declare function truncate(text: string, maxLen?: number): string;
+declare function contentTypeLabel(item: ContentItem): string;
+declare function highlightMatch(text: string, query: string): string;
+declare function stripAnsi(text: string): string;
+declare function contentPreview(item: ContentItem, maxLen?: number): string;
+
+interface Column {
+    header: string;
+    width: number;
+    align?: "left" | "right";
+}
+declare function formatTable(columns: Column[], rows: string[][]): string;
+
+export { type Column, type HealthCheckResponse, type HealthState, type ScreenpipeClientConfig, ScreenpipeUIClient, type SearchState, type TimeRange, type TimelineState, contentPreview, contentTypeLabel, createClient, createHealthStore, createSearchStore, createTimelineStore, formatDate, formatDateTime, formatDuration, formatTable, formatTime, getContentAppName, getContentText, getContentTimestamp, highlightMatch, stripAnsi, timeAgo, todayRange, truncate };

package/dist/index.js

@@ -0,0 +1,350 @@
+// src/client.ts
+var DEFAULT_BASE_URL = "http://localhost:3030";
+var ScreenpipeUIClient = class {
+  baseUrl;
+  constructor(config) {
+    this.baseUrl = (config?.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+  }
+  async get(path, params) {
+    const qs = new URLSearchParams();
+    if (params) {
+      for (const [key, value] of Object.entries(params)) {
+        if (value === void 0 || value === null || value === "") continue;
+        const snakeKey = key.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`);
+        if (Array.isArray(value)) {
+          if (value.length > 0) qs.append(snakeKey, value.join(","));
+        } else {
+          qs.append(snakeKey, String(value));
+        }
+      }
+    }
+    const url = `${this.baseUrl}${path}${qs.toString() ? `?${qs}` : ""}`;
+    const res = await fetch(url);
+    if (!res.ok) {
+      const body = await res.text().catch(() => "");
+      throw new Error(`GET ${path} failed (${res.status}): ${body}`);
+    }
+    return res.json();
+  }
+  async search(params = {}) {
+    return this.get("/search", params);
+  }
+  async health() {
+    return this.get("/health");
+  }
+  getFrameUrl(frameId) {
+    return `${this.baseUrl}/frames/${frameId}`;
+  }
+};
+function createClient(config) {
+  return new ScreenpipeUIClient(config);
+}
+function getContentText(item) {
+  switch (item.type) {
+    case "OCR":
+      return item.content.text;
+    case "Audio":
+      return item.content.transcription;
+    case "UI":
+      return item.content.text;
+  }
+}
+function getContentTimestamp(item) {
+  return item.content.timestamp;
+}
+function getContentAppName(item) {
+  switch (item.type) {
+    case "OCR":
+      return item.content.appName;
+    case "Audio":
+      return item.content.deviceName;
+    case "UI":
+      return item.content.appName;
+  }
+}
+
+// src/stores/search-store.ts
+import { createStore } from "zustand/vanilla";
+var DEFAULT_LIMIT = 20;
+var initialState = {
+  query: "",
+  contentType: "all",
+  results: [],
+  pagination: { limit: DEFAULT_LIMIT, offset: 0, total: 0 },
+  loading: false,
+  error: null
+};
+function createSearchStore() {
+  return createStore((set, get) => ({
+    ...initialState,
+    setQuery: (q) => set({ query: q }),
+    setContentType: (t) => set({ contentType: t }),
+    executeSearch: async (client) => {
+      const { query, contentType } = get();
+      set({ loading: true, error: null });
+      try {
+        const res = await client.search({
+          q: query || void 0,
+          contentType,
+          limit: DEFAULT_LIMIT,
+          offset: 0
+        });
+        set({
+          results: res.data,
+          pagination: res.pagination,
+          loading: false
+        });
+      } catch (e) {
+        set({
+          error: e instanceof Error ? e.message : String(e),
+          loading: false
+        });
+      }
+    },
+    nextPage: async (client) => {
+      const { query, contentType, pagination } = get();
+      const newOffset = pagination.offset + pagination.limit;
+      if (newOffset >= pagination.total) return;
+      set({ loading: true, error: null });
+      try {
+        const res = await client.search({
+          q: query || void 0,
+          contentType,
+          limit: pagination.limit,
+          offset: newOffset
+        });
+        set({
+          results: res.data,
+          pagination: res.pagination,
+          loading: false
+        });
+      } catch (e) {
+        set({
+          error: e instanceof Error ? e.message : String(e),
+          loading: false
+        });
+      }
+    },
+    prevPage: async (client) => {
+      const { query, contentType, pagination } = get();
+      const newOffset = Math.max(0, pagination.offset - pagination.limit);
+      if (newOffset === pagination.offset) return;
+      set({ loading: true, error: null });
+      try {
+        const res = await client.search({
+          q: query || void 0,
+          contentType,
+          limit: pagination.limit,
+          offset: newOffset
+        });
+        set({
+          results: res.data,
+          pagination: res.pagination,
+          loading: false
+        });
+      } catch (e) {
+        set({
+          error: e instanceof Error ? e.message : String(e),
+          loading: false
+        });
+      }
+    },
+    reset: () => set(initialState)
+  }));
+}
+
+// src/stores/timeline-store.ts
+import { createStore as createStore2 } from "zustand/vanilla";
+
+// src/formatters/time.ts
+var MINUTE = 60 * 1e3;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+function timeAgo(timestamp) {
+  const diff = Date.now() - new Date(timestamp).getTime();
+  if (diff < MINUTE) return "just now";
+  if (diff < HOUR) {
+    const mins = Math.floor(diff / MINUTE);
+    return `${mins}m ago`;
+  }
+  if (diff < DAY) {
+    const hours = Math.floor(diff / HOUR);
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(diff / DAY);
+  return `${days}d ago`;
+}
+function formatDuration(ms) {
+  if (ms < MINUTE) return `${Math.round(ms / 1e3)}s`;
+  if (ms < HOUR) return `${Math.floor(ms / MINUTE)}m`;
+  const h = Math.floor(ms / HOUR);
+  const m = Math.floor(ms % HOUR / MINUTE);
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+function formatTime(timestamp) {
+  return new Date(timestamp).toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatDate(timestamp) {
+  return new Date(timestamp).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function formatDateTime(timestamp) {
+  return `${formatDate(timestamp)} ${formatTime(timestamp)}`;
+}
+function todayRange() {
+  const now = /* @__PURE__ */ new Date();
+  const start = new Date(now);
+  start.setHours(0, 0, 0, 0);
+  return {
+    start: start.toISOString(),
+    end: now.toISOString()
+  };
+}
+
+// src/stores/timeline-store.ts
+function createTimelineStore() {
+  const { start, end } = todayRange();
+  return createStore2((set, get) => ({
+    items: [],
+    startTime: start,
+    endTime: end,
+    appFilter: void 0,
+    loading: false,
+    error: null,
+    setTimeRange: (start2, end2) => set({ startTime: start2, endTime: end2 }),
+    setAppFilter: (app) => set({ appFilter: app }),
+    loadTimeline: async (client) => {
+      const { startTime, endTime, appFilter } = get();
+      set({ loading: true, error: null });
+      try {
+        const res = await client.search({
+          startTime,
+          endTime,
+          appName: appFilter,
+          limit: 100,
+          contentType: "all"
+        });
+        set({ items: res.data, loading: false });
+      } catch (e) {
+        set({
+          error: e instanceof Error ? e.message : String(e),
+          loading: false
+        });
+      }
+    },
+    reset: () => {
+      const { start: start2, end: end2 } = todayRange();
+      set({
+        items: [],
+        startTime: start2,
+        endTime: end2,
+        appFilter: void 0,
+        loading: false,
+        error: null
+      });
+    }
+  }));
+}
+
+// src/stores/health-store.ts
+import { createStore as createStore3 } from "zustand/vanilla";
+function createHealthStore() {
+  return createStore3((set) => ({
+    health: null,
+    loading: false,
+    error: null,
+    checkHealth: async (client) => {
+      set({ loading: true, error: null });
+      try {
+        const health = await client.health();
+        set({ health, loading: false });
+      } catch (e) {
+        set({
+          error: e instanceof Error ? e.message : String(e),
+          loading: false
+        });
+      }
+    }
+  }));
+}
+
+// src/formatters/content.ts
+function truncate(text, maxLen = 80) {
+  if (text.length <= maxLen) return text;
+  return text.slice(0, maxLen - 1) + "\u2026";
+}
+function contentTypeLabel(item) {
+  switch (item.type) {
+    case "OCR":
+      return "screen";
+    case "Audio":
+      return "audio";
+    case "UI":
+      return "ui";
+  }
+}
+function highlightMatch(text, query) {
+  if (!query) return text;
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const re = new RegExp(`(${escaped})`, "gi");
+  return text.replace(re, "\x1B[1;33m$1\x1B[0m");
+}
+function stripAnsi(text) {
+  return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
+function contentPreview(item, maxLen = 80) {
+  switch (item.type) {
+    case "OCR":
+      return truncate(item.content.text.replace(/\n/g, " "), maxLen);
+    case "Audio":
+      return truncate(item.content.transcription.replace(/\n/g, " "), maxLen);
+    case "UI":
+      return truncate(item.content.text.replace(/\n/g, " "), maxLen);
+  }
+}
+
+// src/formatters/table.ts
+function formatTable(columns, rows) {
+  const divider = columns.map((c) => "\u2500".repeat(c.width)).join("\u2500\u252C\u2500");
+  const headerRow = columns.map((c) => pad(c.header, c.width, c.align)).join(" \u2502 ");
+  const dataRows = rows.map(
+    (row) => columns.map((c, i) => pad(row[i] ?? "", c.width, c.align)).join(" \u2502 ")
+  );
+  return [headerRow, divider, ...dataRows].join("\n");
+}
+function pad(text, width, align = "left") {
+  const visible = text.replace(/\x1b\[[0-9;]*m/g, "");
+  const padding = Math.max(0, width - visible.length);
+  if (align === "right") {
+    return " ".repeat(padding) + text;
+  }
+  return text + " ".repeat(padding);
+}
+export {
+  ScreenpipeUIClient,
+  contentPreview,
+  contentTypeLabel,
+  createClient,
+  createHealthStore,
+  createSearchStore,
+  createTimelineStore,
+  formatDate,
+  formatDateTime,
+  formatDuration,
+  formatTable,
+  formatTime,
+  getContentAppName,
+  getContentText,
+  getContentTimestamp,
+  highlightMatch,
+  stripAnsi,
+  timeAgo,
+  todayRange,
+  truncate
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@screenpipe-ui/core",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "test": "bun test",
+    "build": "tsup src/index.ts --format esm --dts --clean"
+  },
+  "dependencies": {
+    "@screenpipe/js": "^1.0.21",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.1.14",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  }
+}