From 900420e5d2bea2931a9b943cf38220e5981045c3 Mon Sep 17 00:00:00 2001
From: RooberSmoth <96537304+RooberSmoth@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:58:22 +0900
Subject: [PATCH 01/50] Changed AI enhance reasoning to stick to the chosen
language unless stated so.
---
agent_core/core/prompts/reasoning.py | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/agent_core/core/prompts/reasoning.py b/agent_core/core/prompts/reasoning.py
index a4ee895f..1173f961 100644
--- a/agent_core/core/prompts/reasoning.py
+++ b/agent_core/core/prompts/reasoning.py
@@ -60,6 +60,11 @@
RULE 7 — ONE ACTION FRAME
Do not chain unrelated actions into one prompt. If the user asked for one
thing, keep it as one thing. Do not add "and also..." unless the user said so.
+
+RULE 8 - PRESERVE INITIAL LANGUAGE
+If the user wrote their message in another language, only enhance in the detected
+language. Never stray or use another language other than what the user has written in
+unless the user said so.
@@ -70,6 +75,7 @@
4. simple or complex task? (single-shot vs. multi-step + verify)
5. Any scheduling signal? (one-time vs. recurring)
6. Any pronouns to replace with actual nouns?
+7. What is the intended language?
@@ -81,6 +87,7 @@
- Do NOT exceed 4 sentences
- Do NOT use passive voice — use active imperative verbs
- Do NOT leave platform names implicit when a platform is involved
+- Do NOT start using another language other than the one written in by the user initially unless asked for by the user
From 5e8626ac428de180570080d7ba015f1393051358 Mon Sep 17 00:00:00 2001
From: RooberSmoth <96537304+RooberSmoth@users.noreply.github.com>
Date: Mon, 10 Aug 2026 12:29:13 +0900
Subject: [PATCH 02/50] If the input is empty, stop enhancing and reset to
false state.
---
.../frontend/src/components/Chat/Chat.tsx | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index 99f58432..418c0a06 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -780,11 +780,26 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
// Consume enhanced prompt from context when WS response arrives
useEffect(() => {
if (enhancedPrompt === null) return
+ if (input.trim() === ''){
+ //Is the box cleared? Do not repopulate the deleted text box.
+ setEnhancing(false)
+ clearEnhancedPrompt()
+ return
+ }
setInput(enhancedPrompt)
setEnhancing(false)
clearEnhancedPrompt()
inputRef.current?.focus()
- }, [enhancedPrompt, clearEnhancedPrompt, setInput])
+ }, [enhancedPrompt, clearEnhancedPrompt, setInput, input])
+
+ // Deleting the draft cancels any in-flight/pending enhance and resets the
+ //enhance button's display state
+ useEffect(() => {
+ if (input.trim() !== '') return
+ if (enhancing) setEnhancing(false)
+ if (plusOpen) setPlusOpen (false)
+ },[input, enhancing, plusOpen]
+ )
// Reset enhancing spinner if the WebSocket disconnects mid-request
useEffect(() => {
From ddd9693ed4ec1101925eedc1a28896af15ab27f7 Mon Sep 17 00:00:00 2001
From: RooberSmoth <96537304+RooberSmoth@users.noreply.github.com>
Date: Mon, 10 Aug 2026 12:30:34 +0900
Subject: [PATCH 03/50] Updated chat.tsx as i committed the wrong version.
---
app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index 418c0a06..f8ea152d 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -796,9 +796,9 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
//enhance button's display state
useEffect(() => {
if (input.trim() !== '') return
- if (enhancing) setEnhancing(false)
- if (plusOpen) setPlusOpen (false)
- },[input, enhancing, plusOpen]
+ setEnhancing(false)
+ setPlusOpen (false)
+ },[input]
)
// Reset enhancing spinner if the WebSocket disconnects mid-request
From 47dc53c64a5fc29ec30f595af24c26ea23edc40b Mon Sep 17 00:00:00 2001
From: CraftBot
Date: Mon, 10 Aug 2026 14:01:13 +0900
Subject: [PATCH 04/50] Fix issue #416
---
.../frontend/src/pages/Chat/ChatPage.module.css | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/app/ui_layer/browser/frontend/src/pages/Chat/ChatPage.module.css b/app/ui_layer/browser/frontend/src/pages/Chat/ChatPage.module.css
index e6d3b358..0da8ab3f 100644
--- a/app/ui_layer/browser/frontend/src/pages/Chat/ChatPage.module.css
+++ b/app/ui_layer/browser/frontend/src/pages/Chat/ChatPage.module.css
@@ -115,6 +115,12 @@
border-radius: var(--radius-lg);
background: var(--bg-tertiary);
width: 100%;
+ /* Never exceed the wrapper's clamped width. Without this the bubble grows
+ to the content's max-content size (e.g. a wide, non-wrapping code block),
+ so the wrapper's max-width clamp is bypassed and the bubble overflows the
+ panel. Capping here keeps wide
/
content inside the bubble so
+ their own overflow-x scrolls instead. */
+ max-width: 100%;
opacity: 1;
transition: opacity 150ms ease;
}
@@ -633,6 +639,10 @@
flex-direction: column;
gap: var(--space-2);
min-width: 0;
+ /* Cross-axis clamp: this flex item is not stretched (the wrapper aligns it),
+ so without a max-width it sizes to its content's max-content width and
+ overflows the wrapper. 100% resolves against the wrapper's clamped width. */
+ max-width: 100%;
}
/* Action buttons (copy) outside the bubble - positioned in the
From 05849bf2bbd702c4860303e59650765b0f81fac4 Mon Sep 17 00:00:00 2001
From: RooberSmoth <96537304+RooberSmoth@users.noreply.github.com>
Date: Mon, 10 Aug 2026 14:48:55 +0900
Subject: [PATCH 05/50] Added loading spinner to + button for visual
communication.
---
app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index f8ea152d..2d1b14fc 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -1412,7 +1412,9 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
aria-label="Attach and tools"
aria-expanded={plusOpen}
>
-
+ {enhancing
+ ?
+ : }
{plusOpen && (
From b756d1e413c3691d50c772f9f061db344ff83435 Mon Sep 17 00:00:00 2001
From: RooberSmoth <96537304+RooberSmoth@users.noreply.github.com>
Date: Mon, 10 Aug 2026 15:13:53 +0900
Subject: [PATCH 06/50] Disabled send and dictate button, added 'no entry'
thing when hovering on dictate.
---
.../browser/frontend/src/components/Chat/Chat.module.css | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css b/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
index 5a5e1a09..c3302833 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
@@ -596,6 +596,11 @@
color: var(--color-error, #ef4444);
}
+.micCombo:disabled {
+ color: var(--text-muted);
+ cursor: not-allowed;
+}
+
.micIconWrap {
position: relative;
display: flex;
From cb80a08dfdafae690a9ec33e722c1a2f9dc2cf8e Mon Sep 17 00:00:00 2001
From: CraftBot
Date: Mon, 10 Aug 2026 15:21:05 +0900
Subject: [PATCH 07/50] splash page loading animation
---
app/ui_layer/browser/frontend/src/App.tsx | 29 ++++----
.../components/Mascot/LoadingMascot.tsx | 72 +++++++++++++++++++
app/ui_layer/components/Mascot/index.ts | 1 +
3 files changed, 89 insertions(+), 13 deletions(-)
create mode 100644 app/ui_layer/components/Mascot/LoadingMascot.tsx
diff --git a/app/ui_layer/browser/frontend/src/App.tsx b/app/ui_layer/browser/frontend/src/App.tsx
index b3004665..e09ee5aa 100644
--- a/app/ui_layer/browser/frontend/src/App.tsx
+++ b/app/ui_layer/browser/frontend/src/App.tsx
@@ -8,6 +8,7 @@ import { SettingsPage } from './pages/Settings'
import { OnboardingPage } from './pages/Onboarding'
import { LivingUIPage } from './pages/LivingUI'
import { useWebSocket } from './contexts/WebSocketContext'
+import { LoadingMascot } from '@mascot'
// Forces LivingUIPage to remount per-project so useState initializers
// (theme, custom colors) always start fresh — not carried over from a previous project.
@@ -46,22 +47,24 @@ function App() {
-
-
-
-
-
-
+ {/* Loading indicator: the mascot jumping in place (same character +
+ jump beats as the Living UI build view). */}
+
+
+
+ Waking up CraftBot
+
)
diff --git a/app/ui_layer/components/Mascot/LoadingMascot.tsx b/app/ui_layer/components/Mascot/LoadingMascot.tsx
new file mode 100644
index 00000000..7139b556
--- /dev/null
+++ b/app/ui_layer/components/Mascot/LoadingMascot.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react'
+import { CraftBotMascot } from './CraftBotMascot'
+import {
+ JUMP_IN_PLACE_DURATION_MS,
+ buildJumpInPlaceKeyframes,
+ pickJumpRest,
+} from './mascotEngine'
+import styles from './Mascot.module.css'
+
+// LoadingMascot — a loading indicator: the CraftBot mascot jumping in place
+// on a loop. It reuses the exact squash-and-stretch jump beats the engine
+// plays during its `waitingJump` phase (buildJumpInPlaceKeyframes), so it
+// reads as the same character — just standing in for a spinner.
+//
+// Deliberately minimal: no wander, no sleep, no eye tracking, no engine FSM.
+// It can render before the app is interactive (boot splash), so it must not
+// depend on WebSocket state or any store.
+interface Props {
+ /** Pixel size of the mascot SVG. */
+ size?: number
+}
+
+export function LoadingMascot({ size = 88 }: Props) {
+ const bodyRef = useRef(null)
+
+ // Loop: jump in place → short random rest → jump again. Mirrors the
+ // waitingJump loop in useMascotBehavior (a `cancelled` closure flag stops
+ // every async continuation before it schedules the next step).
+ useEffect(() => {
+ const el = bodyRef.current
+ if (!el) return
+ // Reduced motion: hold the mascot still rather than looping the jump.
+ if (
+ typeof window.matchMedia === 'function' &&
+ window.matchMedia('(prefers-reduced-motion: reduce)').matches
+ ) {
+ return
+ }
+
+ let cancelled = false
+ let restTimer: number | undefined
+ let anim: Animation | null = null
+
+ const jump = () => {
+ if (cancelled || !bodyRef.current) return
+ anim = el.animate(buildJumpInPlaceKeyframes(), {
+ duration: JUMP_IN_PLACE_DURATION_MS,
+ easing: 'ease-in-out', // same curve as the hop — linear reads floaty
+ fill: 'forwards',
+ })
+ anim.onfinish = () => {
+ if (cancelled) return
+ restTimer = window.setTimeout(jump, pickJumpRest())
+ }
+ }
+
+ jump()
+ return () => {
+ cancelled = true
+ window.clearTimeout(restTimer)
+ try { anim?.cancel() } catch { /* already gone */ }
+ }
+ }, [])
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/app/ui_layer/components/Mascot/index.ts b/app/ui_layer/components/Mascot/index.ts
index fef0631e..14bd9e26 100644
--- a/app/ui_layer/components/Mascot/index.ts
+++ b/app/ui_layer/components/Mascot/index.ts
@@ -1,5 +1,6 @@
export { CraftBotMascot } from './CraftBotMascot'
export { DraftMascot, DRAFT_MASCOT_EXIT_MS } from './DraftMascot'
+export { LoadingMascot } from './LoadingMascot'
export { MascotBackground } from './MascotBackground'
export { MascotDisplay } from './MascotDisplay'
export { SpeechBubble } from './SpeechBubble'
From aef2fd72c0a906b97806eaaf21a28d3d923d439f Mon Sep 17 00:00:00 2001
From: RooberSmoth <96537304+RooberSmoth@users.noreply.github.com>
Date: Mon, 10 Aug 2026 16:24:18 +0900
Subject: [PATCH 08/50] Added 30s timeout - needs testing?
---
.../frontend/src/components/Chat/Chat.tsx | 47 +++++++++++++++----
1 file changed, 38 insertions(+), 9 deletions(-)
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index 2d1b14fc..aefcbcd9 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -84,6 +84,7 @@ interface SuggestedPlaybook {
}
const SUGGESTED_PLAYBOOK_COUNT = 3
+const ENHANCE_TIMEOUT_MS = 30000
// Chat-delivery actions — the ones whose visible form IS a chat bubble in
// this interface. A chunk whose only actions are these renders nothing at
@@ -321,6 +322,22 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
}, [dispatch, sessionId])
const [enhancing, setEnhancing] = useState(false)
+ // Guards against the user waiting forever if the enhance WS response
+ // never comes back. Cleared (never fires) on success, disconnect, or the
+ // draft being emptied — see the effects/handler below.
+ const enhanceTimeoutRef = useRef | null>(null)
+
+ // Single choke point for turning enhancing off: always cancels the
+ // timeout alongside it, so success/disconnect/clear-draft paths can't
+ // leave a stale timer that fires 30s later on an already-finished request.
+ const stopEnhancing = useCallback(() => {
+ if (enhanceTimeoutRef.current !== null) {
+ clearTimeout(enhanceTimeoutRef.current)
+ enhanceTimeoutRef.current = null
+ }
+ setEnhancing(false)
+ }, [])
+
// Reply-to-bubble: set from an agent bubble's hover Reply action. The
// next send carries the quoted original so the event stream records
// which message the user replied to. No routing — session is explicit.
@@ -782,35 +799,46 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
if (enhancedPrompt === null) return
if (input.trim() === ''){
//Is the box cleared? Do not repopulate the deleted text box.
- setEnhancing(false)
+ stopEnhancing()
clearEnhancedPrompt()
return
}
setInput(enhancedPrompt)
- setEnhancing(false)
+ stopEnhancing()
clearEnhancedPrompt()
inputRef.current?.focus()
- }, [enhancedPrompt, clearEnhancedPrompt, setInput, input])
+ }, [enhancedPrompt, clearEnhancedPrompt, setInput, input, stopEnhancing])
// Deleting the draft cancels any in-flight/pending enhance and resets the
//enhance button's display state
useEffect(() => {
if (input.trim() !== '') return
- setEnhancing(false)
+ stopEnhancing()
setPlusOpen (false)
- },[input]
+ },[input, stopEnhancing]
)
// Reset enhancing spinner if the WebSocket disconnects mid-request
useEffect(() => {
- if (!connected) setEnhancing(false)
- }, [connected])
+ if (!connected) stopEnhancing()
+ }, [connected, stopEnhancing])
const handleEnhancePrompt = useCallback(() => {
if (!input.trim() || enhancing) return
setEnhancing(true)
enhancePrompt(input.trim())
- }, [input, enhancing, enhancePrompt])
+ enhanceTimeoutRef.current = setTimeout(() => {
+ enhanceTimeoutRef.current = null
+ setEnhancing(false)
+ showToast('error', 'AI enhance timed out — please try again.')
+ }, ENHANCE_TIMEOUT_MS)
+ }, [input, enhancing, enhancePrompt, showToast])
+
+ useEffect(() => {
+ return () => {
+ if (enhanceTimeoutRef.current !== null) clearTimeout(enhanceTimeoutRef.current)
+ }
+}, [])
const handleOptionClick = useCallback((value: string, messageId: string) => {
if (value === 'open_settings_model') {
@@ -1446,6 +1474,7 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
className={`${styles.micCombo}${isListening ? ` ${styles.micComboActive}` : ''}`}
title={isListening ? 'Stop listening' : 'Voice input'}
onClick={toggleListening}
+ disabled = {enhancing}
>
{isListening ? : }
@@ -1493,7 +1522,7 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
type="button"
className={styles.sendBtn}
onClick={handleSend}
- disabled={(!input.trim() && pendingAttachments.length === 0) || !attachmentValidation.valid}
+ disabled={(!input.trim() && pendingAttachments.length === 0) || !attachmentValidation.valid || enhancing}
title="Send"
aria-label="Send message"
>
From f292f47fcba681cc2805809f13c4da33d5b06e80 Mon Sep 17 00:00:00 2001
From: CraftBot
Date: Mon, 10 Aug 2026 19:51:47 +0900
Subject: [PATCH 09/50] make chat input disabled
---
.../browser/frontend/src/components/Chat/Chat.module.css | 6 ++++++
app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx | 6 +++++-
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css b/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
index c3302833..30dbf2d0 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
@@ -429,6 +429,12 @@
outline: none;
}
+.input:disabled {
+ color: var(--text-muted);
+ cursor: not-allowed;
+ opacity: 0.6;
+}
+
.input::placeholder {
color: var(--text-muted);
}
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index aefcbcd9..1eee0307 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -806,7 +806,10 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
setInput(enhancedPrompt)
stopEnhancing()
clearEnhancedPrompt()
- inputRef.current?.focus()
+ // Defer focus: the textarea is still disabled in the DOM this tick
+ // (enhancing→false hasn't re-rendered yet), so a synchronous focus()
+ // would be ignored.
+ setTimeout(() => inputRef.current?.focus(), 0)
}, [enhancedPrompt, clearEnhancedPrompt, setInput, input, stopEnhancing])
// Deleting the draft cancels any in-flight/pending enhance and resets the
@@ -1428,6 +1431,7 @@ export function Chat({ sessionId, placeholder }: ChatProps) {
rows={1}
lang={micLang}
inputMode="text"
+ disabled={enhancing}
/>
From 5b6d0659bf9a5098839f4539225ba22cd5bfb554 Mon Sep 17 00:00:00 2001
From: CraftBot
Date: Mon, 10 Aug 2026 20:55:08 +0900
Subject: [PATCH 10/50] Remove outdated sections in living UI setting page
---
agent_file_system/GLOBAL_LIVING_UI.md | 25 +-
.../GLOBAL_LIVING_UI.md | 25 +-
.../src/pages/Settings/LivingUISettings.tsx | 475 +-----------------
.../src/store/selectors/livingUiSettings.ts | 4 -
.../src/store/slices/generalSettingsSlice.ts | 4 +-
.../src/store/slices/livingUiSettingsSlice.ts | 31 +-
app/ui_layer/settings/general_settings.py | 4 +-
7 files changed, 27 insertions(+), 541 deletions(-)
diff --git a/agent_file_system/GLOBAL_LIVING_UI.md b/agent_file_system/GLOBAL_LIVING_UI.md
index a5a7060f..56561d1a 100644
--- a/agent_file_system/GLOBAL_LIVING_UI.md
+++ b/agent_file_system/GLOBAL_LIVING_UI.md
@@ -35,21 +35,14 @@ Per-project settings from Phase 0 Q&A override these when they conflict.
- Text must have sufficient contrast against background (dark text on light backgrounds, light text on dark backgrounds)
- Never use light text on light backgrounds or dark text on dark backgrounds
-## Optional Rules
-
-- [x] Enable drag-and-drop for reordering items
-- [x] Add keyboard shortcuts for common actions
-- [x] Show item count badges on categories/sections
-- [x] Add search/filter bar to all list views
-- [x] Support bulk selection and batch operations
-- [ ] Enable dark mode only (ignore system preference)
-- [ ] Add animations and transitions to UI interactions
-- [ ] Show timestamps on all items (created/updated)
-- [ ] Enable infinite scroll instead of pagination
-- [ ] Add undo/redo support for user actions
-- [ ] Show breadcrumb navigation for nested views
-
## Custom Rules
-
-
+
+
+- Enable drag-and-drop for reordering items
+- Add keyboard shortcuts for common actions
+- Show item count badges on categories/sections
+- Add search/filter bar to all list views
+- Support bulk selection and batch operations
+- Add animations and transitions to UI interactions
+- Add undo/redo support for user actions
diff --git a/app/data/agent_file_system_template/GLOBAL_LIVING_UI.md b/app/data/agent_file_system_template/GLOBAL_LIVING_UI.md
index a5a7060f..56561d1a 100644
--- a/app/data/agent_file_system_template/GLOBAL_LIVING_UI.md
+++ b/app/data/agent_file_system_template/GLOBAL_LIVING_UI.md
@@ -35,21 +35,14 @@ Per-project settings from Phase 0 Q&A override these when they conflict.
- Text must have sufficient contrast against background (dark text on light backgrounds, light text on dark backgrounds)
- Never use light text on light backgrounds or dark text on dark backgrounds
-## Optional Rules
-
-- [x] Enable drag-and-drop for reordering items
-- [x] Add keyboard shortcuts for common actions
-- [x] Show item count badges on categories/sections
-- [x] Add search/filter bar to all list views
-- [x] Support bulk selection and batch operations
-- [ ] Enable dark mode only (ignore system preference)
-- [ ] Add animations and transitions to UI interactions
-- [ ] Show timestamps on all items (created/updated)
-- [ ] Enable infinite scroll instead of pagination
-- [ ] Add undo/redo support for user actions
-- [ ] Show breadcrumb navigation for nested views
-
## Custom Rules
-
-
+
+
+- Enable drag-and-drop for reordering items
+- Add keyboard shortcuts for common actions
+- Show item count badges on categories/sections
+- Add search/filter bar to all list views
+- Support bulk selection and batch operations
+- Add animations and transitions to UI interactions
+- Add undo/redo support for user actions
diff --git a/app/ui_layer/browser/frontend/src/pages/Settings/LivingUISettings.tsx b/app/ui_layer/browser/frontend/src/pages/Settings/LivingUISettings.tsx
index e0b9f547..89a40c7c 100644
--- a/app/ui_layer/browser/frontend/src/pages/Settings/LivingUISettings.tsx
+++ b/app/ui_layer/browser/frontend/src/pages/Settings/LivingUISettings.tsx
@@ -1,105 +1,28 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
import {
Play,
Square,
Trash2,
Loader2,
- RotateCcw,
Check,
- X,
- Plus,
Download,
Copy,
ChevronRight,
} from 'lucide-react'
-import { Button, Badge, ConfirmModal } from '../../components/ui'
+import { Button, ConfirmModal } from '../../components/ui'
import { useConfirmModal } from '../../hooks'
import styles from './SettingsPage.module.css'
import { useSettingsWebSocket } from './useSettingsWebSocket'
import { useAppDispatch, useAppSelector } from '../../store/hooks'
import {
- setGlobalConfig as setSliceGlobalConfig,
updateProjectSetting,
type LivingUISettingsProject as LivingUIProject,
} from '../../store/slices/livingUiSettingsSlice'
import {
selectLivingUiSettingsProjects,
selectLivingUiSettingsHasLoadedProjects,
- selectLivingUiGlobalConfig,
- selectLivingUiHasLoadedGlobalConfig,
} from '../../store/selectors/livingUiSettings'
-interface ParsedRule {
- enabled: boolean
- text: string
- lineIndex: number
-}
-
-interface ParsedPref {
- key: string
- value: string
- lineIndex: number
-}
-
-interface ParsedSection {
- title: string
- rules: ParsedRule[]
- prefs: ParsedPref[]
-}
-
-const FONT_OPTIONS: Array<{ value: string; label: string }> = [
- { value: 'System default (Segoe UI, sans-serif)', label: 'System Default' },
- { value: 'Inter, sans-serif', label: 'Inter' },
- { value: 'Roboto, sans-serif', label: 'Roboto' },
- { value: 'Open Sans, sans-serif', label: 'Open Sans' },
- { value: 'Poppins, sans-serif', label: 'Poppins' },
- { value: 'Lato, sans-serif', label: 'Lato' },
- { value: 'Nunito, sans-serif', label: 'Nunito' },
- { value: 'Source Sans Pro, sans-serif', label: 'Source Sans Pro' },
- { value: 'JetBrains Mono, monospace', label: 'JetBrains Mono' },
- { value: 'Fira Code, monospace', label: 'Fira Code' },
-]
-
-function parseGlobalConfig(content: string): { sections: ParsedSection[]; rawLines: string[] } {
- const lines = content.split('\n')
- const sections: ParsedSection[] = []
- let currentSection: ParsedSection | null = null
-
- lines.forEach((line, i) => {
- const sectionMatch = line.match(/^##\s+(.+)/)
- if (sectionMatch) {
- currentSection = { title: sectionMatch[1], rules: [], prefs: [] }
- sections.push(currentSection)
- return
- }
- const ruleMatch = line.match(/^- \[(x| )\]\s+(.+)/)
- if (ruleMatch && currentSection) {
- currentSection.rules.push({ enabled: ruleMatch[1] === 'x', text: ruleMatch[2], lineIndex: i })
- return
- }
- const prefMatch = line.match(/^- \*\*(.+?):\*\*\s*(.*)/)
- if (prefMatch && currentSection) {
- currentSection.prefs.push({ key: prefMatch[1], value: prefMatch[2], lineIndex: i })
- }
- })
-
- return { sections, rawLines: lines }
-}
-
-function rebuildConfig(rawLines: string[], changes: Map): string {
- return rawLines.map((line, i) => {
- if (changes.has(i)) {
- const newVal = changes.get(i)!
- if (newVal === 'true' || newVal === 'false') {
- return line.replace(/^- \[(x| )\]/, newVal === 'true' ? '- [x]' : '- [ ]')
- }
- const prefMatch = line.match(/^(- \*\*.+?:\*\*\s*)(.*)/)
- if (prefMatch) return prefMatch[1] + newVal
- }
- return line
- }).join('\n')
-}
-
export function LivingUISettings() {
const { send, onMessage, isConnected } = useSettingsWebSocket()
const dispatch = useAppDispatch()
@@ -108,69 +31,18 @@ export function LivingUISettings() {
// Slice-backed: cached across remounts.
const projects = useAppSelector(selectLivingUiSettingsProjects)
const hasLoadedProjects = useAppSelector(selectLivingUiSettingsHasLoadedProjects)
- const originalConfig = useAppSelector(selectLivingUiGlobalConfig)
- const hasLoadedGlobalConfig = useAppSelector(selectLivingUiHasLoadedGlobalConfig)
const loading = !hasLoadedProjects
- const globalLoading = !hasLoadedGlobalConfig
// Transient UI state.
const [actionInProgress, setActionInProgress] = useState(null)
- const [globalConfig, setLocalGlobalConfig] = useState('')
- const [globalSaving, setGlobalSaving] = useState(false)
- const [globalSaveStatus, setGlobalSaveStatus] = useState<'idle' | 'success' | 'error'>('idle')
- const [newRule, setNewRule] = useState('')
- const [rulesExpanded, setRulesExpanded] = useState(true)
const [expandedProjects, setExpandedProjects] = useState>(new Set())
- const [lineChanges, setLineChanges] = useState>(new Map())
- const globalConfigRef = useRef(globalConfig)
- globalConfigRef.current = globalConfig
- // Sync local editable copy to the slice's source-of-truth whenever the
- // server-known content changes (initial load or post-restore refetch).
- useEffect(() => {
- setLocalGlobalConfig(originalConfig)
- }, [originalConfig])
-
- const isGlobalDirty = globalConfig !== originalConfig
-
- // Fire-once fetches. Slice owns the data; we just trigger requests when
+ // Fire-once fetch. Slice owns the data; we just trigger the request when
// not yet loaded.
useEffect(() => {
if (!isConnected) return
if (!hasLoadedProjects) send('living_ui_settings_get')
- if (!hasLoadedGlobalConfig) send('agent_file_read', { filename: 'GLOBAL_LIVING_UI.md' })
- }, [isConnected, send, hasLoadedProjects, hasLoadedGlobalConfig])
-
- // Side-effect handlers — toasts, success animations, modal close, action
- // completion. List/config state itself flows through the slice registry.
- useEffect(() => {
- const cleanups = [
- onMessage('agent_file_write', (data: unknown) => {
- const d = data as { filename: string; success: boolean }
- if (d.filename === 'GLOBAL_LIVING_UI.md') {
- setGlobalSaving(false)
- if (d.success) {
- // Persist the just-saved content as the new server-known baseline
- // so isDirty flips back to false.
- dispatch(setSliceGlobalConfig(globalConfigRef.current))
- setGlobalSaveStatus('success')
- setTimeout(() => setGlobalSaveStatus('idle'), 2000)
- } else {
- setGlobalSaveStatus('error')
- setTimeout(() => setGlobalSaveStatus('idle'), 3000)
- }
- }
- }),
- onMessage('agent_file_restore', (data: unknown) => {
- const d = data as { filename: string; content: string; success: boolean }
- if (d.filename === 'GLOBAL_LIVING_UI.md' && d.success) {
- // Slice handler already updated originalConfig; clear local edits.
- setLineChanges(new Map())
- }
- }),
- ]
- return () => cleanups.forEach(c => c())
- }, [onMessage, dispatch])
+ }, [isConnected, send, hasLoadedProjects])
useEffect(() => {
const handleActionComplete = (data: unknown) => {
@@ -196,49 +68,6 @@ export function LivingUISettings() {
return cleanup
}, [send, onMessage])
- const handleToggleRule = (lineIndex: number, enabled: boolean) => {
- const newChanges = new Map(lineChanges)
- newChanges.set(lineIndex, String(enabled))
- setLineChanges(newChanges)
- setLocalGlobalConfig(rebuildConfig(parseGlobalConfig(originalConfig).rawLines, newChanges))
- }
-
- const handlePrefChange = (lineIndex: number, value: string) => {
- const newChanges = new Map(lineChanges)
- newChanges.set(lineIndex, value)
- setLineChanges(newChanges)
- setLocalGlobalConfig(rebuildConfig(parseGlobalConfig(originalConfig).rawLines, newChanges))
- }
-
- const handleAddRule = () => {
- if (!newRule.trim()) return
- setLocalGlobalConfig(prev => prev.trimEnd() + '\n- [x] ' + newRule.trim() + '\n')
- setNewRule('')
- }
-
-
- const handleDeleteRule = (lineIndex: number) => {
- const lines = globalConfig.split('\n')
- lines.splice(lineIndex, 1)
- setLocalGlobalConfig(lines.join('\n'))
- }
-
- const handleSaveGlobal = () => {
- setGlobalSaving(true)
- send('agent_file_write', { filename: 'GLOBAL_LIVING_UI.md', content: globalConfig })
- }
-
- const handleRestoreGlobal = () => {
- confirm({
- title: 'Restore Defaults',
- message: 'Reset global Living UI configuration to defaults? Your custom rules and changes will be lost.',
- confirmText: 'Restore',
- variant: 'danger',
- }, () => {
- send('agent_file_restore', { filename: 'GLOBAL_LIVING_UI.md' })
- })
- }
-
const handleLaunch = (projectId: string) => {
setActionInProgress(projectId)
send('living_ui_launch', { projectId })
@@ -270,305 +99,11 @@ export function LivingUISettings() {
})
}
- const { sections } = parseGlobalConfig(globalConfig)
-
- // Collect design prefs (colors/fonts) across all sections
- const designPrefs: ParsedPref[] = sections.flatMap(s =>
- s.prefs.filter(p => {
- const k = p.key.toLowerCase()
- return k.includes('color') || k.includes('font')
- })
- )
-
- const ruleSections = sections.filter(s => s.rules.length > 0)
- const totalRules = ruleSections.reduce((acc, s) => acc + s.rules.length, 0)
- const activeRules = ruleSections.reduce(
- (acc, s) =>
- acc +
- s.rules.filter(r =>
- lineChanges.has(r.lineIndex) ? lineChanges.get(r.lineIndex) === 'true' : r.enabled
- ).length,
- 0
- )
-
return (
-
-