Allow working with files in directories.

README.md

@@ -41,7 +41,7 @@ uv pip install -e lynxkite-core/[dev] -e lynxkite-app/[dev] -e lynxkite-graph-an
 This also builds the frontend, hopefully very quickly. To run it:
 
 ```bash
-cd examples && LYNXKITE_RELOAD=1 lynxkite
+cd examples && lynxkite
 ```
 
 If you also want to make changes to the frontend with hot reloading:

lynxkite-app/src/lynxkite_app/crdt.py

@@ -300,14 +300,14 @@ def sanitize_path(path):
     return os.path.relpath(os.path.normpath(os.path.join("/", path)), "/")
 
 
-@router.websocket("/ws/crdt/{room_name}")
+@router.websocket("/ws/crdt/{room_name:path}")
 async def crdt_websocket(websocket: fastapi.WebSocket, room_name: str):
     room_name = sanitize_path(room_name)
     server = pycrdt_websocket.ASGIServer(ws_websocket_server)
     await server({"path": room_name}, websocket._receive, websocket._send)
 
 
-@router.websocket("/ws/code/crdt/{room_name}")
+@router.websocket("/ws/code/crdt/{room_name:path}")
 async def code_crdt_websocket(websocket: fastapi.WebSocket, room_name: str):
     room_name = sanitize_path(room_name)
     server = pycrdt_websocket.ASGIServer(code_websocket_server)

lynxkite-app/web/src/Code.tsx

@@ -3,7 +3,7 @@
 import Editor, { type Monaco } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { useEffect, useRef } from "react";
-import { Link, useParams } from "react-router";
+import { Link, useLocation } from "react-router";
 import { WebsocketProvider } from "y-websocket";
 import * as Y from "yjs";
 // @ts-ignore
@@ -16,7 +16,7 @@ import favicon from "./assets/favicon.ico";
 import theme from "./code-theme.ts";
 
 export default function Code() {
-  const { path } = useParams();
+  const path = decodeURIComponent(useLocation().pathname).replace(/^\/code\//, "");
   const parentDir = path!.split("/").slice(0, -1).join("/");
   const yDocRef = useRef<any>();
   const wsProviderRef = useRef<any>();

lynxkite-app/web/src/Directory.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 // The directory browser.
-import { Link, useNavigate, useParams } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 import useSWR from "swr";
 import type { DirectoryEntry } from "./apiTypes.ts";
 
@@ -58,7 +58,7 @@ function EntryCreator(props: {
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function () {
-  const { path } = useParams();
+  const path = decodeURIComponent(useLocation().pathname).replace(/^[/]$|^[/]dir$|^[/]dir[/]/, "");
   const encodedPath = encodeURIComponent(path || "");
   const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher, {
     dedupingInterval: 0,

lynxkite-app/web/src/main.tsx

@@ -13,9 +13,9 @@ createRoot(document.getElementById("root")!).render(
       <Routes>
         <Route path="/" element={<Directory />} />
         <Route path="/dir" element={<Directory />} />
-        <Route path="/dir/:path" element={<Directory />} />
-        <Route path="/edit/:path" element={<Workspace />} />
-        <Route path="/code/:path" element={<Code />} />
+        <Route path="/dir/*" element={<Directory />} />
+        <Route path="/edit/*" element={<Workspace />} />
+        <Route path="/code/*" element={<Code />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>,

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -18,7 +18,7 @@ import {
 } from "@xyflow/react";
 import axios from "axios";
 import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
-import { useParams } from "react-router";
+import { useLocation } from "react-router";
 import useSWR, { type Fetcher } from "swr";
 import { WebsocketProvider } from "y-websocket";
 // @ts-ignore
@@ -55,7 +55,7 @@ function LynxKiteFlow() {
   const reactFlow = useReactFlow();
   const [nodes, setNodes] = useState([] as Node[]);
   const [edges, setEdges] = useState([] as Edge[]);
-  const { path } = useParams();
+  const path = decodeURIComponent(useLocation().pathname).replace(/^\/edit\//, "");
   const shortPath = path!
     .split("/")
     .pop()!