Skip to content

Commit 59e5d90

Browse files
spboyerspboyer
committed
feat: adopt structured logging with electron-log
Replace console.log/warn/error with electron-log across the codebase. Main process files use electron-log with scoped loggers for structured output with log levels, file rotation, and timestamps. Renderer files use a lightweight scoped logger wrapper. Fixes #50
1 parent 991593d commit 59e5d90

52 files changed

Lines changed: 3662 additions & 3564 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/release.yml‎

Lines changed: 250 additions & 250 deletions
Large diffs are not rendered by default.

‎aidocs/code-review.md‎

Lines changed: 359 additions & 359 deletions
Large diffs are not rendered by default.

‎aidocs/mvp-plan.md‎

Lines changed: 289 additions & 289 deletions
Large diffs are not rendered by default.

‎aidocs/prd.md‎

Lines changed: 291 additions & 291 deletions
Large diffs are not rendered by default.

‎aidocs/ui-redesign-plan.md‎

Lines changed: 156 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,156 @@
1-
# UI Cosmetic Redesign Plan
2-
3-
## Overview
4-
5-
Redesign the Multi-Repo Workspace app with a **modern minimal** aesthetic while preserving the three-pane layout and all existing functionality. Replace emoji icons with VS Code icons, refine typography, and create a cleaner visual hierarchy.
6-
7-
## Design Direction
8-
9-
**Aesthetic**: Modern Minimal
10-
- Cleaner than VS Code, more whitespace, refined typography
11-
- Dark theme with cyan/teal accents
12-
- Subtle depth through shadows and layering (not borders)
13-
- Focus on typography and spacing over ornamentation
14-
15-
**Key Differentiator**: A terminal app that feels designed, not just functional. Calm, focused, professional.
16-
17-
## Design Specifications
18-
19-
### Typography
20-
- **Display/Headers**: JetBrains Mono (monospace with character)
21-
- **Body/UI**: IBM Plex Sans (clean, technical, distinctive)
22-
- **Terminal**: JetBrains Mono or Cascadia Code
23-
- Font sizes: 11px (small), 13px (body), 14px (headers)
24-
- Generous letter-spacing in headers (0.05em)
25-
26-
### Color Palette
27-
```css
28-
/* Base */
29-
--bg-deep: #0d1117; /* Deepest background */
30-
--bg-surface: #161b22; /* Pane backgrounds */
31-
--bg-elevated: #1c2128; /* Headers, hover states */
32-
--bg-hover: #21262d; /* Interactive hover */
33-
34-
/* Borders & Lines */
35-
--border-subtle: #30363d;
36-
--border-muted: #21262d;
37-
38-
/* Text */
39-
--text-primary: #e6edf3;
40-
--text-secondary: #8b949e;
41-
--text-muted: #6e7681;
42-
43-
/* Accent - Cyan/Teal */
44-
--accent: #58a6ff;
45-
--accent-glow: rgba(88, 166, 255, 0.15);
46-
--accent-muted: #388bfd;
47-
48-
/* Semantic */
49-
--success: #3fb950;
50-
--warning: #d29922;
51-
--error: #f85149;
52-
```
53-
54-
### Icons - VS Code Icons (Codicons)
55-
- Install `@vscode/codicons` package
56-
- Use SVG sprite or React component wrapper
57-
- Key icons needed:
58-
- `terminal` - Workspace items
59-
- `chevron-right` / `chevron-down` - Expand/collapse
60-
- `file` - Generic file
61-
- `file-code` - Code files (.ts, .js, .py)
62-
- `json` - JSON files
63-
- `markdown` - Markdown files
64-
- `folder` / `folder-opened` - Directories
65-
- `add` - Add button
66-
- `close` - Close button
67-
- `refresh` - Refresh tree
68-
69-
### Spacing System
70-
- Base unit: 4px
71-
- Pane padding: 12px (3 units)
72-
- Item padding: 8px 12px
73-
- Gap between items: 2px
74-
- Header height: 40px
75-
76-
### Visual Effects
77-
- No hard borders between panes (use background color difference)
78-
- Subtle box-shadow on context menus
79-
- Smooth transitions (150ms ease)
80-
- Active item: subtle left border accent + background tint
81-
- Hover: gentle background shift
82-
83-
---
84-
85-
## Workplan
86-
87-
### Phase 1: Foundation Setup
88-
- [ ] Install dependencies (`@vscode/codicons`, web fonts)
89-
- [ ] Create CSS variables file with design tokens
90-
- [ ] Set up font imports (JetBrains Mono, IBM Plex Sans)
91-
- [ ] Create Icon component wrapper for Codicons
92-
93-
### Phase 2: Global Styles Refactor
94-
- [ ] Update `global.css` with new color variables
95-
- [ ] Apply new typography throughout
96-
- [ ] Update base layout spacing
97-
- [ ] Remove hard borders, use background layering
98-
- [ ] Add smooth transitions
99-
100-
### Phase 3: Left Pane Redesign
101-
- [ ] Update pane header (cleaner, more minimal)
102-
- [ ] Replace `+` text with Codicon `add` icon
103-
- [ ] Update workspace items with `terminal` icon
104-
- [ ] Update file items with appropriate file type icons
105-
- [ ] Refine active/hover states with accent color
106-
- [ ] Polish context menu styling
107-
108-
### Phase 4: Right Pane (File Tree) Redesign
109-
- [ ] Update pane header styling
110-
- [ ] Replace emoji icons with Codicons (`folder`, `file`, etc.)
111-
- [ ] Create file type icon mapping (extension → icon)
112-
- [ ] Update expand/collapse chevrons
113-
- [ ] Refine indentation and spacing
114-
- [ ] Polish hover/focus states
115-
116-
### Phase 5: Center Pane Polish
117-
- [ ] Style empty state with refined typography
118-
- [ ] Ensure workspace terminal container respects new spacing
119-
- [ ] Verify Monaco editor theme compatibility
120-
- [ ] Style file view header/breadcrumbs if present
121-
122-
### Phase 6: Details & Polish
123-
- [ ] Update context menu styling (shadows, spacing)
124-
- [ ] Add subtle animations (expand/collapse, hover)
125-
- [ ] Verify all icon sizes are consistent
126-
- [ ] Test responsive behavior at different window sizes
127-
- [ ] Ensure accessibility (focus states, contrast)
128-
129-
### Phase 7: Testing & Cleanup
130-
- [ ] Visual regression check across all states
131-
- [ ] Verify no functionality broken
132-
- [ ] Update screenshots in `/img/`
133-
- [ ] Clean up any unused CSS
134-
135-
---
136-
137-
## File Changes Summary
138-
139-
| File | Changes |
140-
|------|---------|
141-
| `package.json` | Add `@vscode/codicons` dependency |
142-
| `src/renderer/styles/global.css` | Complete overhaul with new design system |
143-
| `src/renderer/styles/variables.css` | NEW - CSS custom properties |
144-
| `src/renderer/components/Icon.tsx` | NEW - Codicon wrapper component |
145-
| `src/renderer/components/LeftPane/LeftPane.tsx` | Replace emoji with Icon components |
146-
| `src/renderer/components/RightPane/FileTreeNode.tsx` | Replace emoji with Icon components, new icon mapping |
147-
| Minor updates to other components for spacing/styling consistency |
148-
149-
---
150-
151-
## Notes
152-
153-
- Keep all React component structure intact
154-
- Only modify styling and icon rendering
155-
- Test workspace terminal functionality after changes (xterm.js is sensitive to container sizing)
156-
- Monaco Editor has its own theming - may need minor adjustments for consistency
1+
# UI Cosmetic Redesign Plan
2+
3+
## Overview
4+
5+
Redesign the Multi-Repo Workspace app with a **modern minimal** aesthetic while preserving the three-pane layout and all existing functionality. Replace emoji icons with VS Code icons, refine typography, and create a cleaner visual hierarchy.
6+
7+
## Design Direction
8+
9+
**Aesthetic**: Modern Minimal
10+
- Cleaner than VS Code, more whitespace, refined typography
11+
- Dark theme with cyan/teal accents
12+
- Subtle depth through shadows and layering (not borders)
13+
- Focus on typography and spacing over ornamentation
14+
15+
**Key Differentiator**: A terminal app that feels designed, not just functional. Calm, focused, professional.
16+
17+
## Design Specifications
18+
19+
### Typography
20+
- **Display/Headers**: JetBrains Mono (monospace with character)
21+
- **Body/UI**: IBM Plex Sans (clean, technical, distinctive)
22+
- **Terminal**: JetBrains Mono or Cascadia Code
23+
- Font sizes: 11px (small), 13px (body), 14px (headers)
24+
- Generous letter-spacing in headers (0.05em)
25+
26+
### Color Palette
27+
```css
28+
/* Base */
29+
--bg-deep: #0d1117; /* Deepest background */
30+
--bg-surface: #161b22; /* Pane backgrounds */
31+
--bg-elevated: #1c2128; /* Headers, hover states */
32+
--bg-hover: #21262d; /* Interactive hover */
33+
34+
/* Borders & Lines */
35+
--border-subtle: #30363d;
36+
--border-muted: #21262d;
37+
38+
/* Text */
39+
--text-primary: #e6edf3;
40+
--text-secondary: #8b949e;
41+
--text-muted: #6e7681;
42+
43+
/* Accent - Cyan/Teal */
44+
--accent: #58a6ff;
45+
--accent-glow: rgba(88, 166, 255, 0.15);
46+
--accent-muted: #388bfd;
47+
48+
/* Semantic */
49+
--success: #3fb950;
50+
--warning: #d29922;
51+
--error: #f85149;
52+
```
53+
54+
### Icons - VS Code Icons (Codicons)
55+
- Install `@vscode/codicons` package
56+
- Use SVG sprite or React component wrapper
57+
- Key icons needed:
58+
- `terminal` - Workspace items
59+
- `chevron-right` / `chevron-down` - Expand/collapse
60+
- `file` - Generic file
61+
- `file-code` - Code files (.ts, .js, .py)
62+
- `json` - JSON files
63+
- `markdown` - Markdown files
64+
- `folder` / `folder-opened` - Directories
65+
- `add` - Add button
66+
- `close` - Close button
67+
- `refresh` - Refresh tree
68+
69+
### Spacing System
70+
- Base unit: 4px
71+
- Pane padding: 12px (3 units)
72+
- Item padding: 8px 12px
73+
- Gap between items: 2px
74+
- Header height: 40px
75+
76+
### Visual Effects
77+
- No hard borders between panes (use background color difference)
78+
- Subtle box-shadow on context menus
79+
- Smooth transitions (150ms ease)
80+
- Active item: subtle left border accent + background tint
81+
- Hover: gentle background shift
82+
83+
---
84+
85+
## Workplan
86+
87+
### Phase 1: Foundation Setup
88+
- [ ] Install dependencies (`@vscode/codicons`, web fonts)
89+
- [ ] Create CSS variables file with design tokens
90+
- [ ] Set up font imports (JetBrains Mono, IBM Plex Sans)
91+
- [ ] Create Icon component wrapper for Codicons
92+
93+
### Phase 2: Global Styles Refactor
94+
- [ ] Update `global.css` with new color variables
95+
- [ ] Apply new typography throughout
96+
- [ ] Update base layout spacing
97+
- [ ] Remove hard borders, use background layering
98+
- [ ] Add smooth transitions
99+
100+
### Phase 3: Left Pane Redesign
101+
- [ ] Update pane header (cleaner, more minimal)
102+
- [ ] Replace `+` text with Codicon `add` icon
103+
- [ ] Update workspace items with `terminal` icon
104+
- [ ] Update file items with appropriate file type icons
105+
- [ ] Refine active/hover states with accent color
106+
- [ ] Polish context menu styling
107+
108+
### Phase 4: Right Pane (File Tree) Redesign
109+
- [ ] Update pane header styling
110+
- [ ] Replace emoji icons with Codicons (`folder`, `file`, etc.)
111+
- [ ] Create file type icon mapping (extension → icon)
112+
- [ ] Update expand/collapse chevrons
113+
- [ ] Refine indentation and spacing
114+
- [ ] Polish hover/focus states
115+
116+
### Phase 5: Center Pane Polish
117+
- [ ] Style empty state with refined typography
118+
- [ ] Ensure workspace terminal container respects new spacing
119+
- [ ] Verify Monaco editor theme compatibility
120+
- [ ] Style file view header/breadcrumbs if present
121+
122+
### Phase 6: Details & Polish
123+
- [ ] Update context menu styling (shadows, spacing)
124+
- [ ] Add subtle animations (expand/collapse, hover)
125+
- [ ] Verify all icon sizes are consistent
126+
- [ ] Test responsive behavior at different window sizes
127+
- [ ] Ensure accessibility (focus states, contrast)
128+
129+
### Phase 7: Testing & Cleanup
130+
- [ ] Visual regression check across all states
131+
- [ ] Verify no functionality broken
132+
- [ ] Update screenshots in `/img/`
133+
- [ ] Clean up any unused CSS
134+
135+
---
136+
137+
## File Changes Summary
138+
139+
| File | Changes |
140+
|------|---------|
141+
| `package.json` | Add `@vscode/codicons` dependency |
142+
| `src/renderer/styles/global.css` | Complete overhaul with new design system |
143+
| `src/renderer/styles/variables.css` | NEW - CSS custom properties |
144+
| `src/renderer/components/Icon.tsx` | NEW - Codicon wrapper component |
145+
| `src/renderer/components/LeftPane/LeftPane.tsx` | Replace emoji with Icon components |
146+
| `src/renderer/components/RightPane/FileTreeNode.tsx` | Replace emoji with Icon components, new icon mapping |
147+
| Minor updates to other components for spacing/styling consistency |
148+
149+
---
150+
151+
## Notes
152+
153+
- Keep all React component structure intact
154+
- Only modify styling and icon rendering
155+
- Test workspace terminal functionality after changes (xterm.js is sensitive to container sizing)
156+
- Monaco Editor has its own theming - may need minor adjustments for consistency

‎app-update.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
provider: github
2-
owner: ipdelete
3-
repo: cmux
1+
provider: github
2+
owner: ipdelete
3+
repo: cmux

‎docs/glossary.md‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
# Glossary
2-
3-
Consistent terminology used throughout cmux documentation.
4-
5-
## Layout
6-
7-
| Term | Description |
8-
|------|-------------|
9-
| **Navigator** | The left pane. Shows all open workspaces, agents, and their associated files. Entry point for switching between everything. |
10-
| **Main View** | The center pane. Displays the active content — a workspace terminal, agent activity feed, file viewer, or chat. |
11-
| **Explorer** | The right pane in workspace/agent mode. Shows the file tree for the selected workspace or agent's directory. |
12-
| **Conversations** | The right pane in chat mode. Lists and manages saved chat conversations. |
13-
14-
## Items
15-
16-
| Term | Description |
17-
|------|-------------|
18-
| **Workspace** | A PTY terminal session scoped to a directory, created via the `+` button in the Navigator. Runs your system shell (PowerShell, bash, zsh). |
19-
| **Agent** | An AI-powered session created from Copilot Chat. Works autonomously in a repository and reports progress via an activity feed in Main View. |
20-
| **Subagent** | An internal sub-task spawned by the Copilot SDK within an agent session. Part of Copilot's internal orchestration. |
21-
| **Chat** | The Copilot Chat interface shown in Main View. Used to have conversations and create agents. |
22-
| **Conversation** | A saved chat thread. Managed in the Conversations pane. Persisted to disk and restored on restart. |
23-
| **File View** | A read-only file displayed in Main View with syntax highlighting via Monaco Editor. |
24-
| **Activity Feed** | The card-based UI in Main View that shows an agent's tool calls, reasoning, and results in real time. |
1+
# Glossary
2+
3+
Consistent terminology used throughout cmux documentation.
4+
5+
## Layout
6+
7+
| Term | Description |
8+
|------|-------------|
9+
| **Navigator** | The left pane. Shows all open workspaces, agents, and their associated files. Entry point for switching between everything. |
10+
| **Main View** | The center pane. Displays the active content — a workspace terminal, agent activity feed, file viewer, or chat. |
11+
| **Explorer** | The right pane in workspace/agent mode. Shows the file tree for the selected workspace or agent's directory. |
12+
| **Conversations** | The right pane in chat mode. Lists and manages saved chat conversations. |
13+
14+
## Items
15+
16+
| Term | Description |
17+
|------|-------------|
18+
| **Workspace** | A PTY terminal session scoped to a directory, created via the `+` button in the Navigator. Runs your system shell (PowerShell, bash, zsh). |
19+
| **Agent** | An AI-powered session created from Copilot Chat. Works autonomously in a repository and reports progress via an activity feed in Main View. |
20+
| **Subagent** | An internal sub-task spawned by the Copilot SDK within an agent session. Part of Copilot's internal orchestration. |
21+
| **Chat** | The Copilot Chat interface shown in Main View. Used to have conversations and create agents. |
22+
| **Conversation** | A saved chat thread. Managed in the Conversations pane. Persisted to disk and restored on restart. |
23+
| **File View** | A read-only file displayed in Main View with syntax highlighting via Monaco Editor. |
24+
| **Activity Feed** | The card-based UI in Main View that shows an agent's tool calls, reasoning, and results in real time. |

0 commit comments

Comments
 (0)