Implement Item Interactions (read/star) with tests

author: Adam Mathes <adam@adammathes.com> 2026-02-13 06:58:30 -0800
committer: Adam Mathes <adam@adammathes.com> 2026-02-13 06:58:30 -0800
commit: bd2508211760edbc1bad1d515587d08fd2ec99c9 (patch)
tree: b2e17d9b7a9c460dd808962394e956f0c400d943
parent: 3ba71500bc2d60a00ca81b9439305029670f4d52 (diff)
download: neko-bd2508211760edbc1bad1d515587d08fd2ec99c9.tar.gz
neko-bd2508211760edbc1bad1d515587d08fd2ec99c9.tar.bz2
neko-bd2508211760edbc1bad1d515587d08fd2ec99c9.zip
21 files changed, 1066 insertions, 293 deletions
diff --git a/.thicket/tickets.jsonl b/.thicket/tickets.jsonl
index 8af7e2b..1960c08 100644
--- a/.thicket/tickets.jsonl
+++ b/.thicket/tickets.jsonl
@@ -3,12 +3,13 @@
 {"id":"NK-1phdpf","title":"refactor backend to have a clean API","description":"create a nice clean API for the backend GO code that is more independent of the frontend\n\nensure that it is working with good tests","type":"task","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T01:52:49.8322638Z","updated":"2026-02-13T04:26:47.517515371Z"}
 {"id":"NK-27or4b","title":"Increase Test Coverage to \u003e80%","description":"Project-wide test coverage is currently ~63%. Key gaps are in the new  and  packages, as well as some core model logic. Increase coverage to at least 80% to ensure stability.","type":"task","status":"open","priority":3,"labels":null,"assignee":"","created":"2026-02-13T05:03:09.677147894Z","updated":"2026-02-13T05:03:09.677147894Z"}
 {"id":"NK-3om7x2","title":"Implement Feed Items View","description":"Create a component to display items for a selected feed. Fetch items from /api/stream?feed_id=...","type":"","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T05:59:46.161356437Z","updated":"2026-02-13T14:55:14.795643835Z"}
+{"id":"NK-59kbij","title":"Implement Frontend Logout","description":"Add logout button to dashboard header. Call /api/logout (need to create this potentially?). Redirect to /login","type":"","status":"open","priority":1,"labels":null,"assignee":"","created":"2026-02-13T14:58:18.343464645Z","updated":"2026-02-13T14:58:18.343464645Z"}
 {"id":"NK-6q9nyg","title":"Refactor HTTP-dependent functions for testability","description":"Several functions use http.Get or external libraries directly (GetFullContent uses goose, ResolveFeedURL uses http.Get + goquery, imageProxyHandler uses http.Client). Refactor these to accept interfaces for HTTP fetching so they can be unit tested with mocks. This is the primary blocker for reaching 90% coverage.","type":"cleanup","status":"open","priority":3,"labels":null,"assignee":"","created":"2026-02-13T03:54:37.630148644Z","updated":"2026-02-13T03:54:37.630148644Z"}
 {"id":"NK-7tzbql","title":"Fix TUI Content View Navigation and Interaction","description":"The TUI content view (reading a single item) is currently non-functional or severely limited. Users cannot easily navigate back, scroll, or interact with the content. This task involves improving the 'viewContent' state in the TUI.","type":"bug","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T05:02:57.382793121Z","updated":"2026-02-13T05:06:15.144485446Z"}
 {"id":"NK-9hx0y7","title":"Implement Frontend Login","description":"Create login page and auth logic in the new React frontend. Port functionality from legacy login.html.","type":"","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T05:44:01.546395342Z","updated":"2026-02-13T05:50:33.877452063Z"}
 {"id":"NK-bsdwqz","title":"terminal UI","description":"once there is good test coverage and a clean backend API, work on a nice efficient TUI with https://github.com/charmbracelet/bubbletea","type":"task","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T01:54:02.285738454Z","updated":"2026-02-13T04:42:09.824268427Z"}
 {"id":"NK-ed1iah","title":"Make feed crawling async in API","description":"Currently, POST /api/feed triggers an immediate crawl which blocks the response (or at least keeps the goroutine alive). Refactor the crawling architecture to be truly async with a job queue or status updates, improving API responsiveness and reliability.","type":"cleanup","status":"open","priority":3,"labels":null,"assignee":"","created":"2026-02-13T04:26:55.908243985Z","updated":"2026-02-13T04:26:55.908243985Z"}
-{"id":"NK-ek0cox","title":"Implement Item Interactions","description":"Add ability to toggle read/unread and star/unstar status for items. Use PUT /item/:id","type":"","status":"open","priority":1,"labels":null,"assignee":"","created":"2026-02-13T14:55:14.825454967Z","updated":"2026-02-13T14:55:14.825454967Z"}
+{"id":"NK-ek0cox","title":"Implement Item Interactions","description":"Add ability to toggle read/unread and star/unstar status for items. Use PUT /item/:id","type":"","status":"closed","priority":1,"labels":null,"assignee":"","created":"2026-02-13T14:55:14.825454967Z","updated":"2026-02-13T14:58:18.307521003Z"}
 {"id":"NK-gqkh96","title":"Remaining test coverage gaps","description":"Cross-package test coverage is at 81.2%. The remaining untested functions are: GetFullContent (goose HTTP extraction), indexHandler/serveBoxedFile (rice.MustFindBox), Serve (starts HTTP server), main, util.init. To reach 90%, consider: (1) refactoring GetFullContent to accept an interface for HTTP fetching, (2) refactoring Serve to extract route setup into a testable function, (3) mocking rice.MustFindBox, (4) using feeds from https://trenchant.org/feeds.txt as static test fixtures for integration tests.","type":"cleanup","status":"open","priority":3,"labels":null,"assignee":"","created":"2026-02-13T03:54:30.298141982Z","updated":"2026-02-13T03:54:30.298141982Z"}
 {"id":"NK-op5594","title":"Ensure 80% Frontend Test Coverage","description":"Configure coverage reporting in vitest and ensure the frontend codebase maintains at least 80% test coverage.","type":"task","status":"closed","priority":2,"labels":null,"assignee":"","created":"2026-02-13T05:46:24.13314466Z","updated":"2026-02-13T05:50:46.728239299Z"}
 {"id":"NK-ric1zs","title":"Migrate frontend to /api/ endpoints","description":"The backend now provides a clean REST API at /api/. Update the frontend UI to use these new endpoints instead of the legacy backward-compatibility routes (/stream/, /feed/, etc.). This will allow for cleaner separation and better utilization of proper REST patterns.","type":"cleanup","status":"open","priority":3,"labels":null,"assignee":"","created":"2026-02-13T04:26:55.864725765Z","updated":"2026-02-13T04:26:55.864725765Z"}
@@ -25,5 +26,6 @@
 {"id":"NK-dlvmiyc","from_ticket_id":"NK-7tzbql","to_ticket_id":"NK-bsdwqz","type":"created_from","created":"2026-02-13T05:02:57.392616851Z"}
 {"id":"NK-dm75oc8","from_ticket_id":"NK-3om7x2","to_ticket_id":"NK-zt4e32","type":"created_from","created":"2026-02-13T05:59:46.169842933Z"}
 {"id":"NK-dofihuz","from_ticket_id":"NK-0ppv3f","to_ticket_id":"NK-t0nmbj","type":"created_from","created":"2026-02-13T05:44:01.640770816Z"}
+{"id":"NK-dumpdcp","from_ticket_id":"NK-59kbij","to_ticket_id":"NK-ek0cox","type":"created_from","created":"2026-02-13T14:58:18.351925575Z"}
 {"id":"NK-dw8luqe","from_ticket_id":"NK-ek0cox","to_ticket_id":"NK-3om7x2","type":"created_from","created":"2026-02-13T14:55:14.832352853Z"}
 {"id":"NK-dwav3hh","from_ticket_id":"NK-6q9nyg","to_ticket_id":"NK-x924bu","type":"created_from","created":"2026-02-13T03:54:37.639569082Z"}
diff --git a/frontend/coverage/clover.xml b/frontend/coverage/clover.xml
index 8251808..415b336 100644
--- a/frontend/coverage/clover.xml
+++ b/frontend/coverage/clover.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1770962571342" clover="3.2.0">
-  <project timestamp="1770962571342" name="All files">
-    <metrics statements="68" coveredstatements="61" conditionals="42" coveredconditionals="30" methods="21" coveredmethods="19" elements="131" coveredelements="110" complexity="0" loc="68" ncloc="68" packages="2" files="8" classes="8"/>
+<coverage generated="1770994662747" clover="3.2.0">
+  <project timestamp="1770994662747" name="All files">
+    <metrics statements="87" coveredstatements="79" conditionals="58" coveredconditionals="47" methods="28" coveredmethods="26" elements="173" coveredelements="152" complexity="0" loc="87" ncloc="87" packages="2" files="10" classes="10"/>
     <package name="src">
       <metrics statements="15" coveredstatements="12" conditionals="6" coveredconditionals="4" methods="6" coveredmethods="5"/>
       <file name="App.css" path="/Users/adam/workspace/vibecode/neko/frontend/src/App.css">
@@ -27,32 +27,57 @@
       </file>
     </package>
     <package name="src.components">
-      <metrics statements="53" coveredstatements="49" conditionals="36" coveredconditionals="26" methods="15" coveredmethods="14"/>
+      <metrics statements="72" coveredstatements="67" conditionals="52" coveredconditionals="43" methods="22" coveredmethods="21"/>
+      <file name="FeedItem.css" path="/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItem.css">
+        <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+      </file>
+      <file name="FeedItem.tsx" path="/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItem.tsx">
+        <metrics statements="19" coveredstatements="18" conditionals="24" coveredconditionals="22" methods="7" coveredmethods="7"/>
+        <line num="10" count="12" type="stmt"/>
+        <line num="11" count="12" type="stmt"/>
+        <line num="13" count="12" type="stmt"/>
+        <line num="14" count="2" type="stmt"/>
+        <line num="17" count="12" type="stmt"/>
+        <line num="18" count="1" type="stmt"/>
+        <line num="21" count="12" type="stmt"/>
+        <line num="22" count="3" type="stmt"/>
+        <line num="24" count="3" type="stmt"/>
+        <line num="25" count="3" type="stmt"/>
+        <line num="27" count="3" type="stmt"/>
+        <line num="39" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="40" count="0" type="stmt"/>
+        <line num="42" count="2" type="stmt"/>
+        <line num="47" count="2" type="stmt"/>
+        <line num="50" count="1" type="stmt"/>
+        <line num="52" count="1" type="stmt"/>
+        <line num="53" count="1" type="stmt"/>
+        <line num="57" count="12" type="stmt"/>
+      </file>
       <file name="FeedItems.css" path="/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.css">
         <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
       </file>
       <file name="FeedItems.tsx" path="/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.tsx">
-        <metrics statements="20" coveredstatements="17" conditionals="18" coveredconditionals="11" methods="6" coveredmethods="5"/>
-        <line num="7" count="3" type="stmt"/>
+        <metrics statements="20" coveredstatements="17" conditionals="10" coveredconditionals="6" methods="6" coveredmethods="5"/>
         <line num="8" count="3" type="stmt"/>
         <line num="9" count="3" type="stmt"/>
         <line num="10" count="3" type="stmt"/>
-        <line num="12" count="3" type="stmt"/>
-        <line num="13" count="2" type="stmt"/>
+        <line num="11" count="3" type="stmt"/>
+        <line num="13" count="3" type="stmt"/>
         <line num="14" count="2" type="stmt"/>
-        <line num="16" count="2" type="cond" truecount="1" falsecount="1"/>
-        <line num="20" count="2" type="stmt"/>
-        <line num="22" count="1" type="cond" truecount="1" falsecount="1"/>
-        <line num="23" count="0" type="stmt"/>
-        <line num="25" count="1" type="stmt"/>
-        <line num="28" count="1" type="stmt"/>
+        <line num="15" count="2" type="stmt"/>
+        <line num="17" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="21" count="2" type="stmt"/>
+        <line num="23" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="24" count="0" type="stmt"/>
+        <line num="26" count="1" type="stmt"/>
         <line num="29" count="1" type="stmt"/>
-        <line num="32" count="0" type="stmt"/>
+        <line num="30" count="1" type="stmt"/>
         <line num="33" count="0" type="stmt"/>
-        <line num="37" count="3" type="cond" truecount="2" falsecount="0"/>
-        <line num="38" count="1" type="cond" truecount="1" falsecount="1"/>
-        <line num="40" count="1" type="stmt"/>
-        <line num="49" count="2" type="cond" truecount="2" falsecount="0"/>
+        <line num="34" count="0" type="stmt"/>
+        <line num="38" count="3" type="cond" truecount="2" falsecount="0"/>
+        <line num="39" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="41" count="1" type="stmt"/>
+        <line num="50" count="2" type="stmt"/>
       </file>
       <file name="FeedList.css" path="/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedList.css">
         <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
diff --git a/frontend/coverage/coverage-final.json b/frontend/coverage/coverage-final.json
index 8fc3ade..7ec3f92 100644
--- a/frontend/coverage/coverage-final.json
+++ b/frontend/coverage/coverage-final.json
@@ -1,7 +1,9 @@
 {"/Users/adam/workspace/vibecode/neko/frontend/src/App.css": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/App.css","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
 ,"/Users/adam/workspace/vibecode/neko/frontend/src/App.tsx": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/App.tsx","statementMap":{"0":{"start":{"line":8,"column":22},"end":{"line":8,"column":null}},"1":{"start":{"line":9,"column":8},"end":{"line":9,"column":null}},"2":{"start":{"line":11,"column":2},"end":{"line":21,"column":null}},"3":{"start":{"line":12,"column":4},"end":{"line":20,"column":null}},"4":{"start":{"line":14,"column":8},"end":{"line":18,"column":null}},"5":{"start":{"line":15,"column":10},"end":{"line":15,"column":null}},"6":{"start":{"line":17,"column":10},"end":{"line":17,"column":null}},"7":{"start":{"line":20,"column":19},"end":{"line":20,"column":33}},"8":{"start":{"line":23,"column":2},"end":{"line":25,"column":null}},"9":{"start":{"line":24,"column":4},"end":{"line":24,"column":null}},"10":{"start":{"line":27,"column":2},"end":{"line":29,"column":null}},"11":{"start":{"line":28,"column":4},"end":{"line":28,"column":null}},"12":{"start":{"line":31,"column":2},"end":{"line":31,"column":null}},"13":{"start":{"line":38,"column":2},"end":{"line":57,"column":null}},"14":{"start":{"line":62,"column":2},"end":{"line":75,"column":null}}},"fnMap":{"0":{"name":"RequireAuth","decl":{"start":{"line":7,"column":9},"end":{"line":7,"column":21}},"loc":{"start":{"line":7,"column":69},"end":{"line":32,"column":null}},"line":7},"1":{"name":"(anonymous_1)","decl":{"start":{"line":11,"column":12},"end":{"line":11,"column":18}},"loc":{"start":{"line":11,"column":18},"end":{"line":21,"column":5}},"line":11},"2":{"name":"(anonymous_2)","decl":{"start":{"line":13,"column":12},"end":{"line":13,"column":13}},"loc":{"start":{"line":13,"column":21},"end":{"line":19,"column":7}},"line":13},"3":{"name":"(anonymous_3)","decl":{"start":{"line":20,"column":13},"end":{"line":20,"column":19}},"loc":{"start":{"line":20,"column":19},"end":{"line":20,"column":33}},"line":20},"4":{"name":"Dashboard","decl":{"start":{"line":37,"column":9},"end":{"line":37,"column":21}},"loc":{"start":{"line":37,"column":21},"end":{"line":59,"column":null}},"line":37},"5":{"name":"App","decl":{"start":{"line":61,"column":9},"end":{"line":61,"column":15}},"loc":{"start":{"line":61,"column":15},"end":{"line":77,"column":null}},"line":61}},"branchMap":{"0":{"loc":{"start":{"line":14,"column":8},"end":{"line":18,"column":null}},"type":"if","locations":[{"start":{"line":14,"column":8},"end":{"line":18,"column":null}},{"start":{"line":16,"column":15},"end":{"line":18,"column":null}}],"line":14},"1":{"loc":{"start":{"line":23,"column":2},"end":{"line":25,"column":null}},"type":"if","locations":[{"start":{"line":23,"column":2},"end":{"line":25,"column":null}},{"start":{},"end":{}}],"line":23},"2":{"loc":{"start":{"line":27,"column":2},"end":{"line":29,"column":null}},"type":"if","locations":[{"start":{"line":27,"column":2},"end":{"line":29,"column":null}},{"start":{},"end":{}}],"line":27}},"s":{"0":2,"1":2,"2":2,"3":1,"4":1,"5":1,"6":0,"7":0,"8":2,"9":1,"10":1,"11":0,"12":1,"13":1,"14":2},"f":{"0":2,"1":1,"2":1,"3":0,"4":1,"5":2},"b":{"0":[1,0],"1":[1,1],"2":[0,1]},"meta":{"lastBranch":3,"lastFunction":6,"lastStatement":15,"seen":{"f:7:9:7:21":0,"s:8:22:8:Infinity":0,"s:9:8:9:Infinity":1,"s:11:2:21:Infinity":2,"f:11:12:11:18":1,"s:12:4:20:Infinity":3,"f:13:12:13:13":2,"b:14:8:18:Infinity:16:15:18:Infinity":0,"s:14:8:18:Infinity":4,"s:15:10:15:Infinity":5,"s:17:10:17:Infinity":6,"f:20:13:20:19":3,"s:20:19:20:33":7,"b:23:2:25:Infinity:undefined:undefined:undefined:undefined":1,"s:23:2:25:Infinity":8,"s:24:4:24:Infinity":9,"b:27:2:29:Infinity:undefined:undefined:undefined:undefined":2,"s:27:2:29:Infinity":10,"s:28:4:28:Infinity":11,"s:31:2:31:Infinity":12,"f:37:9:37:21":4,"s:38:2:57:Infinity":13,"f:61:9:61:15":5,"s:62:2:75:Infinity":14}}}
+,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItem.css": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItem.css","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
+,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItem.tsx": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItem.tsx","statementMap":{"0":{"start":{"line":10,"column":24},"end":{"line":10,"column":null}},"1":{"start":{"line":11,"column":30},"end":{"line":11,"column":null}},"2":{"start":{"line":13,"column":23},"end":{"line":15,"column":null}},"3":{"start":{"line":14,"column":8},"end":{"line":14,"column":null}},"4":{"start":{"line":17,"column":23},"end":{"line":19,"column":null}},"5":{"start":{"line":18,"column":8},"end":{"line":18,"column":null}},"6":{"start":{"line":21,"column":23},"end":{"line":55,"column":null}},"7":{"start":{"line":22,"column":8},"end":{"line":22,"column":null}},"8":{"start":{"line":24,"column":29},"end":{"line":24,"column":null}},"9":{"start":{"line":25,"column":8},"end":{"line":25,"column":null}},"10":{"start":{"line":27,"column":8},"end":{"line":54,"column":null}},"11":{"start":{"line":39,"column":16},"end":{"line":41,"column":null}},"12":{"start":{"line":40,"column":20},"end":{"line":40,"column":null}},"13":{"start":{"line":42,"column":16},"end":{"line":42,"column":null}},"14":{"start":{"line":47,"column":16},"end":{"line":47,"column":null}},"15":{"start":{"line":50,"column":16},"end":{"line":50,"column":null}},"16":{"start":{"line":52,"column":16},"end":{"line":52,"column":null}},"17":{"start":{"line":53,"column":16},"end":{"line":53,"column":null}},"18":{"start":{"line":57,"column":4},"end":{"line":87,"column":null}}},"fnMap":{"0":{"name":"FeedItem","decl":{"start":{"line":9,"column":24},"end":{"line":9,"column":33}},"loc":{"start":{"line":9,"column":71},"end":{"line":89,"column":null}},"line":9},"1":{"name":"(anonymous_1)","decl":{"start":{"line":13,"column":23},"end":{"line":13,"column":29}},"loc":{"start":{"line":13,"column":29},"end":{"line":15,"column":null}},"line":13},"2":{"name":"(anonymous_2)","decl":{"start":{"line":17,"column":23},"end":{"line":17,"column":29}},"loc":{"start":{"line":17,"column":29},"end":{"line":19,"column":null}},"line":17},"3":{"name":"(anonymous_3)","decl":{"start":{"line":21,"column":23},"end":{"line":21,"column":24}},"loc":{"start":{"line":21,"column":42},"end":{"line":55,"column":null}},"line":21},"4":{"name":"(anonymous_4)","decl":{"start":{"line":38,"column":18},"end":{"line":38,"column":19}},"loc":{"start":{"line":38,"column":27},"end":{"line":43,"column":13}},"line":38},"5":{"name":"(anonymous_5)","decl":{"start":{"line":44,"column":18},"end":{"line":44,"column":24}},"loc":{"start":{"line":44,"column":24},"end":{"line":48,"column":13}},"line":44},"6":{"name":"(anonymous_6)","decl":{"start":{"line":49,"column":19},"end":{"line":49,"column":20}},"loc":{"start":{"line":49,"column":28},"end":{"line":54,"column":13}},"line":49}},"branchMap":{"0":{"loc":{"start":{"line":39,"column":16},"end":{"line":41,"column":null}},"type":"if","locations":[{"start":{"line":39,"column":16},"end":{"line":41,"column":null}},{"start":{},"end":{}}],"line":39},"1":{"loc":{"start":{"line":58,"column":36},"end":{"line":58,"column":65}},"type":"cond-expr","locations":[{"start":{"line":58,"column":48},"end":{"line":58,"column":57}},{"start":{"line":58,"column":57},"end":{"line":58,"column":65}}],"line":58},"2":{"loc":{"start":{"line":58,"column":69},"end":{"line":58,"column":93}},"type":"cond-expr","locations":[{"start":{"line":58,"column":79},"end":{"line":58,"column":91}},{"start":{"line":58,"column":91},"end":{"line":58,"column":93}}],"line":58},"3":{"loc":{"start":{"line":61,"column":21},"end":{"line":61,"column":null}},"type":"binary-expr","locations":[{"start":{"line":61,"column":21},"end":{"line":61,"column":35}},{"start":{"line":61,"column":35},"end":{"line":61,"column":null}}],"line":61},"4":{"loc":{"start":{"line":66,"column":49},"end":{"line":66,"column":84}},"type":"cond-expr","locations":[{"start":{"line":66,"column":61},"end":{"line":66,"column":73}},{"start":{"line":66,"column":73},"end":{"line":66,"column":84}}],"line":66},"5":{"loc":{"start":{"line":67,"column":31},"end":{"line":67,"column":null}},"type":"cond-expr","locations":[{"start":{"line":67,"column":43},"end":{"line":67,"column":62}},{"start":{"line":67,"column":62},"end":{"line":67,"column":null}}],"line":67},"6":{"loc":{"start":{"line":69,"column":25},"end":{"line":69,"column":null}},"type":"cond-expr","locations":[{"start":{"line":69,"column":37},"end":{"line":69,"column":44}},{"start":{"line":69,"column":44},"end":{"line":69,"column":null}}],"line":69},"7":{"loc":{"start":{"line":73,"column":49},"end":{"line":73,"column":93}},"type":"cond-expr","locations":[{"start":{"line":73,"column":64},"end":{"line":73,"column":79}},{"start":{"line":73,"column":79},"end":{"line":73,"column":93}}],"line":73},"8":{"loc":{"start":{"line":74,"column":31},"end":{"line":74,"column":null}},"type":"cond-expr","locations":[{"start":{"line":74,"column":46},"end":{"line":74,"column":57}},{"start":{"line":74,"column":57},"end":{"line":74,"column":null}}],"line":74},"9":{"loc":{"start":{"line":76,"column":25},"end":{"line":76,"column":null}},"type":"cond-expr","locations":[{"start":{"line":76,"column":40},"end":{"line":76,"column":46}},{"start":{"line":76,"column":46},"end":{"line":76,"column":null}}],"line":76},"10":{"loc":{"start":{"line":82,"column":17},"end":{"line":82,"column":null}},"type":"binary-expr","locations":[{"start":{"line":82,"column":17},"end":{"line":82,"column":36}},{"start":{"line":82,"column":36},"end":{"line":82,"column":null}}],"line":82},"11":{"loc":{"start":{"line":84,"column":13},"end":{"line":85,"column":null}},"type":"binary-expr","locations":[{"start":{"line":84,"column":13},"end":{"line":84,"column":null}},{"start":{"line":85,"column":16},"end":{"line":85,"column":null}}],"line":84}},"s":{"0":12,"1":12,"2":12,"3":2,"4":12,"5":1,"6":12,"7":3,"8":3,"9":3,"10":3,"11":2,"12":0,"13":2,"14":2,"15":1,"16":1,"17":1,"18":12},"f":{"0":12,"1":2,"2":1,"3":3,"4":2,"5":2,"6":1},"b":{"0":[0,2],"1":[4,8],"2":[3,9],"3":[12,0],"4":[4,8],"5":[4,8],"6":[4,8],"7":[2,10],"8":[2,10],"9":[2,10],"10":[12,10],"11":[12,10]},"meta":{"lastBranch":12,"lastFunction":7,"lastStatement":19,"seen":{"f:9:24:9:33":0,"s:10:24:10:Infinity":0,"s:11:30:11:Infinity":1,"s:13:23:15:Infinity":2,"f:13:23:13:29":1,"s:14:8:14:Infinity":3,"s:17:23:19:Infinity":4,"f:17:23:17:29":2,"s:18:8:18:Infinity":5,"s:21:23:55:Infinity":6,"f:21:23:21:24":3,"s:22:8:22:Infinity":7,"s:24:29:24:Infinity":8,"s:25:8:25:Infinity":9,"s:27:8:54:Infinity":10,"f:38:18:38:19":4,"b:39:16:41:Infinity:undefined:undefined:undefined:undefined":0,"s:39:16:41:Infinity":11,"s:40:20:40:Infinity":12,"s:42:16:42:Infinity":13,"f:44:18:44:24":5,"s:47:16:47:Infinity":14,"f:49:19:49:20":6,"s:50:16:50:Infinity":15,"s:52:16:52:Infinity":16,"s:53:16:53:Infinity":17,"s:57:4:87:Infinity":18,"b:58:48:58:57:58:57:58:65":1,"b:58:79:58:91:58:91:58:93":2,"b:61:21:61:35:61:35:61:Infinity":3,"b:66:61:66:73:66:73:66:84":4,"b:67:43:67:62:67:62:67:Infinity":5,"b:69:37:69:44:69:44:69:Infinity":6,"b:73:64:73:79:73:79:73:93":7,"b:74:46:74:57:74:57:74:Infinity":8,"b:76:40:76:46:76:46:76:Infinity":9,"b:82:17:82:36:82:36:82:Infinity":10,"b:84:13:84:Infinity:85:16:85:Infinity":11}}}
 ,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.css": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.css","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
-,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.tsx": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.tsx","statementMap":{"0":{"start":{"line":7,"column":19},"end":{"line":7,"column":null}},"1":{"start":{"line":8,"column":26},"end":{"line":8,"column":null}},"2":{"start":{"line":9,"column":30},"end":{"line":9,"column":null}},"3":{"start":{"line":10,"column":26},"end":{"line":10,"column":null}},"4":{"start":{"line":12,"column":4},"end":{"line":35,"column":null}},"5":{"start":{"line":13,"column":8},"end":{"line":13,"column":null}},"6":{"start":{"line":14,"column":8},"end":{"line":14,"column":null}},"7":{"start":{"line":16,"column":20},"end":{"line":18,"column":null}},"8":{"start":{"line":20,"column":8},"end":{"line":34,"column":null}},"9":{"start":{"line":22,"column":16},"end":{"line":24,"column":null}},"10":{"start":{"line":23,"column":20},"end":{"line":23,"column":null}},"11":{"start":{"line":25,"column":16},"end":{"line":25,"column":null}},"12":{"start":{"line":28,"column":16},"end":{"line":28,"column":null}},"13":{"start":{"line":29,"column":16},"end":{"line":29,"column":null}},"14":{"start":{"line":32,"column":16},"end":{"line":32,"column":null}},"15":{"start":{"line":33,"column":16},"end":{"line":33,"column":null}},"16":{"start":{"line":37,"column":4},"end":{"line":37,"column":null}},"17":{"start":{"line":37,"column":17},"end":{"line":37,"column":null}},"18":{"start":{"line":38,"column":4},"end":{"line":38,"column":null}},"19":{"start":{"line":38,"column":15},"end":{"line":38,"column":null}},"20":{"start":{"line":40,"column":4},"end":{"line":64,"column":null}},"21":{"start":{"line":49,"column":24},"end":{"line":60,"column":null}}},"fnMap":{"0":{"name":"FeedItems","decl":{"start":{"line":6,"column":24},"end":{"line":6,"column":36}},"loc":{"start":{"line":6,"column":36},"end":{"line":66,"column":null}},"line":6},"1":{"name":"(anonymous_1)","decl":{"start":{"line":12,"column":14},"end":{"line":12,"column":20}},"loc":{"start":{"line":12,"column":20},"end":{"line":35,"column":7}},"line":12},"2":{"name":"(anonymous_2)","decl":{"start":{"line":21,"column":18},"end":{"line":21,"column":19}},"loc":{"start":{"line":21,"column":27},"end":{"line":26,"column":13}},"line":21},"3":{"name":"(anonymous_3)","decl":{"start":{"line":27,"column":18},"end":{"line":27,"column":19}},"loc":{"start":{"line":27,"column":28},"end":{"line":30,"column":13}},"line":27},"4":{"name":"(anonymous_4)","decl":{"start":{"line":31,"column":19},"end":{"line":31,"column":20}},"loc":{"start":{"line":31,"column":28},"end":{"line":34,"column":13}},"line":31},"5":{"name":"(anonymous_5)","decl":{"start":{"line":48,"column":31},"end":{"line":48,"column":32}},"loc":{"start":{"line":49,"column":24},"end":{"line":60,"column":null}},"line":49}},"branchMap":{"0":{"loc":{"start":{"line":16,"column":20},"end":{"line":18,"column":null}},"type":"cond-expr","locations":[{"start":{"line":17,"column":14},"end":{"line":17,"column":null}},{"start":{"line":18,"column":14},"end":{"line":18,"column":null}}],"line":16},"1":{"loc":{"start":{"line":22,"column":16},"end":{"line":24,"column":null}},"type":"if","locations":[{"start":{"line":22,"column":16},"end":{"line":24,"column":null}},{"start":{},"end":{}}],"line":22},"2":{"loc":{"start":{"line":37,"column":4},"end":{"line":37,"column":null}},"type":"if","locations":[{"start":{"line":37,"column":4},"end":{"line":37,"column":null}},{"start":{},"end":{}}],"line":37},"3":{"loc":{"start":{"line":38,"column":4},"end":{"line":38,"column":null}},"type":"if","locations":[{"start":{"line":38,"column":4},"end":{"line":38,"column":null}},{"start":{},"end":{}}],"line":38},"4":{"loc":{"start":{"line":44,"column":13},"end":{"line":62,"column":null}},"type":"cond-expr","locations":[{"start":{"line":45,"column":16},"end":{"line":45,"column":null}},{"start":{"line":47,"column":16},"end":{"line":62,"column":null}}],"line":44},"5":{"loc":{"start":{"line":49,"column":62},"end":{"line":49,"column":91}},"type":"cond-expr","locations":[{"start":{"line":49,"column":74},"end":{"line":49,"column":83}},{"start":{"line":49,"column":83},"end":{"line":49,"column":91}}],"line":49},"6":{"loc":{"start":{"line":51,"column":33},"end":{"line":51,"column":null}},"type":"binary-expr","locations":[{"start":{"line":51,"column":33},"end":{"line":51,"column":47}},{"start":{"line":51,"column":47},"end":{"line":51,"column":null}}],"line":51},"7":{"loc":{"start":{"line":55,"column":33},"end":{"line":55,"column":null}},"type":"binary-expr","locations":[{"start":{"line":55,"column":33},"end":{"line":55,"column":52}},{"start":{"line":55,"column":52},"end":{"line":55,"column":null}}],"line":55},"8":{"loc":{"start":{"line":57,"column":29},"end":{"line":58,"column":null}},"type":"binary-expr","locations":[{"start":{"line":57,"column":29},"end":{"line":57,"column":null}},{"start":{"line":58,"column":32},"end":{"line":58,"column":null}}],"line":57}},"s":{"0":3,"1":3,"2":3,"3":3,"4":3,"5":2,"6":2,"7":2,"8":2,"9":1,"10":0,"11":1,"12":1,"13":1,"14":0,"15":0,"16":3,"17":2,"18":1,"19":1,"20":1,"21":2},"f":{"0":3,"1":2,"2":1,"3":1,"4":0,"5":2},"b":{"0":[2,0],"1":[0,1],"2":[2,1],"3":[0,1],"4":[0,1],"5":[1,1],"6":[2,0],"7":[2,0],"8":[2,0]},"meta":{"lastBranch":9,"lastFunction":6,"lastStatement":22,"seen":{"f:6:24:6:36":0,"s:7:19:7:Infinity":0,"s:8:26:8:Infinity":1,"s:9:30:9:Infinity":2,"s:10:26:10:Infinity":3,"s:12:4:35:Infinity":4,"f:12:14:12:20":1,"s:13:8:13:Infinity":5,"s:14:8:14:Infinity":6,"s:16:20:18:Infinity":7,"b:17:14:17:Infinity:18:14:18:Infinity":0,"s:20:8:34:Infinity":8,"f:21:18:21:19":2,"b:22:16:24:Infinity:undefined:undefined:undefined:undefined":1,"s:22:16:24:Infinity":9,"s:23:20:23:Infinity":10,"s:25:16:25:Infinity":11,"f:27:18:27:19":3,"s:28:16:28:Infinity":12,"s:29:16:29:Infinity":13,"f:31:19:31:20":4,"s:32:16:32:Infinity":14,"s:33:16:33:Infinity":15,"b:37:4:37:Infinity:undefined:undefined:undefined:undefined":2,"s:37:4:37:Infinity":16,"s:37:17:37:Infinity":17,"b:38:4:38:Infinity:undefined:undefined:undefined:undefined":3,"s:38:4:38:Infinity":18,"s:38:15:38:Infinity":19,"s:40:4:64:Infinity":20,"b:45:16:45:Infinity:47:16:62:Infinity":4,"f:48:31:48:32":5,"s:49:24:60:Infinity":21,"b:49:74:49:83:49:83:49:91":5,"b:51:33:51:47:51:47:51:Infinity":6,"b:55:33:55:52:55:52:55:Infinity":7,"b:57:29:57:Infinity:58:32:58:Infinity":8}}}
+,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.tsx": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedItems.tsx","statementMap":{"0":{"start":{"line":8,"column":19},"end":{"line":8,"column":null}},"1":{"start":{"line":9,"column":26},"end":{"line":9,"column":null}},"2":{"start":{"line":10,"column":30},"end":{"line":10,"column":null}},"3":{"start":{"line":11,"column":26},"end":{"line":11,"column":null}},"4":{"start":{"line":13,"column":4},"end":{"line":36,"column":null}},"5":{"start":{"line":14,"column":8},"end":{"line":14,"column":null}},"6":{"start":{"line":15,"column":8},"end":{"line":15,"column":null}},"7":{"start":{"line":17,"column":20},"end":{"line":19,"column":null}},"8":{"start":{"line":21,"column":8},"end":{"line":35,"column":null}},"9":{"start":{"line":23,"column":16},"end":{"line":25,"column":null}},"10":{"start":{"line":24,"column":20},"end":{"line":24,"column":null}},"11":{"start":{"line":26,"column":16},"end":{"line":26,"column":null}},"12":{"start":{"line":29,"column":16},"end":{"line":29,"column":null}},"13":{"start":{"line":30,"column":16},"end":{"line":30,"column":null}},"14":{"start":{"line":33,"column":16},"end":{"line":33,"column":null}},"15":{"start":{"line":34,"column":16},"end":{"line":34,"column":null}},"16":{"start":{"line":38,"column":4},"end":{"line":38,"column":null}},"17":{"start":{"line":38,"column":17},"end":{"line":38,"column":null}},"18":{"start":{"line":39,"column":4},"end":{"line":39,"column":null}},"19":{"start":{"line":39,"column":15},"end":{"line":39,"column":null}},"20":{"start":{"line":41,"column":4},"end":{"line":54,"column":null}},"21":{"start":{"line":50,"column":24},"end":{"line":50,"column":null}}},"fnMap":{"0":{"name":"FeedItems","decl":{"start":{"line":7,"column":24},"end":{"line":7,"column":36}},"loc":{"start":{"line":7,"column":36},"end":{"line":56,"column":null}},"line":7},"1":{"name":"(anonymous_1)","decl":{"start":{"line":13,"column":14},"end":{"line":13,"column":20}},"loc":{"start":{"line":13,"column":20},"end":{"line":36,"column":7}},"line":13},"2":{"name":"(anonymous_2)","decl":{"start":{"line":22,"column":18},"end":{"line":22,"column":19}},"loc":{"start":{"line":22,"column":27},"end":{"line":27,"column":13}},"line":22},"3":{"name":"(anonymous_3)","decl":{"start":{"line":28,"column":18},"end":{"line":28,"column":19}},"loc":{"start":{"line":28,"column":28},"end":{"line":31,"column":13}},"line":28},"4":{"name":"(anonymous_4)","decl":{"start":{"line":32,"column":19},"end":{"line":32,"column":20}},"loc":{"start":{"line":32,"column":28},"end":{"line":35,"column":13}},"line":32},"5":{"name":"(anonymous_5)","decl":{"start":{"line":49,"column":31},"end":{"line":49,"column":32}},"loc":{"start":{"line":50,"column":24},"end":{"line":50,"column":null}},"line":50}},"branchMap":{"0":{"loc":{"start":{"line":17,"column":20},"end":{"line":19,"column":null}},"type":"cond-expr","locations":[{"start":{"line":18,"column":14},"end":{"line":18,"column":null}},{"start":{"line":19,"column":14},"end":{"line":19,"column":null}}],"line":17},"1":{"loc":{"start":{"line":23,"column":16},"end":{"line":25,"column":null}},"type":"if","locations":[{"start":{"line":23,"column":16},"end":{"line":25,"column":null}},{"start":{},"end":{}}],"line":23},"2":{"loc":{"start":{"line":38,"column":4},"end":{"line":38,"column":null}},"type":"if","locations":[{"start":{"line":38,"column":4},"end":{"line":38,"column":null}},{"start":{},"end":{}}],"line":38},"3":{"loc":{"start":{"line":39,"column":4},"end":{"line":39,"column":null}},"type":"if","locations":[{"start":{"line":39,"column":4},"end":{"line":39,"column":null}},{"start":{},"end":{}}],"line":39},"4":{"loc":{"start":{"line":45,"column":13},"end":{"line":52,"column":null}},"type":"cond-expr","locations":[{"start":{"line":46,"column":16},"end":{"line":46,"column":null}},{"start":{"line":48,"column":16},"end":{"line":52,"column":null}}],"line":45}},"s":{"0":3,"1":3,"2":3,"3":3,"4":3,"5":2,"6":2,"7":2,"8":2,"9":1,"10":0,"11":1,"12":1,"13":1,"14":0,"15":0,"16":3,"17":2,"18":1,"19":1,"20":1,"21":2},"f":{"0":3,"1":2,"2":1,"3":1,"4":0,"5":2},"b":{"0":[2,0],"1":[0,1],"2":[2,1],"3":[0,1],"4":[0,1]},"meta":{"lastBranch":5,"lastFunction":6,"lastStatement":22,"seen":{"f:7:24:7:36":0,"s:8:19:8:Infinity":0,"s:9:26:9:Infinity":1,"s:10:30:10:Infinity":2,"s:11:26:11:Infinity":3,"s:13:4:36:Infinity":4,"f:13:14:13:20":1,"s:14:8:14:Infinity":5,"s:15:8:15:Infinity":6,"s:17:20:19:Infinity":7,"b:18:14:18:Infinity:19:14:19:Infinity":0,"s:21:8:35:Infinity":8,"f:22:18:22:19":2,"b:23:16:25:Infinity:undefined:undefined:undefined:undefined":1,"s:23:16:25:Infinity":9,"s:24:20:24:Infinity":10,"s:26:16:26:Infinity":11,"f:28:18:28:19":3,"s:29:16:29:Infinity":12,"s:30:16:30:Infinity":13,"f:32:19:32:20":4,"s:33:16:33:Infinity":14,"s:34:16:34:Infinity":15,"b:38:4:38:Infinity:undefined:undefined:undefined:undefined":2,"s:38:4:38:Infinity":16,"s:38:17:38:Infinity":17,"b:39:4:39:Infinity:undefined:undefined:undefined:undefined":3,"s:39:4:39:Infinity":18,"s:39:15:39:Infinity":19,"s:41:4:54:Infinity":20,"b:46:16:46:Infinity:48:16:52:Infinity":4,"f:49:31:49:32":5,"s:50:24:50:Infinity":21}}}
 ,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedList.css": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedList.css","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
 ,"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedList.tsx": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/FeedList.tsx","statementMap":{"0":{"start":{"line":7,"column":26},"end":{"line":7,"column":null}},"1":{"start":{"line":8,"column":30},"end":{"line":8,"column":null}},"2":{"start":{"line":9,"column":26},"end":{"line":9,"column":null}},"3":{"start":{"line":11,"column":4},"end":{"line":27,"column":null}},"4":{"start":{"line":12,"column":8},"end":{"line":26,"column":null}},"5":{"start":{"line":14,"column":16},"end":{"line":16,"column":null}},"6":{"start":{"line":15,"column":20},"end":{"line":15,"column":null}},"7":{"start":{"line":17,"column":16},"end":{"line":17,"column":null}},"8":{"start":{"line":20,"column":16},"end":{"line":20,"column":null}},"9":{"start":{"line":21,"column":16},"end":{"line":21,"column":null}},"10":{"start":{"line":24,"column":16},"end":{"line":24,"column":null}},"11":{"start":{"line":25,"column":16},"end":{"line":25,"column":null}},"12":{"start":{"line":29,"column":4},"end":{"line":29,"column":null}},"13":{"start":{"line":29,"column":17},"end":{"line":29,"column":null}},"14":{"start":{"line":30,"column":4},"end":{"line":30,"column":null}},"15":{"start":{"line":30,"column":15},"end":{"line":30,"column":null}},"16":{"start":{"line":32,"column":4},"end":{"line":49,"column":null}},"17":{"start":{"line":40,"column":24},"end":{"line":45,"column":null}}},"fnMap":{"0":{"name":"FeedList","decl":{"start":{"line":6,"column":24},"end":{"line":6,"column":35}},"loc":{"start":{"line":6,"column":35},"end":{"line":51,"column":null}},"line":6},"1":{"name":"(anonymous_1)","decl":{"start":{"line":11,"column":14},"end":{"line":11,"column":20}},"loc":{"start":{"line":11,"column":20},"end":{"line":27,"column":7}},"line":11},"2":{"name":"(anonymous_2)","decl":{"start":{"line":13,"column":18},"end":{"line":13,"column":19}},"loc":{"start":{"line":13,"column":27},"end":{"line":18,"column":13}},"line":13},"3":{"name":"(anonymous_3)","decl":{"start":{"line":19,"column":18},"end":{"line":19,"column":19}},"loc":{"start":{"line":19,"column":28},"end":{"line":22,"column":13}},"line":19},"4":{"name":"(anonymous_4)","decl":{"start":{"line":23,"column":19},"end":{"line":23,"column":20}},"loc":{"start":{"line":23,"column":28},"end":{"line":26,"column":13}},"line":23},"5":{"name":"(anonymous_5)","decl":{"start":{"line":39,"column":31},"end":{"line":39,"column":32}},"loc":{"start":{"line":40,"column":24},"end":{"line":45,"column":null}},"line":40}},"branchMap":{"0":{"loc":{"start":{"line":14,"column":16},"end":{"line":16,"column":null}},"type":"if","locations":[{"start":{"line":14,"column":16},"end":{"line":16,"column":null}},{"start":{},"end":{}}],"line":14},"1":{"loc":{"start":{"line":29,"column":4},"end":{"line":29,"column":null}},"type":"if","locations":[{"start":{"line":29,"column":4},"end":{"line":29,"column":null}},{"start":{},"end":{}}],"line":29},"2":{"loc":{"start":{"line":30,"column":4},"end":{"line":30,"column":null}},"type":"if","locations":[{"start":{"line":30,"column":4},"end":{"line":30,"column":null}},{"start":{},"end":{}}],"line":30},"3":{"loc":{"start":{"line":35,"column":13},"end":{"line":47,"column":null}},"type":"cond-expr","locations":[{"start":{"line":36,"column":16},"end":{"line":36,"column":null}},{"start":{"line":38,"column":16},"end":{"line":47,"column":null}}],"line":35},"4":{"loc":{"start":{"line":42,"column":33},"end":{"line":42,"column":null}},"type":"binary-expr","locations":[{"start":{"line":42,"column":33},"end":{"line":42,"column":47}},{"start":{"line":42,"column":47},"end":{"line":42,"column":null}}],"line":42},"5":{"loc":{"start":{"line":44,"column":29},"end":{"line":44,"column":null}},"type":"binary-expr","locations":[{"start":{"line":44,"column":29},"end":{"line":44,"column":46}},{"start":{"line":44,"column":46},"end":{"line":44,"column":null}}],"line":44}},"s":{"0":8,"1":8,"2":8,"3":8,"4":5,"5":3,"6":0,"7":3,"8":3,"9":3,"10":1,"11":1,"12":8,"13":5,"14":3,"15":3,"16":2,"17":2},"f":{"0":8,"1":5,"2":3,"3":3,"4":1,"5":2},"b":{"0":[0,3],"1":[5,3],"2":[1,2],"3":[1,1],"4":[2,0],"5":[2,2]},"meta":{"lastBranch":6,"lastFunction":6,"lastStatement":18,"seen":{"f:6:24:6:35":0,"s:7:26:7:Infinity":0,"s:8:30:8:Infinity":1,"s:9:26:9:Infinity":2,"s:11:4:27:Infinity":3,"f:11:14:11:20":1,"s:12:8:26:Infinity":4,"f:13:18:13:19":2,"b:14:16:16:Infinity:undefined:undefined:undefined:undefined":0,"s:14:16:16:Infinity":5,"s:15:20:15:Infinity":6,"s:17:16:17:Infinity":7,"f:19:18:19:19":3,"s:20:16:20:Infinity":8,"s:21:16:21:Infinity":9,"f:23:19:23:20":4,"s:24:16:24:Infinity":10,"s:25:16:25:Infinity":11,"b:29:4:29:Infinity:undefined:undefined:undefined:undefined":1,"s:29:4:29:Infinity":12,"s:29:17:29:Infinity":13,"b:30:4:30:Infinity:undefined:undefined:undefined:undefined":2,"s:30:4:30:Infinity":14,"s:30:15:30:Infinity":15,"s:32:4:49:Infinity":16,"b:36:16:36:Infinity:38:16:47:Infinity":3,"f:39:31:39:32":5,"s:40:24:45:Infinity":17,"b:42:33:42:47:42:47:42:Infinity":4,"b:44:29:44:46:44:46:44:Infinity":5}}}
 ,"/Users/adam/workspace/vibecode/neko/frontend/src/components/Login.css": {"path":"/Users/adam/workspace/vibecode/neko/frontend/src/components/Login.css","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"meta":{"lastBranch":0,"lastFunction":0,"lastStatement":0,"seen":{}}}
diff --git a/frontend/coverage/index.html b/frontend/coverage/index.html
index 8011000..b2f47b5 100644
--- a/frontend/coverage/index.html
+++ b/frontend/coverage/index.html
@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">90.27% </span>
+                <span class="strong">91.2% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>65/72</span>
+                <span class='fraction'>83/91</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">81.03% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>30/42</span>
+                <span class='fraction'>47/58</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">90.47% </span>
+                <span class="strong">92.85% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>19/21</span>
+                <span class='fraction'>26/28</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">89.7% </span>
+                <span class="strong">90.8% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>61/68</span>
+                <span class='fraction'>79/87</span>
             </div>
         
             
@@ -95,17 +95,17 @@
 
 <tr>
 	<td class="file high" data-value="src/components"><a href="src/components/index.html">src/components</a></td>
-	<td data-value="92.98" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 92%"></div><div class="cover-empty" style="width: 8%"></div></div>
+	<td data-value="93.42" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 93%"></div><div class="cover-empty" style="width: 7%"></div></div>
 	</td>
-	<td data-value="92.98" class="pct high">92.98%</td>
-	<td data-value="57" class="abs high">53/57</td>
-	<td data-value="72.22" class="pct medium">72.22%</td>
-	<td data-value="36" class="abs medium">26/36</td>
-	<td data-value="93.33" class="pct high">93.33%</td>
-	<td data-value="15" class="abs high">14/15</td>
-	<td data-value="92.45" class="pct high">92.45%</td>
-	<td data-value="53" class="abs high">49/53</td>
+	<td data-value="93.42" class="pct high">93.42%</td>
+	<td data-value="76" class="abs high">71/76</td>
+	<td data-value="82.69" class="pct high">82.69%</td>
+	<td data-value="52" class="abs high">43/52</td>
+	<td data-value="95.45" class="pct high">95.45%</td>
+	<td data-value="22" class="abs high">21/22</td>
+	<td data-value="93.05" class="pct high">93.05%</td>
+	<td data-value="72" class="abs high">67/72</td>
 	</tr>
 
 </tbody>
@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/App.css.html b/frontend/coverage/src/App.css.html
index 21cb0dc..6ef3c1f 100644
--- a/frontend/coverage/src/App.css.html
+++ b/frontend/coverage/src/App.css.html
@@ -247,7 +247,7 @@ body {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/App.tsx.html b/frontend/coverage/src/App.tsx.html
index a233a8d..980313b 100644
--- a/frontend/coverage/src/App.tsx.html
+++ b/frontend/coverage/src/App.tsx.html
@@ -307,7 +307,7 @@ export default App;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/FeedItem.css.html b/frontend/coverage/src/components/FeedItem.css.html
new file mode 100644
index 0000000..420b55b
--- /dev/null
+++ b/frontend/coverage/src/components/FeedItem.css.html
@@ -0,0 +1,325 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for src/components/FeedItem.css</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/components</a> FeedItem.css</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">0% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">0% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">0% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">0% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line low'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a>
+<a name='L13'></a><a href='#L13'>13</a>
+<a name='L14'></a><a href='#L14'>14</a>
+<a name='L15'></a><a href='#L15'>15</a>
+<a name='L16'></a><a href='#L16'>16</a>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</a>
+<a name='L36'></a><a href='#L36'>36</a>
+<a name='L37'></a><a href='#L37'>37</a>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</a>
+<a name='L42'></a><a href='#L42'>42</a>
+<a name='L43'></a><a href='#L43'>43</a>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a>
+<a name='L68'></a><a href='#L68'>68</a>
+<a name='L69'></a><a href='#L69'>69</a>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">.feed-item {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 1rem 0;
+    list-style: none;
+    /* Ensure no bullets if used in ul */
+}
+&nbsp;
+.feed-item.read .item-title {
+    color: #888;
+    font-weight: normal;
+}
+&nbsp;
+.feed-item.unread .item-title {
+    font-weight: bold;
+}
+&nbsp;
+.item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+&nbsp;
+.item-title {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #333;
+    display: block;
+    margin-bottom: 0.5rem;
+    flex: 1;
+    /* Take up remaining space */
+}
+&nbsp;
+.item-title:hover {
+    text-decoration: underline;
+    color: #007bff;
+}
+&nbsp;
+.item-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: 1rem;
+}
+&nbsp;
+.action-btn {
+    background: none;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 2px 6px;
+    font-size: 1rem;
+    line-height: 1;
+}
+&nbsp;
+.action-btn:hover {
+    background-color: #f8f9fa;
+    border-color: #ccc;
+}
+&nbsp;
+.action-btn.is-starred {
+    color: gold;
+    border-color: gold;
+}
+&nbsp;
+.item-meta {
+    font-size: 0.85rem;
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+&nbsp;
+.item-description {
+    color: #444;
+    line-height: 1.5;
+    font-size: 0.95rem;
+}
+&nbsp;
+.item-description img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1rem 0;
+}</pre></td></tr></table></pre>
+
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2026-02-13T14:57:42.722Z
+            </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>
+    
+\ No newline at end of file
diff --git a/frontend/coverage/src/components/FeedItem.tsx.html b/frontend/coverage/src/components/FeedItem.tsx.html
new file mode 100644
index 0000000..418ab70
--- /dev/null
+++ b/frontend/coverage/src/components/FeedItem.tsx.html
@@ -0,0 +1,352 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for src/components/FeedItem.tsx</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/components</a> FeedItem.tsx</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">94.73% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>18/19</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">91.66% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>22/24</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>7/7</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">94.73% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>18/19</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a>
+<a name='L13'></a><a href='#L13'>13</a>
+<a name='L14'></a><a href='#L14'>14</a>
+<a name='L15'></a><a href='#L15'>15</a>
+<a name='L16'></a><a href='#L16'>16</a>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</a>
+<a name='L36'></a><a href='#L36'>36</a>
+<a name='L37'></a><a href='#L37'>37</a>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</a>
+<a name='L42'></a><a href='#L42'>42</a>
+<a name='L43'></a><a href='#L43'>43</a>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a>
+<a name='L68'></a><a href='#L68'>68</a>
+<a name='L69'></a><a href='#L69'>69</a>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useState } from 'react';
+import type { Item } from '../types';
+import './FeedItem.css';
+&nbsp;
+interface FeedItemProps {
+    item: Item;
+}
+&nbsp;
+export default function FeedItem({ item: initialItem }: FeedItemProps) {
+    const [item, setItem] = useState(initialItem);
+    const [loading, setLoading] = useState(false);
+&nbsp;
+    const toggleRead = () =&gt; {
+        updateItem({ ...item, read: !item.read });
+    };
+&nbsp;
+    const toggleStar = () =&gt; {
+        updateItem({ ...item, starred: !item.starred });
+    };
+&nbsp;
+    const updateItem = (newItem: Item) =&gt; {
+        setLoading(true);
+        // Optimistic update
+        const previousItem = item;
+        setItem(newItem);
+&nbsp;
+        fetch(`/api/item/${newItem._id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                _id: newItem._id,
+                read: newItem.read,
+                starred: newItem.starred,
+            }),
+        })
+            .then((res) =&gt; {
+                <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) {
+<span class="cstat-no" title="statement not covered" >                    throw new Error('Failed to update item');</span>
+                }
+                return res.json();
+            })
+            .then(() =&gt; {
+                // Confirm with server response if needed, but for now we trust the optimistic update
+                // or we could setItem(updated) if the server returns the full object
+                setLoading(false);
+            })
+            .catch((err) =&gt; {
+                console.error('Error updating item:', err);
+                // Revert on error
+                setItem(previousItem);
+                setLoading(false);
+            });
+    };
+&nbsp;
+    return (
+        &lt;li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}&gt;
+            &lt;div className="item-header"&gt;
+                &lt;a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title"&gt;
+                    {item.title || <span class="branch-1 cbranch-no" title="branch not covered" >'(No Title)'}</span>
+                &lt;/a&gt;
+                &lt;div className="item-actions"&gt;
+                    &lt;button
+                        onClick={toggleRead}
+                        className={`action-btn ${item.read ? 'is-read' : 'is-unread'}`}
+                        title={item.read ? "Mark as unread" : "Mark as read"}
+                    &gt;
+                        {item.read ? '📖' : 'uo'}
+                    &lt;/button&gt;
+                    &lt;button
+                        onClick={toggleStar}
+                        className={`action-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
+                        title={item.starred ? "Unstar" : "Star"}
+                    &gt;
+                        {item.starred ? '★' : '☆'}
+                    &lt;/button&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div className="item-meta"&gt;
+                &lt;span className="item-date"&gt;{new Date(item.publish_date).toLocaleDateString()}&lt;/span&gt;
+                {item.feed_title &amp;&amp; &lt;span className="item-feed"&gt; - {item.feed_title}&lt;/span&gt;}
+            &lt;/div&gt;
+            {item.description &amp;&amp; (
+                &lt;div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} /&gt;
+            )}
+        &lt;/li&gt;
+    );
+}
+&nbsp;</pre></td></tr></table></pre>
+
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2026-02-13T14:57:42.722Z
+            </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>
+    
+\ No newline at end of file
diff --git a/frontend/coverage/src/components/FeedItems.css.html b/frontend/coverage/src/components/FeedItems.css.html
index 3951ead..2140fe0 100644
--- a/frontend/coverage/src/components/FeedItems.css.html
+++ b/frontend/coverage/src/components/FeedItems.css.html
@@ -76,99 +76,7 @@
 <a name='L11'></a><a href='#L11'>11</a>
 <a name='L12'></a><a href='#L12'>12</a>
 <a name='L13'></a><a href='#L13'>13</a>
-<a name='L14'></a><a href='#L14'>14</a>
-<a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a>
-<a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a>
-<a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
-<a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a>
-<a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a>
-<a name='L26'></a><a href='#L26'>26</a>
-<a name='L27'></a><a href='#L27'>27</a>
-<a name='L28'></a><a href='#L28'>28</a>
-<a name='L29'></a><a href='#L29'>29</a>
-<a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a>
-<a name='L32'></a><a href='#L32'>32</a>
-<a name='L33'></a><a href='#L33'>33</a>
-<a name='L34'></a><a href='#L34'>34</a>
-<a name='L35'></a><a href='#L35'>35</a>
-<a name='L36'></a><a href='#L36'>36</a>
-<a name='L37'></a><a href='#L37'>37</a>
-<a name='L38'></a><a href='#L38'>38</a>
-<a name='L39'></a><a href='#L39'>39</a>
-<a name='L40'></a><a href='#L40'>40</a>
-<a name='L41'></a><a href='#L41'>41</a>
-<a name='L42'></a><a href='#L42'>42</a>
-<a name='L43'></a><a href='#L43'>43</a>
-<a name='L44'></a><a href='#L44'>44</a>
-<a name='L45'></a><a href='#L45'>45</a>
-<a name='L46'></a><a href='#L46'>46</a>
-<a name='L47'></a><a href='#L47'>47</a>
-<a name='L48'></a><a href='#L48'>48</a>
-<a name='L49'></a><a href='#L49'>49</a>
-<a name='L50'></a><a href='#L50'>50</a>
-<a name='L51'></a><a href='#L51'>51</a>
-<a name='L52'></a><a href='#L52'>52</a>
-<a name='L53'></a><a href='#L53'>53</a>
-<a name='L54'></a><a href='#L54'>54</a>
-<a name='L55'></a><a href='#L55'>55</a>
-<a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a>
-<a name='L58'></a><a href='#L58'>58</a>
-<a name='L59'></a><a href='#L59'>59</a>
-<a name='L60'></a><a href='#L60'>60</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L14'></a><a href='#L14'>14</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -194,52 +102,6 @@
 .item-list {
     list-style: none;
     padding: 0;
-}
-&nbsp;
-.item {
-    border-bottom: 1px solid #f0f0f0;
-    padding: 1rem 0;
-}
-&nbsp;
-.item.read .item-title {
-    color: #888;
-    font-weight: normal;
-}
-&nbsp;
-.item.unread .item-title {
-    font-weight: bold;
-}
-&nbsp;
-.item-title {
-    font-size: 1.2rem;
-    text-decoration: none;
-    color: #333;
-    display: block;
-    margin-bottom: 0.5rem;
-}
-&nbsp;
-.item-title:hover {
-    text-decoration: underline;
-    color: #007bff;
-}
-&nbsp;
-.item-meta {
-    font-size: 0.85rem;
-    color: #666;
-    margin-bottom: 0.5rem;
-}
-&nbsp;
-.item-description {
-    color: #444;
-    line-height: 1.5;
-    font-size: 0.95rem;
-}
-&nbsp;
-.item-description img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 1rem 0;
 }</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -247,7 +109,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/FeedItems.tsx.html b/frontend/coverage/src/components/FeedItems.tsx.html
index 85c9705..ed7bf57 100644
--- a/frontend/coverage/src/components/FeedItems.tsx.html
+++ b/frontend/coverage/src/components/FeedItems.tsx.html
@@ -30,9 +30,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">61.11% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>11/18</span>
+                <span class='fraction'>6/10</span>
             </div>
         
             
@@ -119,17 +119,8 @@
 <a name='L54'></a><a href='#L54'>54</a>
 <a name='L55'></a><a href='#L55'>55</a>
 <a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a>
-<a name='L58'></a><a href='#L58'>58</a>
-<a name='L59'></a><a href='#L59'>59</a>
-<a name='L60'></a><a href='#L60'>60</a>
-<a name='L61'></a><a href='#L61'>61</a>
-<a name='L62'></a><a href='#L62'>62</a>
-<a name='L63'></a><a href='#L63'>63</a>
-<a name='L64'></a><a href='#L64'>64</a>
-<a name='L65'></a><a href='#L65'>65</a>
-<a name='L66'></a><a href='#L66'>66</a>
-<a name='L67'></a><a href='#L67'>67</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L57'></a><a href='#L57'>57</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -184,20 +175,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import type { Item } from '../types';
+import FeedItem from './FeedItem';
 import './FeedItems.css';
 &nbsp;
 export default function FeedItems() {
@@ -243,18 +224,7 @@ export default function FeedItems() {
             ) : (
                 &lt;ul className="item-list"&gt;
                     {items.map((item) =&gt; (
-                        &lt;li key={item._id} className={`item ${item.read ? 'read' : 'unread'}`}&gt;
-                            &lt;a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title"&gt;
-                                {item.title || <span class="branch-1 cbranch-no" title="branch not covered" >'(No Title)'}</span>
-                            &lt;/a&gt;
-                            &lt;div className="item-meta"&gt;
-                                &lt;span className="item-date"&gt;{new Date(item.publish_date).toLocaleDateString()}&lt;/span&gt;
-                                {item.feed_title &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >&lt;span className="item-feed"&gt; - {item.feed_title}&lt;/span&gt;}</span>
-                            &lt;/div&gt;
-                            {item.description &amp;&amp; (
-<span class="branch-1 cbranch-no" title="branch not covered" >                                &lt;div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} /&gt;</span>
-                            )}
-                        &lt;/li&gt;
+                        &lt;FeedItem key={item._id} item={item} /&gt;
                     ))}
                 &lt;/ul&gt;
             )}
@@ -268,7 +238,7 @@ export default function FeedItems() {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/FeedList.css.html b/frontend/coverage/src/components/FeedList.css.html
index f86a2d4..baacb65 100644
--- a/frontend/coverage/src/components/FeedList.css.html
+++ b/frontend/coverage/src/components/FeedList.css.html
@@ -211,7 +211,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/FeedList.tsx.html b/frontend/coverage/src/components/FeedList.tsx.html
index e220912..3eb8c95 100644
--- a/frontend/coverage/src/components/FeedList.tsx.html
+++ b/frontend/coverage/src/components/FeedList.tsx.html
@@ -223,7 +223,7 @@ export default function FeedList() {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/Login.css.html b/frontend/coverage/src/components/Login.css.html
index 5ef3e6c..2dab905 100644
--- a/frontend/coverage/src/components/Login.css.html
+++ b/frontend/coverage/src/components/Login.css.html
@@ -259,7 +259,7 @@ button[type="submit"]:hover {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/Login.tsx.html b/frontend/coverage/src/components/Login.tsx.html
index e58efff..7fc019c 100644
--- a/frontend/coverage/src/components/Login.tsx.html
+++ b/frontend/coverage/src/components/Login.tsx.html
@@ -232,7 +232,7 @@ export default function Login() {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/components/index.html b/frontend/coverage/src/components/index.html
index 94dbb66..f42c6e2 100644
--- a/frontend/coverage/src/components/index.html
+++ b/frontend/coverage/src/components/index.html
@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.98% </span>
+                <span class="strong">93.42% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>53/57</span>
+                <span class='fraction'>71/76</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.22% </span>
+                <span class="strong">82.69% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>26/36</span>
+                <span class='fraction'>43/52</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.33% </span>
+                <span class="strong">95.45% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>14/15</span>
+                <span class='fraction'>21/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.45% </span>
+                <span class="strong">93.05% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>49/53</span>
+                <span class='fraction'>67/72</span>
             </div>
         
             
@@ -79,6 +79,36 @@
 </tr>
 </thead>
 <tbody><tr>
+	<td class="file empty" data-value="FeedItem.css"><a href="FeedItem.css.html">FeedItem.css</a></td>
+	<td data-value="0" class="pic empty">
+	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
+	</td>
+	<td data-value="0" class="pct empty">0%</td>
+	<td data-value="0" class="abs empty">0/0</td>
+	<td data-value="0" class="pct empty">0%</td>
+	<td data-value="0" class="abs empty">0/0</td>
+	<td data-value="0" class="pct empty">0%</td>
+	<td data-value="0" class="abs empty">0/0</td>
+	<td data-value="0" class="pct empty">0%</td>
+	<td data-value="0" class="abs empty">0/0</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="FeedItem.tsx"><a href="FeedItem.tsx.html">FeedItem.tsx</a></td>
+	<td data-value="94.73" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 94%"></div><div class="cover-empty" style="width: 6%"></div></div>
+	</td>
+	<td data-value="94.73" class="pct high">94.73%</td>
+	<td data-value="19" class="abs high">18/19</td>
+	<td data-value="91.66" class="pct high">91.66%</td>
+	<td data-value="24" class="abs high">22/24</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="94.73" class="pct high">94.73%</td>
+	<td data-value="19" class="abs high">18/19</td>
+	</tr>
+
+<tr>
 	<td class="file empty" data-value="FeedItems.css"><a href="FeedItems.css.html">FeedItems.css</a></td>
 	<td data-value="0" class="pic empty">
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
@@ -100,8 +130,8 @@
 	</td>
 	<td data-value="86.36" class="pct high">86.36%</td>
 	<td data-value="22" class="abs high">19/22</td>
-	<td data-value="61.11" class="pct medium">61.11%</td>
-	<td data-value="18" class="abs medium">11/18</td>
+	<td data-value="60" class="pct medium">60%</td>
+	<td data-value="10" class="abs medium">6/10</td>
 	<td data-value="83.33" class="pct high">83.33%</td>
 	<td data-value="6" class="abs high">5/6</td>
 	<td data-value="85" class="pct high">85%</td>
@@ -176,7 +206,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/frontend/coverage/src/index.html b/frontend/coverage/src/index.html
index 01547dd..cd50f96 100644
--- a/frontend/coverage/src/index.html
+++ b/frontend/coverage/src/index.html
@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T06:02:51.320Z
+                at 2026-02-13T14:57:42.722Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css
new file mode 100644
index 0000000..916ee42
--- /dev/null
+++ b/frontend/src/components/FeedItem.css
@@ -0,0 +1,81 @@
+.feed-item {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 1rem 0;
+    list-style: none;
+    /* Ensure no bullets if used in ul */
+}
+
+.feed-item.read .item-title {
+    color: #888;
+    font-weight: normal;
+}
+
+.feed-item.unread .item-title {
+    font-weight: bold;
+}
+
+.item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.item-title {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #333;
+    display: block;
+    margin-bottom: 0.5rem;
+    flex: 1;
+    /* Take up remaining space */
+}
+
+.item-title:hover {
+    text-decoration: underline;
+    color: #007bff;
+}
+
+.item-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: 1rem;
+}
+
+.action-btn {
+    background: none;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 2px 6px;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.action-btn:hover {
+    background-color: #f8f9fa;
+    border-color: #ccc;
+}
+
+.action-btn.is-starred {
+    color: gold;
+    border-color: gold;
+}
+
+.item-meta {
+    font-size: 0.85rem;
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.item-description {
+    color: #444;
+    line-height: 1.5;
+    font-size: 0.95rem;
+}
+
+.item-description img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1rem 0;
+}
+\ No newline at end of file
diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx
new file mode 100644
index 0000000..d46afaf
--- /dev/null
+++ b/frontend/src/components/FeedItem.test.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedItem from './FeedItem';
+import type { Item } from '../types';
+
+const mockItem: Item = {
+    _id: 1,
+    feed_id: 101,
+    title: 'Test Item',
+    url: 'http://example.com/item',
+    description: '<p>Description</p>',
+    publish_date: '2023-01-01',
+    read: false,
+    starred: false,
+    feed_title: 'Test Feed'
+};
+
+describe('FeedItem Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders item details', () => {
+        render(<FeedItem item={mockItem} />);
+        expect(screen.getByText('Test Item')).toBeInTheDocument();
+        expect(screen.getByText(/Test Feed/)).toBeInTheDocument();
+        // Check for relative time or date formatting? For now just check it renders
+    });
+
+    it('toggles read status', async () => {
+        (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+
+        render(<FeedItem item={mockItem} />);
+
+        const readBtn = screen.getByTitle('Mark as read');
+        fireEvent.click(readBtn);
+
+        // Optimistic update
+        expect(await screen.findByTitle('Mark as unread')).toBeInTheDocument();
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
+            method: 'PUT',
+            body: JSON.stringify({
+                _id: 1,
+                read: true,
+                starred: false
+            })
+        }));
+    });
+
+    it('toggles star status', async () => {
+        (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+
+        render(<FeedItem item={mockItem} />);
+
+        const starBtn = screen.getByTitle('Star');
+        fireEvent.click(starBtn);
+
+        // Optimistic update
+        expect(await screen.findByTitle('Unstar')).toBeInTheDocument();
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
+            method: 'PUT',
+            body: JSON.stringify({
+                _id: 1,
+                read: false,
+                starred: true
+            })
+        }));
+    });
+
+    it('reverts optimistic update on failure', async () => {
+        (global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+
+        render(<FeedItem item={mockItem} />);
+
+        const readBtn = screen.getByTitle('Mark as read');
+        fireEvent.click(readBtn);
+
+        // Should revert to unread
+        await waitFor(() => {
+            expect(screen.getByTitle('Mark as read')).toBeInTheDocument();
+        });
+
+        consoleSpy.mockRestore();
+    });
+});
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
new file mode 100644
index 0000000..aa0cea8
--- /dev/null
+++ b/frontend/src/components/FeedItem.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import type { Item } from '../types';
+import './FeedItem.css';
+
+interface FeedItemProps {
+    item: Item;
+}
+
+export default function FeedItem({ item: initialItem }: FeedItemProps) {
+    const [item, setItem] = useState(initialItem);
+    const [loading, setLoading] = useState(false);
+
+    const toggleRead = () => {
+        updateItem({ ...item, read: !item.read });
+    };
+
+    const toggleStar = () => {
+        updateItem({ ...item, starred: !item.starred });
+    };
+
+    const updateItem = (newItem: Item) => {
+        setLoading(true);
+        // Optimistic update
+        const previousItem = item;
+        setItem(newItem);
+
+        fetch(`/api/item/${newItem._id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                _id: newItem._id,
+                read: newItem.read,
+                starred: newItem.starred,
+            }),
+        })
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error('Failed to update item');
+                }
+                return res.json();
+            })
+            .then(() => {
+                // Confirm with server response if needed, but for now we trust the optimistic update
+                // or we could setItem(updated) if the server returns the full object
+                setLoading(false);
+            })
+            .catch((err) => {
+                console.error('Error updating item:', err);
+                // Revert on error
+                setItem(previousItem);
+                setLoading(false);
+            });
+    };
+
+    return (
+        <li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}>
+            <div className="item-header">
+                <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
+                    {item.title || '(No Title)'}
+                </a>
+                <div className="item-actions">
+                    <button
+                        onClick={toggleRead}
+                        className={`action-btn ${item.read ? 'is-read' : 'is-unread'}`}
+                        title={item.read ? "Mark as unread" : "Mark as read"}
+                    >
+                        {item.read ? '📖' : 'uo'}
+                    </button>
+                    <button
+                        onClick={toggleStar}
+                        className={`action-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
+                        title={item.starred ? "Unstar" : "Star"}
+                    >
+                        {item.starred ? '★' : '☆'}
+                    </button>
+                </div>
+            </div>
+            <div className="item-meta">
+                <span className="item-date">{new Date(item.publish_date).toLocaleDateString()}</span>
+                {item.feed_title && <span className="item-feed"> - {item.feed_title}</span>}
+            </div>
+            {item.description && (
+                <div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} />
+            )}
+        </li>
+    );
+}
diff --git a/frontend/src/components/FeedItems.css b/frontend/src/components/FeedItems.css
index a057a40..795156d 100644
--- a/frontend/src/components/FeedItems.css
+++ b/frontend/src/components/FeedItems.css
@@ -11,50 +11,4 @@
 .item-list {
     list-style: none;
     padding: 0;
-}
-
-.item {
-    border-bottom: 1px solid #f0f0f0;
-    padding: 1rem 0;
-}
-
-.item.read .item-title {
-    color: #888;
-    font-weight: normal;
-}
-
-.item.unread .item-title {
-    font-weight: bold;
-}
-
-.item-title {
-    font-size: 1.2rem;
-    text-decoration: none;
-    color: #333;
-    display: block;
-    margin-bottom: 0.5rem;
-}
-
-.item-title:hover {
-    text-decoration: underline;
-    color: #007bff;
-}
-
-.item-meta {
-    font-size: 0.85rem;
-    color: #666;
-    margin-bottom: 0.5rem;
-}
-
-.item-description {
-    color: #444;
-    line-height: 1.5;
-    font-size: 0.95rem;
-}
-
-.item-description img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 1rem 0;
 }
 \ No newline at end of file
diff --git a/frontend/src/components/FeedItems.tsx b/frontend/src/components/FeedItems.tsx
index 048bed7..e6f0a84 100644
--- a/frontend/src/components/FeedItems.tsx
+++ b/frontend/src/components/FeedItems.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import type { Item } from '../types';
+import FeedItem from './FeedItem';
 import './FeedItems.css';
 
 export default function FeedItems() {
@@ -46,18 +47,7 @@ export default function FeedItems() {
             ) : (
                 <ul className="item-list">
                     {items.map((item) => (
-                        <li key={item._id} className={`item ${item.read ? 'read' : 'unread'}`}>
-                            <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
-                                {item.title || '(No Title)'}
-                            </a>
-                            <div className="item-meta">
-                                <span className="item-date">{new Date(item.publish_date).toLocaleDateString()}</span>
-                                {item.feed_title && <span className="item-feed"> - {item.feed_title}</span>}
-                            </div>
-                            {item.description && (
-                                <div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} />
-                            )}
-                        </li>
+                        <FeedItem key={item._id} item={item} />
                     ))}
                 </ul>
             )}
author	Adam Mathes <adam@adammathes.com>	2026-02-13 06:58:30 -0800
committer	Adam Mathes <adam@adammathes.com>	2026-02-13 06:58:30 -0800
commit	bd2508211760edbc1bad1d515587d08fd2ec99c9 (patch)
tree	b2e17d9b7a9c460dd808962394e956f0c400d943
parent	3ba71500bc2d60a00ca81b9439305029670f4d52 (diff)
download	neko-bd2508211760edbc1bad1d515587d08fd2ec99c9.tar.gz neko-bd2508211760edbc1bad1d515587d08fd2ec99c9.tar.bz2 neko-bd2508211760edbc1bad1d515587d08fd2ec99c9.zip