diff --git a/pkg/mediacache/cache.go b/pkg/mediacache/cache.go index d3f81ef1c..b49f06fcd 100644 --- a/pkg/mediacache/cache.go +++ b/pkg/mediacache/cache.go @@ -130,6 +130,47 @@ func (c *Cache) PutEntry(hash, entryType string, entry Entry) error { return err } +// ListEntry represents a full row from the media_cache table. +type ListEntry struct { + Hash string + Type string + Result string + FilePath string + Pages int + CreatedAt string + AccessedAt string +} + +// List returns all cache entries, optionally filtered by type. +// Pass empty string to list all types. Ordered by accessed_at desc. +func (c *Cache) List(entryType string) ([]ListEntry, error) { + var rows *sql.Rows + var err error + if entryType != "" { + rows, err = c.db.Query( + `SELECT hash, type, result, file_path, pages, created_at, accessed_at + FROM media_cache WHERE type = ? ORDER BY accessed_at DESC`, entryType) + } else { + rows, err = c.db.Query( + `SELECT hash, type, result, file_path, pages, created_at, accessed_at + FROM media_cache ORDER BY accessed_at DESC`) + } + if err != nil { + return nil, err + } + defer rows.Close() + + var entries []ListEntry + for rows.Next() { + var e ListEntry + if err := rows.Scan(&e.Hash, &e.Type, &e.Result, &e.FilePath, &e.Pages, &e.CreatedAt, &e.AccessedAt); err != nil { + return entries, err + } + entries = append(entries, e) + } + return entries, rows.Err() +} + // Prune removes entries not accessed within the given duration. // Returns the number of entries removed. func (c *Cache) Prune(ttl time.Duration) (int64, error) { diff --git a/web/backend/api/media_cache.go b/web/backend/api/media_cache.go new file mode 100644 index 000000000..7d9785db1 --- /dev/null +++ b/web/backend/api/media_cache.go @@ -0,0 +1,128 @@ +package api + +import ( + "encoding/json" + "net/http" + "os" + "path/filepath" + + "github.com/sipeed/picoclaw/pkg/config" + "github.com/sipeed/picoclaw/pkg/mediacache" +) + +func (h *Handler) registerMediaCacheRoutes(mux *http.ServeMux) { + mux.HandleFunc("/api/media-cache", h.handleMediaCache) + mux.HandleFunc("/api/media-cache/", h.handleMediaCacheContent) +} + +type mediaCacheEntryJSON struct { + Hash string `json:"hash"` + Type string `json:"type"` + Result string `json:"result"` + FilePath string `json:"file_path,omitempty"` + Pages int `json:"pages,omitempty"` + CreatedAt string `json:"created_at"` + AccessedAt string `json:"accessed_at"` +} + +func (h *Handler) openMediaCache() (*mediacache.Cache, error) { + cfg, err := config.LoadConfig(h.configPath) + if err != nil { + return nil, err + } + ws := cfg.WorkspacePath() + return mediacache.Open(filepath.Join(ws, "media_cache.db")) +} + +// handleMediaCache lists all media cache entries. +func (h *Handler) handleMediaCache(w http.ResponseWriter, r *http.Request) { + if r.Method != http.MethodGet { + http.Error(w, `{"error":"method not allowed"}`, http.StatusMethodNotAllowed) + return + } + + mc, err := h.openMediaCache() + if err != nil { + http.Error(w, `{"error":"media cache not available"}`, http.StatusServiceUnavailable) + return + } + defer mc.Close() + + typeFilter := r.URL.Query().Get("type") + entries, err := mc.List(typeFilter) + if err != nil { + http.Error(w, `{"error":"failed to list cache entries"}`, http.StatusInternalServerError) + return + } + + result := make([]mediaCacheEntryJSON, 0, len(entries)) + for _, e := range entries { + result = append(result, mediaCacheEntryJSON{ + Hash: e.Hash, + Type: e.Type, + Result: e.Result, + FilePath: e.FilePath, + Pages: e.Pages, + CreatedAt: e.CreatedAt, + AccessedAt: e.AccessedAt, + }) + } + + w.Header().Set("Content-Type", "application/json") + json.NewEncoder(w).Encode(result) +} + +// handleMediaCacheContent serves the full file content for a PDF OCR entry. +// GET /api/media-cache/{hash} +func (h *Handler) handleMediaCacheContent(w http.ResponseWriter, r *http.Request) { + if r.Method != http.MethodGet { + http.Error(w, `{"error":"method not allowed"}`, http.StatusMethodNotAllowed) + return + } + + hash := filepath.Base(r.URL.Path) + if hash == "" || hash == "media-cache" { + http.Error(w, `{"error":"hash required"}`, http.StatusBadRequest) + return + } + + mc, err := h.openMediaCache() + if err != nil { + http.Error(w, `{"error":"media cache not available"}`, http.StatusServiceUnavailable) + return + } + defer mc.Close() + + entry, ok := mc.GetEntry(hash, mediacache.TypePDFOCR) + if !ok { + // Try image_desc + result, ok := mc.Get(hash, mediacache.TypeImageDesc) + if !ok { + http.Error(w, `{"error":"not found"}`, http.StatusNotFound) + return + } + w.Header().Set("Content-Type", "application/json") + json.NewEncoder(w).Encode(map[string]string{ + "hash": hash, + "type": mediacache.TypeImageDesc, + "content": result, + }) + return + } + + // Read the full markdown file + content, err := os.ReadFile(entry.FilePath) + if err != nil { + http.Error(w, `{"error":"file not found"}`, http.StatusNotFound) + return + } + + w.Header().Set("Content-Type", "application/json") + json.NewEncoder(w).Encode(map[string]any{ + "hash": hash, + "type": mediacache.TypePDFOCR, + "content": string(content), + "file_path": entry.FilePath, + "pages": entry.Pages, + }) +} diff --git a/web/backend/api/router.go b/web/backend/api/router.go index d55269ed8..8de954f1a 100644 --- a/web/backend/api/router.go +++ b/web/backend/api/router.go @@ -72,6 +72,9 @@ func (h *Handler) RegisterRoutes(mux *http.ServeMux) { // Research tasks (proxy to gateway) h.registerResearchRoutes(mux) + + // Media cache (image descriptions, PDF OCR) + h.registerMediaCacheRoutes(mux) } // Shutdown gracefully shuts down the handler, stopping the gateway if it was started by this handler. diff --git a/web/frontend/bun.lock b/web/frontend/bun.lock index dea77e783..29d95e6ae 100644 --- a/web/frontend/bun.lock +++ b/web/frontend/bun.lock @@ -9,18 +9,18 @@ "@tabler/icons-react": "^3.38.0", "@tailwindcss/vite": "^4.2.1", "@tanstack/react-query": "^5.90.21", - "@tanstack/react-router": "^1.163.3", + "@tanstack/react-router": "^1.167.0", "@tanstack/react-router-devtools": "^1.163.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "dayjs": "^1.11.19", + "dayjs": "^1.11.20", "i18next": "^25.8.14", "i18next-browser-languagedetector": "^8.2.1", - "jotai": "^2.18.0", + "jotai": "^2.18.1", "radix-ui": "^1.4.3", "react": "^19.2.0", "react-dom": "^19.2.0", - "react-i18next": "^16.5.4", + "react-i18next": "^16.5.8", "react-markdown": "^10.1.0", "react-textarea-autosize": "^8.5.9", "remark-gfm": "^4.0.1", @@ -32,7 +32,7 @@ "wrap-ansi": "^10.0.0", }, "devDependencies": { - "@eslint/js": "^9.39.1", + "@eslint/js": "^9.39.3", "@tailwindcss/typography": "^0.5.19", "@tanstack/router-plugin": "^1.164.0", "@trivago/prettier-plugin-sort-imports": "^6.0.2", @@ -40,8 +40,8 @@ "@types/react": "^19.2.7", "@types/react-dom": "^19.2.3", "@typescript-eslint/eslint-plugin": "^8.56.1", - "@vitejs/plugin-react": "^5.1.1", - "eslint": "^9.39.1", + "@vitejs/plugin-react": "^5.2.0", + "eslint": "^9.39.3", "eslint-config-prettier": "^10.1.8", "eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-react-refresh": "^0.4.24", @@ -467,13 +467,13 @@ "@tailwindcss/vite": ["@tailwindcss/vite@4.2.1", "", { "dependencies": { "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "tailwindcss": "4.2.1" }, "peerDependencies": { "vite": "7.3.1" } }, "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w=="], - "@tanstack/history": ["@tanstack/history@1.161.4", "", {}, "sha512-Kp/WSt411ZWYvgXy6uiv5RmhHrz9cAml05AQPrtdAp7eUqvIDbMGPnML25OKbzR3RJ1q4wgENxDTvlGPa9+Mww=="], + "@tanstack/history": ["@tanstack/history@1.161.6", "", {}, "sha512-NaOGLRrddszbQj9upGat6HG/4TKvXLvu+osAIgfxPYA+eIvYKv8GKDJOrY2D3/U9MRnKfMWD7bU4jeD4xmqyIg=="], "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="], "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "19.2.4" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="], - "@tanstack/react-router": ["@tanstack/react-router@1.163.3", "", { "dependencies": { "@tanstack/history": "1.161.4", "@tanstack/react-store": "0.9.1", "@tanstack/router-core": "1.163.3", "isbot": "5.1.35", "tiny-invariant": "1.3.3", "tiny-warning": "1.0.3" }, "peerDependencies": { "react": "19.2.4", "react-dom": "19.2.4" } }, "sha512-hheBbFVb+PbxtrWp8iy6+TTRTbhx3Pn6hKo8Tv/sWlG89ZMcD1xpQWzx8ukHN9K8YWbh5rdzt4kv6u8X4kB28Q=="], + "@tanstack/react-router": ["@tanstack/react-router@1.167.5", "", { "dependencies": { "@tanstack/history": "1.161.6", "@tanstack/react-store": "^0.9.1", "@tanstack/router-core": "1.167.5", "isbot": "^5.1.22", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-s1nP6l/7BYZfSwhoNbB7/rUmZ07q/AvkmhBoiDQl3tgy5dpb9Q1qjtIapYdvCOrao1aA/QCaWqxcbGc2Ct1bvQ=="], "@tanstack/react-router-devtools": ["@tanstack/react-router-devtools@1.163.3", "", { "dependencies": { "@tanstack/router-devtools-core": "1.163.3" }, "optionalDependencies": { "@tanstack/router-core": "1.163.3" }, "peerDependencies": { "@tanstack/react-router": "1.163.3", "react": "19.2.4", "react-dom": "19.2.4" } }, "sha512-42VMkV/2Z8ro7xzblPBRNZIEmCNXMzm2jD68G52p2qhjXm38wGpg46qneAESN9FtTQeVWk5aSXs47/jt7lkzmw=="], @@ -553,7 +553,7 @@ "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="], - "@vitejs/plugin-react": ["@vitejs/plugin-react@5.1.4", "", { "dependencies": { "@babel/core": "7.29.0", "@babel/plugin-transform-react-jsx-self": "7.27.1", "@babel/plugin-transform-react-jsx-source": "7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "7.20.5", "react-refresh": "0.18.0" }, "peerDependencies": { "vite": "7.3.1" } }, "sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA=="], + "@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="], "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "3.0.2", "negotiator": "1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="], @@ -673,7 +673,7 @@ "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="], - "dayjs": ["dayjs@1.11.19", "", {}, "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="], + "dayjs": ["dayjs@1.11.20", "", {}, "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="], "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], @@ -955,7 +955,7 @@ "jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="], - "jotai": ["jotai@2.18.0", "", { "optionalDependencies": { "@babel/core": "7.29.0", "@babel/template": "7.28.6", "@types/react": "19.2.14", "react": "19.2.4" } }, "sha512-XI38kGWAvtxAZ+cwHcTgJsd+kJOJGf3OfL4XYaXWZMZ7IIY8e53abpIHvtVn1eAgJ5dlgwlGFnP4psrZ/vZbtA=="], + "jotai": ["jotai@2.18.1", "", { "peerDependencies": { "@babel/core": ">=7.0.0", "@babel/template": ">=7.0.0", "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@babel/core", "@babel/template", "@types/react", "react"] }, "sha512-e0NOzK+yRFwHo7DOp0DS0Ycq74KMEAObDWFGmfEL28PD9nLqBTt3/Ug7jf9ca72x0gC9LQZG9zH+0ISICmy3iA=="], "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], @@ -1249,7 +1249,7 @@ "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "0.27.0" }, "peerDependencies": { "react": "19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="], - "react-i18next": ["react-i18next@16.5.4", "", { "dependencies": { "@babel/runtime": "7.28.6", "html-parse-stringify": "3.0.1", "use-sync-external-store": "1.6.0" }, "optionalDependencies": { "react-dom": "19.2.4", "typescript": "5.9.3" }, "peerDependencies": { "i18next": "25.8.14", "react": "19.2.4" } }, "sha512-6yj+dcfMncEC21QPhOTsW8mOSO+pzFmT6uvU7XXdvM/Cp38zJkmTeMeKmTrmCMD5ToT79FmiE/mRWiYWcJYW4g=="], + "react-i18next": ["react-i18next@16.5.8", "", { "dependencies": { "@babel/runtime": "^7.28.4", "html-parse-stringify": "^3.0.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "i18next": ">= 25.6.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-2ABeHHlakxVY+LSirD+OiERxFL6+zip0PaHo979bgwzeHg27Sqc82xxXWIrSFmfWX0ZkrvXMHwhsi/NGUf5VQg=="], "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "3.0.4", "@types/mdast": "4.0.4", "devlop": "1.1.0", "hast-util-to-jsx-runtime": "2.3.6", "html-url-attributes": "3.0.1", "mdast-util-to-hast": "13.2.1", "remark-parse": "11.0.0", "remark-rehype": "11.1.2", "unified": "11.0.5", "unist-util-visit": "5.1.0", "vfile": "6.0.3" }, "peerDependencies": { "@types/react": "19.2.14", "react": "19.2.4" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="], @@ -1529,6 +1529,12 @@ "@modelcontextprotocol/sdk/ajv": ["ajv@8.18.0", "", { "dependencies": { "fast-deep-equal": "3.1.3", "fast-uri": "3.1.0", "json-schema-traverse": "1.0.0", "require-from-string": "2.0.2" } }, "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A=="], + "@tanstack/react-router/@tanstack/router-core": ["@tanstack/router-core@1.167.5", "", { "dependencies": { "@tanstack/history": "1.161.6", "@tanstack/store": "^0.9.1", "cookie-es": "^2.0.0", "seroval": "^1.4.2", "seroval-plugins": "^1.4.2", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" }, "bin": { "intent": "bin/intent.js" } }, "sha512-8fRgJ0zNJf77R4grCaJQ5Imatjyc4YT5v8rlsPkYYYeUlcFNLbuFRhLlAMdND9gRUMznpnbRDXngpTPgx2K7HQ=="], + + "@tanstack/router-core/@tanstack/history": ["@tanstack/history@1.161.4", "", {}, "sha512-Kp/WSt411ZWYvgXy6uiv5RmhHrz9cAml05AQPrtdAp7eUqvIDbMGPnML25OKbzR3RJ1q4wgENxDTvlGPa9+Mww=="], + + "@tanstack/router-plugin/@tanstack/react-router": ["@tanstack/react-router@1.163.3", "", { "dependencies": { "@tanstack/history": "1.161.4", "@tanstack/react-store": "0.9.1", "@tanstack/router-core": "1.163.3", "isbot": "5.1.35", "tiny-invariant": "1.3.3", "tiny-warning": "1.0.3" }, "peerDependencies": { "react": "19.2.4", "react-dom": "19.2.4" } }, "sha512-hheBbFVb+PbxtrWp8iy6+TTRTbhx3Pn6hKo8Tv/sWlG89ZMcD1xpQWzx8ukHN9K8YWbh5rdzt4kv6u8X4kB28Q=="], + "@ts-morph/common/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "5.0.4" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="], "@typescript-eslint/typescript-estree/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "5.0.4" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="], @@ -1619,6 +1625,8 @@ "@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="], + "@tanstack/router-plugin/@tanstack/react-router/@tanstack/history": ["@tanstack/history@1.161.4", "", {}, "sha512-Kp/WSt411ZWYvgXy6uiv5RmhHrz9cAml05AQPrtdAp7eUqvIDbMGPnML25OKbzR3RJ1q4wgENxDTvlGPa9+Mww=="], + "@ts-morph/common/minimatch/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "4.0.4" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="], "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "4.0.4" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="], diff --git a/web/frontend/src/api/media-cache.ts b/web/frontend/src/api/media-cache.ts new file mode 100644 index 000000000..74d0a3fb9 --- /dev/null +++ b/web/frontend/src/api/media-cache.ts @@ -0,0 +1,40 @@ +export interface MediaCacheEntry { + hash: string + type: "image_desc" | "pdf_ocr" + result: string + file_path?: string + pages?: number + created_at: string + accessed_at: string +} + +export interface MediaCacheContent { + hash: string + type: string + content: string + file_path?: string + pages?: number +} + +async function request(path: string): Promise { + const res = await fetch(path) + if (!res.ok) { + throw new Error(`API error: ${res.status}`) + } + return res.json() as Promise +} + +export async function getMediaCacheEntries( + type?: string, +): Promise { + const params = type ? `?type=${encodeURIComponent(type)}` : "" + return request(`/api/media-cache${params}`) +} + +export async function getMediaCacheContent( + hash: string, +): Promise { + return request( + `/api/media-cache/${encodeURIComponent(hash)}`, + ) +} diff --git a/web/frontend/src/components/research/media-cache-page.tsx b/web/frontend/src/components/research/media-cache-page.tsx new file mode 100644 index 000000000..1f434dc65 --- /dev/null +++ b/web/frontend/src/components/research/media-cache-page.tsx @@ -0,0 +1,227 @@ +import { + IconFileText, + IconPhoto, +} from "@tabler/icons-react" +import { useQuery } from "@tanstack/react-query" +import * as React from "react" + +import { + type MediaCacheContent, + type MediaCacheEntry, + getMediaCacheContent, + getMediaCacheEntries, +} from "@/api/media-cache" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils" + +export function MediaCachePage() { + const [typeFilter, setTypeFilter] = React.useState("") + const [expandedHash, setExpandedHash] = React.useState(null) + + const { data: entries, isLoading, error } = useQuery({ + queryKey: ["media-cache", typeFilter], + queryFn: () => getMediaCacheEntries(typeFilter || undefined), + refetchInterval: 30000, + }) + + return ( +
+
+ {/* Type filter */} +
+ setTypeFilter("")} + > + All + + setTypeFilter("image_desc")} + > + + Images + + setTypeFilter("pdf_ocr")} + > + + PDF + +
+ + {isLoading ? ( +
Loading...
+ ) : error ? ( +
+ Failed to load media cache. +
+ ) : !entries?.length ? ( + + + No cached media yet. Send an image or PDF to get started. + + + ) : ( +
+ {entries.map((entry) => ( + + setExpandedHash( + expandedHash === entry.hash ? null : entry.hash, + ) + } + /> + ))} +
+ )} +
+
+ ) +} + +function FilterButton({ + active, + onClick, + children, +}: { + active: boolean + onClick: () => void + children: React.ReactNode +}) { + return ( + + ) +} + +function MediaEntry({ + entry, + expanded, + onToggle, +}: { + entry: MediaCacheEntry + expanded: boolean + onToggle: () => void +}) { + const isImage = entry.type === "image_desc" + const Icon = isImage ? IconPhoto : IconFileText + const typeLabel = isImage ? "Image" : "PDF" + const typeColor = isImage + ? "text-blue-600 bg-blue-50" + : "text-orange-600 bg-orange-50" + + const accessed = new Date(entry.accessed_at) + const timeStr = accessed.toLocaleString() + + return ( + + +
+
+ + + {entry.hash} + + + {entry.result} + +
+
+ + {typeLabel} + {entry.pages ? ` (${entry.pages}p)` : ""} + + {timeStr} +
+
+ + {expanded && ( + + + + )} + + ) +} + +function ExpandedContent({ entry }: { entry: MediaCacheEntry }) { + const isPDF = entry.type === "pdf_ocr" + + const { data, isLoading } = useQuery({ + queryKey: ["media-cache-content", entry.hash], + queryFn: () => getMediaCacheContent(entry.hash), + enabled: isPDF, // only fetch full content for PDFs + }) + + if (!isPDF) { + // Image description: show full result inline + return ( +
+
+ Description +
+
+ {entry.result} +
+
+ ) + } + + // PDF OCR: show preview + full content on demand + return ( +
+
+
Preview
+
+ {entry.result} +
+
+ {entry.file_path && ( +
+ + {entry.file_path} +
+ )} + {isLoading ? ( +
+ Loading full content... +
+ ) : data?.content ? ( +
+
+ Full OCR Content +
+
+ {data.content} +
+
+ ) : null} +
+ ) +} diff --git a/web/frontend/src/components/research/research-page.tsx b/web/frontend/src/components/research/research-page.tsx index b23d31545..6456b615e 100644 --- a/web/frontend/src/components/research/research-page.tsx +++ b/web/frontend/src/components/research/research-page.tsx @@ -17,7 +17,6 @@ import { createResearchTask, getResearchTasks, } from "@/api/research" -import { PageHeader } from "@/components/page-header" import { Button } from "@/components/ui/button" import { Card, @@ -83,7 +82,7 @@ export function ResearchPage() { return (
- +
diff --git a/web/frontend/src/routes/research.tsx b/web/frontend/src/routes/research.tsx index 8405b21be..e848473f5 100644 --- a/web/frontend/src/routes/research.tsx +++ b/web/frontend/src/routes/research.tsx @@ -1,10 +1,19 @@ +import { + IconDatabase, + IconFileSearch, +} from "@tabler/icons-react" import { Outlet, createFileRoute, useRouterState, } from "@tanstack/react-router" +import * as React from "react" +import { MediaCachePage } from "@/components/research/media-cache-page" import { ResearchPage } from "@/components/research/research-page" +import { PageHeader } from "@/components/page-header" +import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils" export const Route = createFileRoute("/research")({ component: ResearchRouteLayout, @@ -14,10 +23,59 @@ function ResearchRouteLayout() { const pathname = useRouterState({ select: (state) => state.location.pathname, }) + const [tab, setTab] = React.useState<"research" | "media">("research") - if (pathname === "/research") { - return + // If on a detail sub-route, show Outlet + if (pathname !== "/research") { + return } - return + return ( +
+ +
+ setTab("research")} + > + + Research + + setTab("media")} + > + + Media + +
+ + + {tab === "research" ? : } +
+ ) +} + +function TabButton({ + active, + onClick, + children, +}: { + active: boolean + onClick: () => void + children: React.ReactNode +}) { + return ( + + ) }