Merge pull request #4 from OnPoint-Dev-Tools/dev

Enhance CrewCode Hub with updates, security, and QOL improvements

Author: CjLogic

src/renderer/src/components/canvas/CanvasMode.tsx

@@ -107,7 +107,7 @@ export function CanvasMode({ workspaceName, openChatCount, openTerminalCount, pa
                     // overflow button. The popover carries prompt toggle,
                     // verbose-log toggle, and close. Add chat / Add terminal
                     // live on the page-level FAB.
-                    <div className="canvas-mode-pane-menu" ref={paneMenuRef}>
+                    <div className="canvas-mode-pane-menu" ref={menuOpen ? paneMenuRef : undefined}>
                       <button
                         type="button"
                         className="canvas-mode-pane-more"

src/renderer/src/components/chat/mobile-chat-layout.test.ts

@@ -35,6 +35,8 @@ describe('mobile solo chat layout', () => {
 
   it('keeps embedded terminal and Git side panes out of the solo-chat column', () => {
     expect(styles).toContain('.main > .termcol-outer,')
-    expect(styles).toContain('.chat-pane-row > .gs { display: none !important; }')
+    expect(styles).toContain('.main > .splitter { display: none !important; }')
+    expect(styles).toContain('.chat-pane-row > .gs,')
+    expect(styles).toContain('.mobile-git-backdrop,')
   })
 })

src/renderer/src/components/workspaces/mobile-workspace-drawer.test.ts

@@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest'
 const app = readFileSync(fileURLToPath(new URL('../../App.tsx', import.meta.url)), 'utf8')
 const drawer = readFileSync(fileURLToPath(new URL('./WorkspacesDrawer.tsx', import.meta.url)), 'utf8')
 const styles = readFileSync(fileURLToPath(new URL('../../styles/styles.css', import.meta.url)), 'utf8')
-const mobileStyles = styles.slice(styles.indexOf('@media (max-width: 768px)'))
+const mobileStyles = styles.slice(styles.indexOf('/* ── Mobile web shell'))
 const mobileDrawerStyles = mobileStyles.slice(
   mobileStyles.indexOf('.app-region.drawer-left'),
   mobileStyles.indexOf('.main {'),

src/renderer/src/hooks/useMobileLayout.ts

@@ -22,6 +22,7 @@ export function useMobileLayout() {
   const [layout, setLayout] = useState(readViewport)
 
   useEffect(() => {
+    if (typeof window === 'undefined') return
     const check = () => setLayout(readViewport())
     check()
     window.addEventListener('resize', check)