fix browser

.claude/settings.local.json

@@ -1,71 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(cargo init:*)",
-      "Bash(cargo:*)",
-      "Bash(find:*)",
-      "Bash(mkdir:*)",
-      "Bash(../target/debug/ailog new:*)",
-      "Bash(../target/debug/ailog build)",
-      "Bash(/Users/syui/ai/log/target/debug/ailog build)",
-      "Bash(ls:*)",
-      "Bash(curl:*)",
-      "Bash(pkill:*)",
-      "WebFetch(domain:docs.anthropic.com)",
-      "WebFetch(domain:github.com)",
-      "Bash(rm:*)",
-      "Bash(mv:*)",
-      "Bash(cp:*)",
-      "Bash(timeout:*)",
-      "Bash(grep:*)",
-      "Bash(./target/debug/ailog:*)",
-      "Bash(cat:*)",
-      "Bash(npm install)",
-      "Bash(npm run build:*)",
-      "Bash(chmod:*)",
-      "Bash(./scripts/tunnel.sh:*)",
-      "Bash(PRODUCTION=true cargo run -- build)",
-      "Bash(cloudflared tunnel:*)",
-      "Bash(npm install:*)",
-      "Bash(./scripts/build-oauth-partial.zsh:*)",
-      "Bash(./scripts/quick-oauth-update.zsh:*)",
-      "Bash(../target/debug/ailog serve)",
-      "Bash(./scripts/test-oauth.sh:*)",
-      "Bash(./run.zsh:*)",
-      "Bash(npm run dev:*)",
-      "Bash(./target/release/ailog:*)",
-      "Bash(rg:*)",
-      "Bash(../target/release/ailog build)",
-      "Bash(zsh run.zsh:*)",
-      "Bash(hugo:*)",
-      "WebFetch(domain:docs.bsky.app)",
-      "WebFetch(domain:syui.ai)",
-      "Bash(rustup target list:*)",
-      "Bash(rustup target:*)",
-      "Bash(git add:*)",
-      "Bash(git commit:*)",
-      "Bash(git push:*)",
-      "Bash(git tag:*)",
-      "Bash(../bin/ailog:*)",
-      "Bash(../target/release/ailog oauth build:*)",
-      "Bash(ailog:*)",
-      "WebFetch(domain:plc.directory)",
-      "WebFetch(domain:atproto.com)",
-      "WebFetch(domain:syu.is)",
-      "Bash(sed:*)",
-      "Bash(./scpt/run.zsh:*)",
-      "Bash(RUST_LOG=debug cargo run -- stream status)",
-      "Bash(RUST_LOG=debug cargo run -- stream test-api)",
-      "Bash(/Users/syui/ai/ai/log/target/debug/ailog build)",
-      "Bash(git reset:*)",
-      "Bash(./scripts/sync-versions.sh:*)",
-      "Bash(node:*)",
-      "Bash(shasum:*)",
-      "WebFetch(domain:www.pfrazee.com)",
-      "WebFetch(domain:pfrazee.leaflet.pub)",
-      "Bash(git checkout:*)",
-      "Bash(git clone:*)"
-    ],
-    "deny": []
-  }
-}

.gitignore

@@ -5,6 +5,7 @@
 /repos
 .DS_Store
 .config
+.claude
 node_modules
 package-lock.json 
 claude.md

browser/src/App.css

@@ -117,3 +117,87 @@ h1 {
   font-family: inherit;
   margin: 0;
 }
+
+.error-section {
+  background: #fee;
+  padding: 1rem;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  color: #c33;
+}
+
+.records-list {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.records-list h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.records-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.records-list li {
+  border-bottom: 1px solid #eee;
+}
+
+.records-list li:last-child {
+  border-bottom: none;
+}
+
+.record-link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.2s;
+}
+
+.record-link:hover {
+  background: #f5f5f5;
+}
+
+.record-title {
+  font-size: 1.1rem;
+  color: #0066cc;
+  font-weight: 500;
+}
+
+.record-date {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.back-button {
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.back-button:hover {
+  background: #eee;
+}
+
+.input-section button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}

browser/src/App.tsx

@@ -3,13 +3,13 @@ import { AtUriBrowser, useAtUriBrowser } from './components/AtUriBrowser'
 import './App.css'
 
 function BrowserContent() {
-  const [atUri, setAtUri] = useState('')
-  const { navigate, currentRecord } = useAtUriBrowser()
+  const [handle, setHandle] = useState('')
+  const { records, currentRecord, setCurrentRecord, loading, error, loadHandle } = useAtUriBrowser()
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (atUri) {
-      await navigate(atUri)
+    if (handle) {
+      await loadHandle(handle)
     }
   }
 
@@ -20,21 +20,59 @@ function BrowserContent() {
       <form onSubmit={handleSubmit} className="input-section">
         <input
           type="text"
-          placeholder="at://did:plc:xxx/ai.syui.log.post/rkey"
-          value={atUri}
-          onChange={(e) => setAtUri(e.target.value)}
+          placeholder="handle (e.g., ai.syui.ai)"
+          value={handle}
+          onChange={(e) => setHandle(e.target.value)}
           className="at-uri-input"
         />
-        <button type="submit">Browse</button>
+        <button type="submit" disabled={loading}>
+          {loading ? 'Loading...' : 'Browse'}
+        </button>
       </form>
 
-      {!currentRecord && (
+      {error && (
+        <div className="error-section">
+          <p>Error: {error}</p>
+        </div>
+      )}
+
+      {currentRecord ? (
+        <div className="record-view">
+          <button onClick={() => setCurrentRecord(null)} className="back-button">
+            ← Back to list
+          </button>
+          <h2>{currentRecord.value.title}</h2>
+          <div className="record-meta">
+            <p>URI: {currentRecord.uri}</p>
+            <p>Created: {new Date(currentRecord.value.createdAt).toLocaleString()}</p>
+          </div>
+          <div className="record-content">
+            <pre>{currentRecord.value.content}</pre>
+          </div>
+        </div>
+      ) : records.length > 0 ? (
+        <div className="records-list">
+          <h2>Posts ({records.length})</h2>
+          <ul>
+            {records.map((record) => (
+              <li key={record.uri}>
+                <button onClick={() => setCurrentRecord(record)} className="record-link">
+                  <span className="record-title">{record.value.title}</span>
+                  <span className="record-date">
+                    {new Date(record.value.createdAt).toLocaleDateString()}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : !loading && !error && (
         <div className="info-section">
           <h2>About</h2>
           <p>Browse AT Protocol records directly from the PDS.</p>
           <ul>
-            <li>Enter an AT URI to view its content</li>
-            <li>Example: at://did:plc:xxx/ai.syui.log.post/xxx</li>
+            <li>Enter a handle to view posts</li>
+            <li>Example: ai.syui.ai</li>
             <li>Supports syu.is PDS environment</li>
           </ul>
         </div>

browser/src/components/AtUriBrowser.tsx

@@ -1,11 +1,17 @@
-import { createContext, useContext, ReactNode, useState, useEffect } from 'react'
+import { createContext, useContext, ReactNode, useState } from 'react'
 import { AtProtoClient, RecordResponse } from '../lib/atproto'
 
 interface AtUriBrowserContextType {
   client: AtProtoClient
+  records: RecordResponse[]
+  setRecords: (records: RecordResponse[]) => void
   currentRecord: RecordResponse | null
   setCurrentRecord: (record: RecordResponse | null) => void
-  navigate: (uri: string) => Promise<void>
+  loading: boolean
+  setLoading: (loading: boolean) => void
+  error: string | null
+  setError: (error: string | null) => void
+  loadHandle: (handle: string) => Promise<void>
 }
 
 const AtUriBrowserContext = createContext<AtUriBrowserContextType | null>(null)
@@ -25,46 +31,44 @@ interface AtUriBrowserProps {
 
 export function AtUriBrowser({ children, pdsUrl = 'https://syu.is' }: AtUriBrowserProps) {
   const [client] = useState(() => new AtProtoClient(pdsUrl))
+  const [records, setRecords] = useState<RecordResponse[]>([])
   const [currentRecord, setCurrentRecord] = useState<RecordResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
-  const navigate = async (uri: string) => {
+  const loadHandle = async (handle: string) => {
     try {
-      const parsed = client.parseAtUri(uri)
-      if (!parsed) {
-        throw new Error('Invalid AT URI format')
-      }
-
-      const record = await client.getRecord(parsed.repo, parsed.collection, parsed.rkey)
-      setCurrentRecord(record)
-    } catch (error) {
-      console.error('Failed to navigate:', error)
+      setLoading(true)
+      setError(null)
       setCurrentRecord(null)
+
+      const did = await client.resolveHandle(handle)
+      const records = await client.listRecords(did, 'ai.syui.log.post')
+      setRecords(records)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load records')
+      setRecords([])
+    } finally {
+      setLoading(false)
     }
   }
 
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search)
-    const uri = params.get('uri')
-    if (uri) {
-      navigate(uri)
-    }
-  }, [])
-
   return (
-    <AtUriBrowserContext.Provider value={{ client, currentRecord, setCurrentRecord, navigate }}>
+    <AtUriBrowserContext.Provider
+      value={{
+        client,
+        records,
+        setRecords,
+        currentRecord,
+        setCurrentRecord,
+        loading,
+        setLoading,
+        error,
+        setError,
+        loadHandle
+      }}
+    >
       {children}
-      {currentRecord && (
-        <div className="record-view">
-          <h2>{currentRecord.value.title}</h2>
-          <div className="record-meta">
-            <p>URI: {currentRecord.uri}</p>
-            <p>Created: {new Date(currentRecord.value.createdAt).toLocaleString()}</p>
-          </div>
-          <div className="record-content">
-            <pre>{currentRecord.value.content}</pre>
-          </div>
-        </div>
-      )}
     </AtUriBrowserContext.Provider>
   )
 }