diff --git a/packages/app/src/app/index.tsx b/packages/app/src/app/index.tsx index ca9c665f4..4b896f098 100644 --- a/packages/app/src/app/index.tsx +++ b/packages/app/src/app/index.tsx @@ -26,6 +26,7 @@ import { useDaemonConnections } from "@/contexts/daemon-connections-context"; import { formatConnectionStatus } from "@/utils/daemons"; import { useSessionStore } from "@/stores/session-store"; import { generateMessageId } from "@/types/stream"; +import { MAX_CONTENT_WIDTH } from "@/constants/layout"; import type { AgentProvider, AgentSessionConfig, @@ -843,12 +844,16 @@ const styles = StyleSheet.create((theme) => ({ }, configScrollContent: { flexGrow: 1, + justifyContent: "flex-end", }, configSection: { paddingHorizontal: theme.spacing[4], paddingTop: theme.spacing[3], paddingBottom: theme.spacing[4], gap: theme.spacing[2], + maxWidth: MAX_CONTENT_WIDTH, + alignSelf: "center", + width: "100%", }, configRow: { flexDirection: "row", diff --git a/packages/app/src/components/agent-form/agent-form-dropdowns.tsx b/packages/app/src/components/agent-form/agent-form-dropdowns.tsx index bcd195cbd..19966173e 100644 --- a/packages/app/src/components/agent-form/agent-form-dropdowns.tsx +++ b/packages/app/src/components/agent-form/agent-form-dropdowns.tsx @@ -619,11 +619,6 @@ export function WorkingDirectoryDropdown({ onPress={handleOpen} disabled={disabled} errorMessage={errorMessage || undefined} - helperText={ - hasSuggestedPaths - ? "Search directories from existing agents or paste a new path." - : "No agent directories yet - search to add one." - } controlRef={anchorRef} /> ({ }, inputAreaContent: { width: "100%", - maxWidth: MAX_INPUT_WIDTH, + maxWidth: MAX_CONTENT_WIDTH, gap: theme.spacing[3], }, realtimeButton: { diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx index 3f1013143..0c6b4d2eb 100644 --- a/packages/app/src/components/agent-stream-view.tsx +++ b/packages/app/src/components/agent-stream-view.tsx @@ -43,8 +43,7 @@ import { } from "@/utils/tool-call-parsers"; import { ToolCallSheetProvider } from "./tool-call-sheet"; import { createMarkdownStyles } from "@/styles/markdown-styles"; - -const MAX_CHAT_WIDTH = 960; +import { MAX_CONTENT_WIDTH } from "@/constants/layout"; type PermissionResolvedMessage = Extract< SessionOutboundMessage, { type: "agent_permission_resolved" } @@ -1024,7 +1023,7 @@ const stylesheet = StyleSheet.create((theme) => ({ }, contentWrapper: { width: "100%", - maxWidth: MAX_CHAT_WIDTH, + maxWidth: MAX_CONTENT_WIDTH, alignSelf: "center", }, list: { @@ -1033,7 +1032,7 @@ const stylesheet = StyleSheet.create((theme) => ({ }, streamItemWrapper: { width: "100%", - maxWidth: MAX_CHAT_WIDTH, + maxWidth: MAX_CONTENT_WIDTH, alignSelf: "center", }, emptyState: { @@ -1096,7 +1095,7 @@ const stylesheet = StyleSheet.create((theme) => ({ }, scrollToBottomInner: { width: "100%", - maxWidth: MAX_CHAT_WIDTH, + maxWidth: MAX_CONTENT_WIDTH, alignSelf: "center", alignItems: "center", }, diff --git a/packages/app/src/components/message-input.tsx b/packages/app/src/components/message-input.tsx index 1f01dd5b8..92e3092ba 100644 --- a/packages/app/src/components/message-input.tsx +++ b/packages/app/src/components/message-input.tsx @@ -28,6 +28,7 @@ import { useDictation } from "@/hooks/use-dictation"; import { DictationOverlay } from "./dictation-controls"; import type { UseWebSocketReturn } from "@/hooks/use-websocket"; import type { SessionContextValue } from "@/contexts/session-context"; +import { useSidebarStore } from "@/stores/sidebar-store"; export interface ImageAttachment { uri: string; @@ -113,6 +114,7 @@ export const MessageInput = forwardRef( ref ) { const { theme } = useUnistyles(); + const toggleSidebar = useSidebarStore((state) => state.toggle); const [inputHeight, setInputHeight] = useState(MIN_INPUT_HEIGHT); const textInputRef = useRef< TextInput | (TextInput & { getNativeRef?: () => unknown }) | null @@ -383,6 +385,13 @@ export const MessageInput = forwardRef( if (!shouldHandleDesktopSubmit) return; const { shiftKey, metaKey, ctrlKey } = event.nativeEvent; + // Cmd+B or Ctrl+B: toggle sidebar + if ((metaKey || ctrlKey) && event.nativeEvent.key === "b") { + event.preventDefault(); + toggleSidebar(); + return; + } + // Cmd+D or Ctrl+D: start dictation or submit if already dictating if ((metaKey || ctrlKey) && event.nativeEvent.key === "d") { event.preventDefault(); diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx index 52fb8a180..cf9aa45d3 100644 --- a/packages/app/src/components/message.tsx +++ b/packages/app/src/components/message.tsx @@ -56,8 +56,8 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({ }, text: { color: theme.colors.foreground, - fontSize: theme.fontSize.lg, - lineHeight: 24, + fontSize: theme.fontSize.base, + lineHeight: 22, }, bubblePressed: { opacity: 0.85, diff --git a/packages/app/src/constants/layout.ts b/packages/app/src/constants/layout.ts index ed1cb6989..d31bcebf9 100644 --- a/packages/app/src/constants/layout.ts +++ b/packages/app/src/constants/layout.ts @@ -4,3 +4,6 @@ export const FOOTER_HEIGHT = 75; // Used by both agent header (ScreenHeader) and explorer sidebar header // This ensures both headers have the same visual height export const HEADER_INNER_HEIGHT = 48; + +// Max width for chat content (stream view, input area, new agent form) +export const MAX_CONTENT_WIDTH = 820; diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index 6ec34f12a..3ced85ae6 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -167,14 +167,14 @@ const commonTheme = { }, fontSize: { - xs: 10, - sm: 12, - base: 14, - lg: 16, - xl: 18, - "2xl": 20, - "3xl": 24, - "4xl": 32, + xs: 12, + sm: 14, + base: 16, + lg: 18, + xl: 20, + "2xl": 22, + "3xl": 26, + "4xl": 34, }, fontWeight: {