| ... | ... | @@ -4,6 +4,7 @@ import { |
| 4 | 4 | createContext, |
| 5 | 5 | createElement, |
| 6 | 6 | useContext, |
| 7 | useEffect, |
| 7 | 8 | useReducer, |
| 8 | 9 | } from "react"; |
| 9 | 10 | |
| ... | ... | @@ -39,6 +40,8 @@ export interface AppState { |
| 39 | 40 | diffOpen: boolean; |
| 40 | 41 | } |
| 41 | 42 | |
| 43 | const PERSISTED_STATE_KEY = "codething:renderer-state:v1"; |
| 44 | |
| 42 | 45 | const initialState: AppState = { |
| 43 | 46 | projects: [], |
| 44 | 47 | threads: [], |
| ... | ... | @@ -48,6 +51,187 @@ const initialState: AppState = { |
| 48 | 51 | |
| 49 | 52 | // ── Helpers ────────────────────────────────────────────────────────── |
| 50 | 53 | |
| 54 | interface PersistedStateV1 { |
| 55 | projects: Project[]; |
| 56 | threads: Array< |
| 57 | Pick< |
| 58 | Thread, |
| 59 | "id" | "projectId" | "title" | "model" | "messages" | "createdAt" |
| 60 | > |
| 61 | >; |
| 62 | activeThreadId: string | null; |
| 63 | } |
| 64 | |
| 65 | function asObject(value: unknown): Record<string, unknown> | null { |
| 66 | if (!value || typeof value !== "object") return null; |
| 67 | return value as Record<string, unknown>; |
| 68 | } |
| 69 | |
| 70 | function asString(value: unknown): string | null { |
| 71 | return typeof value === "string" ? value : null; |
| 72 | } |
| 73 | |
| 74 | function isBoolean(value: unknown): value is boolean { |
| 75 | return typeof value === "boolean"; |
| 76 | } |
| 77 | |
| 78 | function sanitizeProjects(input: unknown): Project[] { |
| 79 | if (!Array.isArray(input)) return []; |
| 80 | |
| 81 | return input |
| 82 | .map((raw) => { |
| 83 | const project = asObject(raw); |
| 84 | if (!project) return null; |
| 85 | |
| 86 | const id = asString(project.id); |
| 87 | const name = asString(project.name); |
| 88 | const cwd = asString(project.cwd); |
| 89 | const model = asString(project.model); |
| 90 | const expanded = project.expanded; |
| 91 | if (!id || !name || !cwd || !model || !isBoolean(expanded)) return null; |
| 92 | |
| 93 | return { |
| 94 | id, |
| 95 | name, |
| 96 | cwd, |
| 97 | model, |
| 98 | expanded, |
| 99 | } satisfies Project; |
| 100 | }) |
| 101 | .filter((project): project is Project => project !== null); |
| 102 | } |
| 103 | |
| 104 | function sanitizeMessages(input: unknown): Thread["messages"] { |
| 105 | if (!Array.isArray(input)) return []; |
| 106 | |
| 107 | return input |
| 108 | .map((raw) => { |
| 109 | const message = asObject(raw); |
| 110 | if (!message) return null; |
| 111 | |
| 112 | const id = asString(message.id); |
| 113 | const role = message.role; |
| 114 | const text = asString(message.text); |
| 115 | const createdAt = asString(message.createdAt); |
| 116 | const streaming = message.streaming; |
| 117 | if ( |
| 118 | !id || |
| 119 | (role !== "user" && role !== "assistant") || |
| 120 | text === null || |
| 121 | !createdAt || |
| 122 | !isBoolean(streaming) |
| 123 | ) { |
| 124 | return null; |
| 125 | } |
| 126 | |
| 127 | const hydratedMessage: Thread["messages"][number] = { |
| 128 | id, |
| 129 | role, |
| 130 | text, |
| 131 | createdAt, |
| 132 | streaming: false, |
| 133 | }; |
| 134 | return hydratedMessage; |
| 135 | }) |
| 136 | .filter( |
| 137 | (message): message is Thread["messages"][number] => message !== null, |
| 138 | ); |
| 139 | } |
| 140 | |
| 141 | function sanitizeThreads(input: unknown): AppState["threads"] { |
| 142 | if (!Array.isArray(input)) return []; |
| 143 | |
| 144 | return input |
| 145 | .map((raw) => { |
| 146 | const thread = asObject(raw); |
| 147 | if (!thread) return null; |
| 148 | |
| 149 | const id = asString(thread.id); |
| 150 | const projectId = asString(thread.projectId); |
| 151 | const title = asString(thread.title); |
| 152 | const model = asString(thread.model); |
| 153 | const createdAt = asString(thread.createdAt); |
| 154 | if (!id || !projectId || !title || !model || !createdAt) return null; |
| 155 | |
| 156 | const hydratedThread: Thread = { |
| 157 | id, |
| 158 | projectId, |
| 159 | title, |
| 160 | model, |
| 161 | session: null, |
| 162 | messages: sanitizeMessages(thread.messages), |
| 163 | events: [], |
| 164 | error: null, |
| 165 | createdAt, |
| 166 | }; |
| 167 | return hydratedThread; |
| 168 | }) |
| 169 | .filter((thread): thread is Thread => thread !== null); |
| 170 | } |
| 171 | |
| 172 | function readPersistedState(): AppState { |
| 173 | if (typeof window === "undefined") return initialState; |
| 174 | |
| 175 | try { |
| 176 | const raw = window.localStorage.getItem(PERSISTED_STATE_KEY); |
| 177 | if (!raw) return initialState; |
| 178 | |
| 179 | const parsed = asObject(JSON.parse(raw)); |
| 180 | if (!parsed) return initialState; |
| 181 | |
| 182 | const projects = sanitizeProjects(parsed.projects); |
| 183 | const projectIds = new Set(projects.map((project) => project.id)); |
| 184 | const threads = sanitizeThreads(parsed.threads).filter((thread) => |
| 185 | projectIds.has(thread.projectId), |
| 186 | ); |
| 187 | const activeThreadId = asString(parsed.activeThreadId); |
| 188 | const hasActiveThread = Boolean( |
| 189 | activeThreadId && threads.some((thread) => thread.id === activeThreadId), |
| 190 | ); |
| 191 | |
| 192 | return { |
| 193 | projects, |
| 194 | threads, |
| 195 | activeThreadId: hasActiveThread |
| 196 | ? activeThreadId |
| 197 | : threads[0]?.id |
| 198 | ? threads[0].id |
| 199 | : null, |
| 200 | diffOpen: false, |
| 201 | }; |
| 202 | } catch { |
| 203 | return initialState; |
| 204 | } |
| 205 | } |
| 206 | |
| 207 | function toPersistedState(state: AppState): PersistedStateV1 { |
| 208 | return { |
| 209 | projects: state.projects, |
| 210 | threads: state.threads.map((thread) => ({ |
| 211 | id: thread.id, |
| 212 | projectId: thread.projectId, |
| 213 | title: thread.title, |
| 214 | model: thread.model, |
| 215 | messages: thread.messages, |
| 216 | createdAt: thread.createdAt, |
| 217 | })), |
| 218 | activeThreadId: state.activeThreadId, |
| 219 | }; |
| 220 | } |
| 221 | |
| 222 | function persistState(state: AppState): void { |
| 223 | if (typeof window === "undefined") return; |
| 224 | |
| 225 | try { |
| 226 | window.localStorage.setItem( |
| 227 | PERSISTED_STATE_KEY, |
| 228 | JSON.stringify(toPersistedState(state)), |
| 229 | ); |
| 230 | } catch { |
| 231 | // Ignore quota/storage errors to avoid breaking chat UX. |
| 232 | } |
| 233 | } |
| 234 | |
| 51 | 235 | function updateThread( |
| 52 | 236 | threads: Thread[], |
| 53 | 237 | threadId: string, |
| ... | ... | @@ -119,7 +303,6 @@ function reducer(state: AppState, action: Action): AppState { |
| 119 | 303 | threads: updateThread(state.threads, action.threadId, (t) => ({ |
| 120 | 304 | ...t, |
| 121 | 305 | session: action.session, |
| 122 | | messages: [], |
| 123 | 306 | events: [], |
| 124 | 307 | error: null, |
| 125 | 308 | })), |
| ... | ... | @@ -183,7 +366,12 @@ const StoreContext = createContext<{ |
| 183 | 366 | }>({ state: initialState, dispatch: () => {} }); |
| 184 | 367 | |
| 185 | 368 | export function StoreProvider({ children }: { children: ReactNode }) { |
| 186 | | const [state, dispatch] = useReducer(reducer, initialState); |
| 369 | const [state, dispatch] = useReducer(reducer, undefined, readPersistedState); |
| 370 | |
| 371 | useEffect(() => { |
| 372 | persistState(state); |
| 373 | }, [state]); |
| 374 | |
| 187 | 375 | return createElement( |
| 188 | 376 | StoreContext.Provider, |
| 189 | 377 | { value: { state, dispatch } }, |
Theo Browne <me@t3.gg> 2026-02-07 21:36:13-08:00