feat(ui): add configurable text justification activity setting (#212)

* fix(server): improve external server and error handling

- Skip OpenCode shutdown when using external server
  (OPENCODE_SKIP_START=true)
- Return 404 status for non-existent directories instead of
  empty array
- Move error logging before response handling

* feat(ui): add configurable text justification activity setting

- Replace hardcoded ENABLE_TEXT_JUSTIFICATION_ACTIVITY constant with
  dynamic showTextJustificationActivity setting in useUIStore
- Add toggle UI in Chat settings section (Settings > Chat)
- Add setting to DesktopSettings type for cross-runtime persistence
- Default value is false (matching original constant behavior)

---------

Co-authored-by: iiyangdianfeng <goodydfwow@gmail.com>

packages/ui/src/components/chat/hooks/useTurnGrouping.ts

@@ -73,8 +73,6 @@ interface TurnActivityInfo {
     diffStats?: TurnDiffStats;
 }
 
-const ENABLE_TEXT_JUSTIFICATION_ACTIVITY = false;
-
 const ACTIVITY_STANDALONE_TOOL_NAMES = new Set<string>(['task']);
 
 const isActivityStandaloneTool = (toolName: unknown): boolean => {
@@ -123,6 +121,7 @@ const extractFinalAssistantText = (turn: Turn): string | undefined => {
 };
 
 const getTurnActivityInfo = (turn: Turn): TurnActivityInfo => {
+    const showTextJustificationActivity = useUIStore.getState().showTextJustificationActivity;
     interface SummaryDiff {
         additions?: number | null | undefined;
         deletions?: number | null | undefined;
@@ -186,7 +185,7 @@ const getTurnActivityInfo = (turn: Turn): TurnActivityInfo => {
     turn.assistantMessages.forEach((msg) => {
         const messageId = msg.info.id;
         const infoFinish = (msg.info as { finish?: string | null | undefined }).finish;
-        const hasStopFinishInMessage = ENABLE_TEXT_JUSTIFICATION_ACTIVITY
+        const hasStopFinishInMessage = showTextJustificationActivity
             ? infoFinish === 'stop'
             : false;
 
@@ -233,7 +232,7 @@ const getTurnActivityInfo = (turn: Turn): TurnActivityInfo => {
             }
 
             if (
-                ENABLE_TEXT_JUSTIFICATION_ACTIVITY &&
+                showTextJustificationActivity &&
                 part.type === 'text' &&
                 (hasTools || hasReasoning) &&
                 !hasStopFinishInMessage

packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx

@@ -84,7 +84,7 @@ const VisualSectionContent: React.FC = () => {
 
 // Chat section: Default Tool Output, Diff layout, Show reasoning traces, Queue mode
 const ChatSectionContent: React.FC = () => {
-    return <OpenChamberVisualSettings visibleSettings={['toolOutput', 'diffLayout', 'dotfiles', 'reasoning', 'queueMode']} />;
+    return <OpenChamberVisualSettings visibleSettings={['toolOutput', 'diffLayout', 'dotfiles', 'reasoning', 'textJustificationActivity', 'queueMode']} />;
 };
 
 // Sessions section: Default model & agent, Session retention, Memory limits

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -73,7 +73,7 @@ const DIFF_VIEW_MODE_OPTIONS: Option<'single' | 'stacked'>[] = [
     },
 ];
 
-export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode';
+export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity';
 
 interface OpenChamberVisualSettingsProps {
     /** Which settings to show. If undefined, shows all. */
@@ -85,6 +85,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const directoryShowHidden = useDirectoryShowHidden();
     const showReasoningTraces = useUIStore(state => state.showReasoningTraces);
     const setShowReasoningTraces = useUIStore(state => state.setShowReasoningTraces);
+    const showTextJustificationActivity = useUIStore(state => state.showTextJustificationActivity);
+    const setShowTextJustificationActivity = useUIStore(state => state.setShowTextJustificationActivity);
     const toolCallExpansion = useUIStore(state => state.toolCallExpansion);
     const setToolCallExpansion = useUIStore(state => state.setToolCallExpansion);
     const fontSize = useUIStore(state => state.fontSize);
@@ -528,6 +530,20 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                 </label>
             )}
 
+            {shouldShow('textJustificationActivity') && (
+                <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                        type="checkbox"
+                        className="h-3.5 w-3.5 accent-primary"
+                        checked={showTextJustificationActivity}
+                        onChange={(event) => setShowTextJustificationActivity(event.target.checked)}
+                    />
+                    <span className="typography-ui-header font-semibold text-foreground">
+                        Show text justification in activity
+                    </span>
+                </label>
+            )}
+
             {shouldShow('queueMode') && (
                 <div className="space-y-2">
                     <label className="flex items-center gap-2 cursor-pointer">

packages/ui/src/lib/desktop.ts

@@ -51,6 +51,7 @@ export type DesktopSettings = {
   securityScopedBookmarks?: string[];
   pinnedDirectories?: string[];
   showReasoningTraces?: boolean;
+  showTextJustificationActivity?: boolean;
   autoDeleteEnabled?: boolean;
   autoDeleteAfterDays?: number;
   defaultModel?: string; // format: "provider/model"

packages/ui/src/stores/useUIStore.ts

@@ -40,6 +40,7 @@ interface UIStore {
   eventStreamStatus: EventStreamStatus;
   eventStreamHint: string | null;
   showReasoningTraces: boolean;
+  showTextJustificationActivity: boolean;
   autoDeleteEnabled: boolean;
   autoDeleteAfterDays: number;
   autoDeleteLastRunAt: number | null;
@@ -87,6 +88,7 @@ interface UIStore {
   setSidebarSection: (section: SidebarSection) => void;
   setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
   setShowReasoningTraces: (value: boolean) => void;
+  setShowTextJustificationActivity: (value: boolean) => void;
   setAutoDeleteEnabled: (value: boolean) => void;
   setAutoDeleteAfterDays: (days: number) => void;
   setAutoDeleteLastRunAt: (timestamp: number | null) => void;
@@ -144,6 +146,7 @@ export const useUIStore = create<UIStore>()(
         eventStreamStatus: 'idle',
         eventStreamHint: null,
         showReasoningTraces: false,
+        showTextJustificationActivity: false,
         autoDeleteEnabled: false,
         autoDeleteAfterDays: 30,
         autoDeleteLastRunAt: null,
@@ -292,6 +295,10 @@ export const useUIStore = create<UIStore>()(
           set({ showReasoningTraces: value });
         },
 
+        setShowTextJustificationActivity: (value) => {
+          set({ showTextJustificationActivity: value });
+        },
+
         setAutoDeleteEnabled: (value) => {
           set({ autoDeleteEnabled: value });
         },
@@ -548,6 +555,7 @@ export const useUIStore = create<UIStore>()(
           isSessionCreateDialogOpen: state.isSessionCreateDialogOpen,
           isSettingsDialogOpen: state.isSettingsDialogOpen,
           showReasoningTraces: state.showReasoningTraces,
+          showTextJustificationActivity: state.showTextJustificationActivity,
           autoDeleteEnabled: state.autoDeleteEnabled,
           autoDeleteAfterDays: state.autoDeleteAfterDays,
           autoDeleteLastRunAt: state.autoDeleteLastRunAt,

packages/web/server/index.js

@@ -2442,19 +2442,24 @@ async function gracefulShutdown(options = {}) {
     clearInterval(healthCheckInterval);
   }
 
-  const portToKill = openCodePort;
+  // Only stop OpenCode if we started it ourselves (not when using external server)
+  if (!ENV_SKIP_OPENCODE_START) {
+    const portToKill = openCodePort;
 
-  if (openCodeProcess) {
-    console.log('Stopping OpenCode process...');
-    try {
-      openCodeProcess.close();
-    } catch (error) {
-      console.warn('Error closing OpenCode process:', error);
+    if (openCodeProcess) {
+      console.log('Stopping OpenCode process...');
+      try {
+        openCodeProcess.close();
+      } catch (error) {
+        console.warn('Error closing OpenCode process:', error);
+      }
+      openCodeProcess = null;
     }
-    openCodeProcess = null;
-  }
 
-  killProcessOnPort(portToKill);
+    killProcessOnPort(portToKill);
+  } else {
+    console.log('Skipping OpenCode shutdown (external server)');
+  }
 
   if (server) {
     await Promise.race([
@@ -6378,20 +6383,17 @@ async function main(options = {}) {
         entries: entries.filter(Boolean)
       });
     } catch (error) {
+      console.error('Failed to list directory:', error);
       const err = error;
       if (err && typeof err === 'object' && 'code' in err) {
         const code = err.code;
         if (code === 'ENOENT') {
-          return res.json({
-            path: path.resolve(normalizeDirectoryPath(rawPath)),
-            entries: []
-          });
+          return res.status(404).json({ error: 'Directory not found' });
         }
         if (code === 'EACCES') {
           return res.status(403).json({ error: 'Access to directory denied' });
         }
       }
-      console.error('Failed to list directory:', error);
       res.status(500).json({ error: (error && error.message) || 'Failed to list directory' });
     }
   });