more-compute 0.4.4__py3-none-any.whl → 0.5.0__py3-none-any.whl

frontend/app/globals.css

@@ -454,7 +454,7 @@ body {
 .cell-status-indicator .status-timer {
     margin-left: 0;
     font-size: 9px;
-    color: #6b7280;
+    color: var(--text-secondary);
     min-width: auto;
     text-align: center;
     line-height: 1;
@@ -855,8 +855,8 @@ body {
         right: auto;
         opacity: 1;
         padding: 8px 12px;
-        background: #f9fafb;
-        border-bottom: 1px solid #e5e7eb;
+        background: var(--mc-cell-background);
+        border-bottom: 1px solid var(--mc-border);
         justify-content: flex-end;
     }
 }
@@ -864,6 +864,7 @@ body {
 /* Sidebar Styles */
 .sidebar {
     width: 60px;
+    height: 100vh;
     background: var(--mc-sidebar-background);
     border-right: 1px solid var(--mc-border);
     display: flex;
@@ -1089,13 +1090,13 @@ body {
     padding: 8px 0;
     margin-bottom: 12px;
     font-size: 12px;
-    color: #6b7280;
-    border-bottom: 1px solid #e5e7eb;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--mc-border);
 }
 
 .file-path-label {
     font-weight: 600;
-    color: #4b5563;
+    color: var(--mc-sidebar-foreground);
 }
 
 .popup-body {
@@ -1138,7 +1139,7 @@ body {
     width: 18px;
     height: 18px;
     margin-right: 10px;
-    color: #4b5563;
+    color: var(--mc-sidebar-foreground);
 }
 
 .file-meta {
@@ -1153,22 +1154,22 @@ body {
 
 .file-details {
     font-size: 11px;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .file-preview {
     display: flex;
     flex-direction: column;
     flex: 1;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--mc-border);
     border-radius: 8px;
     overflow: hidden;
 }
 
 .file-preview-header {
     padding: 12px 16px;
-    background: #f9fafb;
-    border-bottom: 1px solid #e5e7eb;
+    background: var(--mc-cell-background);
+    border-bottom: 1px solid var(--mc-border);
 }
 
 .file-preview-body {
@@ -1182,7 +1183,7 @@ body {
 }
 
 .file-preview-loading {
-    color: #94a3b8;
+    color: var(--text-secondary);
     font-size: 13px;
 }
 
@@ -1195,7 +1196,7 @@ body {
 }
 
 .file-tree.empty {
-    color: #6b7280;
+    color: var(--text-secondary);
     font-style: italic;
     padding: 8px;
 }
@@ -1235,12 +1236,12 @@ body {
 
 .env-name {
     font-weight: 500;
-    color: #1f2937;
+    color: var(--mc-text-color);
 }
 
 .env-path {
     font-size: 12px;
-    color: #6b7280;
+    color: var(--text-secondary);
     margin-top: 2px;
 }
 
@@ -1304,6 +1305,39 @@ body {
     font-size: 14px;
 }
 
+.metrics-provider-badge {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    margin-bottom: 10px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.metrics-provider-badge.ssh-provider {
+    background: rgba(16, 185, 129, 0.15);
+    color: #10b981;
+}
+
+.metrics-provider-badge.modal-provider {
+    background: rgba(245, 158, 11, 0.15);
+    color: #f59e0b;
+}
+
+.metrics-provider-badge .provider-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: currentColor;
+}
+
+.metrics-provider-badge .provider-note {
+    opacity: 0.7;
+    font-size: 10px;
+}
+
 .metrics-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1357,19 +1391,19 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .metrics-placeholder {
     text-align: center;
     padding: 40px 20px;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .metrics-placeholder h3 {
     font-size: 24px;
     margin-bottom: 16px;
-    color: #1f2937;
+    color: var(--mc-text-color);
 }
 
 .metrics-placeholder p {
@@ -1378,8 +1412,8 @@ body {
 }
 
 .coming-soon {
-    background: #f9fafb;
-    border: 1px solid #e5e7eb;
+    background: var(--mc-cell-background);
+    border: 1px solid var(--mc-border);
     border-radius: 8px;
     padding: 24px;
     margin: 20px 0;
@@ -1397,7 +1431,7 @@ body {
     display: flex;
     align-items: center;
     font-size: 14px;
-    color: #374151;
+    color: var(--mc-text-color);
 }
 
 .coming-soon li:last-child {
@@ -1447,7 +1481,7 @@ body {
 }
 
 .packages-search-icon {
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .packages-subtext {
@@ -1455,7 +1489,7 @@ body {
     align-items: center;
     gap: 6px;
     font-size: 12px;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .packages-table {
@@ -1525,7 +1559,7 @@ body {
 }
 
 .package-version {
-    color: #374151;
+    color: var(--mc-text-color);
 }
 
 .file-tree-container {
@@ -1607,7 +1641,7 @@ body {
 
 .monaco-editor .margin-view-overlays {
   background: var(--mc-cell-background) !important;
-  border-right: 1px solid #e5e7eb !important;
+  border-right: 1px solid var(--mc-border) !important;
 }
 
 /* Remove all line highlights */
@@ -1656,7 +1690,7 @@ body {
 
 /* Monaco hover widget styling */
 .monaco-editor .monaco-hover {
-  border: 1px solid #e5e7eb !important;
+  border: 1px solid var(--mc-border) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   border-radius: 6px !important;
   background: white !important;
@@ -1665,7 +1699,7 @@ body {
 
 /* Monaco parameter hints */
 .monaco-editor .parameter-hints-widget {
-  border: 1px solid #e5e7eb !important;
+  border: 1px solid var(--mc-border) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   border-radius: 6px !important;
   z-index: 100000 !important;
@@ -1689,3 +1723,676 @@ body {
   padding: 0 !important;
   overflow: visible;
 }
+
+/* ============================================================================
+   Claude AI Panel Styles
+   ============================================================================ */
+
+/* Sidebar spacer to push Claude icon to bottom */
+/* Claude sidebar item - follows standard theming */
+.sidebar-item.claude-item.active .sidebar-icon-wrapper {
+  color: var(--mc-primary);
+}
+
+/* Claude Panel - Right Side */
+.claude-panel {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 400px;
+  height: 100vh;
+  background: var(--mc-background);
+  border-left: 1px solid var(--mc-border);
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 45;
+  display: flex;
+  flex-direction: column;
+}
+
+.claude-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--mc-border);
+  background: var(--mc-cell-background);
+}
+
+.claude-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--mc-text-color);
+}
+
+.claude-panel-title svg {
+  color: var(--mc-primary);
+}
+
+/* Model selector segmented control */
+.claude-model-selector {
+  display: flex;
+  background: var(--mc-secondary);
+  border-radius: 6px;
+  padding: 2px;
+  gap: 2px;
+}
+
+.claude-model-option {
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  background: transparent;
+  color: var(--mc-text-color);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  opacity: 0.7;
+}
+
+.claude-model-option:hover {
+  opacity: 1;
+  background: var(--mc-secondary-hover);
+}
+
+.claude-model-option.active {
+  background: var(--mc-cell-background);
+  color: var(--mc-text-color);
+  opacity: 1;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Model row at bottom */
+.claude-model-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--mc-border);
+}
+
+.claude-model-label {
+  font-size: 11px;
+  color: var(--mc-text-color);
+  opacity: 0.6;
+}
+
+.claude-panel-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.claude-panel-btn {
+  background: transparent;
+  border: none;
+  padding: 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--mc-text-color);
+  opacity: 0.6;
+  transition: all 0.2s ease;
+}
+
+.claude-panel-btn:hover {
+  background: var(--mc-secondary);
+  opacity: 1;
+}
+
+/* API Key Configuration */
+.claude-config-banner {
+  padding: 14px 16px;
+  margin: 0 16px 12px;
+  background: var(--mc-cell-background);
+  border: 1px solid var(--mc-border);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--mc-text-color);
+}
+
+.claude-config-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+}
+
+.claude-config-form {
+  display: flex;
+  gap: 8px;
+}
+
+.claude-config-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  font-size: 12px;
+  background: var(--mc-input-background);
+  color: var(--mc-text-color);
+}
+
+.claude-config-btn {
+  padding: 8px 16px;
+  background: var(--mc-primary);
+  color: var(--mc-button-foreground);
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.claude-config-btn:hover:not(:disabled) {
+  background: var(--mc-primary-hover);
+}
+
+.claude-config-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Error Banner */
+.claude-error-banner {
+  padding: 12px 20px;
+  background: #fef2f2;
+  border-bottom: 1px solid #fecaca;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #dc2626;
+}
+
+/* Messages Container */
+.claude-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Empty State */
+.claude-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--mc-text-color);
+  opacity: 0.6;
+  text-align: center;
+  gap: 12px;
+}
+
+.claude-empty-state svg {
+  color: var(--mc-primary);
+  opacity: 0.6;
+}
+
+.claude-empty-hint {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+/* Message Bubbles */
+.claude-message {
+  display: flex;
+  flex-direction: column;
+}
+
+.claude-message.user {
+  align-items: flex-end;
+}
+
+.claude-message.assistant {
+  align-items: flex-start;
+}
+
+.claude-message-content {
+  max-width: 90%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.claude-message.user .claude-message-content {
+  background: var(--mc-primary);
+  color: var(--mc-button-foreground);
+  border-bottom-right-radius: 4px;
+}
+
+.claude-message.assistant .claude-message-content {
+  background: var(--mc-cell-background);
+  border: 1px solid var(--mc-border);
+  color: var(--mc-text-color);
+  border-bottom-left-radius: 4px;
+}
+
+.claude-message-text {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+/* Claude Markdown Rendering */
+.claude-markdown h1,
+.claude-markdown h2,
+.claude-markdown h3 {
+  margin: 12px 0 8px 0;
+  font-weight: 600;
+  color: var(--mc-text-color);
+}
+
+.claude-markdown h1 { font-size: 1.25em; }
+.claude-markdown h2 { font-size: 1.1em; }
+.claude-markdown h3 { font-size: 1em; }
+
+.claude-markdown p {
+  margin: 8px 0;
+}
+
+.claude-markdown ul,
+.claude-markdown ol {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.claude-markdown li {
+  margin: 4px 0;
+}
+
+.claude-markdown strong {
+  font-weight: 600;
+}
+
+.claude-markdown em {
+  font-style: italic;
+}
+
+.claude-markdown a {
+  color: var(--mc-primary);
+  text-decoration: none;
+}
+
+.claude-markdown a:hover {
+  text-decoration: underline;
+}
+
+/* Inline code */
+.claude-inline-code {
+  background: var(--mc-secondary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Fira', 'SF Mono', Monaco, monospace;
+  font-size: 0.9em;
+}
+
+/* Code blocks in Claude messages */
+.claude-code-block {
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--mc-cell-background);
+  border: 1px solid var(--mc-border);
+}
+
+.claude-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: var(--mc-secondary);
+  border-bottom: 1px solid var(--mc-border);
+}
+
+.claude-code-lang {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--mc-text-color);
+  opacity: 0.7;
+  text-transform: lowercase;
+}
+
+.claude-code-block pre {
+  margin: 0;
+  padding: 12px;
+  overflow-x: auto;
+  background: var(--mc-cell-background);
+}
+
+.claude-code-block code {
+  font-family: 'Fira', 'SF Mono', Monaco, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--mc-text-color);
+}
+
+/* Streaming indicator */
+.claude-streaming {
+  white-space: normal;
+}
+
+.claude-cursor {
+  animation: blink 1s infinite;
+}
+
+@keyframes cursor-blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Edit Cards */
+.claude-edits {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.claude-edit-card {
+  background: var(--mc-background);
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.claude-edit-card.applied {
+  border-color: #22c55e;
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.claude-edit-card.rejected {
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.05);
+  opacity: 0.6;
+}
+
+.claude-edit-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mc-border);
+  background: var(--mc-secondary);
+}
+
+.claude-edit-cell {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--mc-text-color);
+  opacity: 0.8;
+}
+
+.claude-edit-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.claude-edit-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.claude-edit-btn.accept {
+  background: #22c55e;
+  color: white;
+}
+
+.claude-edit-btn.accept:hover {
+  background: #16a34a;
+}
+
+.claude-edit-btn.reject {
+  background: var(--mc-cell-background);
+  color: var(--mc-text-color);
+  border: 1px solid var(--mc-border);
+}
+
+.claude-edit-btn.reject:hover {
+  background: #fef2f2;
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.claude-edit-status {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.claude-edit-status.applied {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.claude-edit-status.rejected {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.claude-edit-explanation {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--mc-text-color);
+  opacity: 0.8;
+  border-bottom: 1px solid var(--mc-border);
+}
+
+.claude-edit-preview {
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--mc-cell-background);
+}
+
+.claude-edit-code {
+  margin: 0;
+  padding: 12px;
+  font-family: 'Fira', 'SF Mono', Monaco, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  overflow-x: auto;
+  color: var(--mc-text-color);
+  background: transparent;
+}
+
+.claude-edit-code code {
+  font-family: inherit;
+  background: transparent;
+}
+
+/* Copy button in edit card */
+.claude-edit-btn.copy {
+  background: transparent;
+  color: var(--mc-text-color);
+  opacity: 0.6;
+  padding: 4px 6px;
+}
+
+.claude-edit-btn.copy:hover {
+  opacity: 1;
+  background: var(--mc-secondary);
+}
+
+/* Input Container */
+.claude-input-container {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid var(--mc-border);
+  background: var(--mc-cell-background);
+}
+
+.claude-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  font-size: 13px;
+  background: var(--mc-background);
+  color: var(--mc-text-color);
+  resize: none;
+  min-height: 40px;
+  max-height: 120px;
+  font-family: inherit;
+}
+
+.claude-input:focus {
+  outline: none;
+  border-color: var(--mc-primary);
+}
+
+.claude-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.claude-send-btn {
+  padding: 10px 14px;
+  background: var(--mc-primary);
+  color: var(--mc-button-foreground);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.claude-send-btn:hover:not(:disabled) {
+  background: var(--mc-primary-hover);
+}
+
+.claude-send-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.claude-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ============================================================================
+   Monaco Inline Diff Styles
+   ============================================================================ */
+
+/* Added lines - green */
+.monaco-diff-added {
+  background: rgba(34, 197, 94, 0.15) !important;
+  border-left: 3px solid #22c55e !important;
+}
+
+.monaco-diff-added-glyph {
+  background: #22c55e;
+  width: 4px !important;
+  margin-left: 2px;
+}
+
+/* Removed lines glyph indicator */
+.monaco-diff-removed-glyph {
+  background: #ef4444;
+  width: 4px !important;
+  margin-left: 2px;
+}
+
+/* Removed lines indicator */
+.monaco-diff-removed-indicator {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 10px;
+  font-weight: 500;
+  margin-left: 4px;
+}
+
+/* Diff widget overlay - accept/reject buttons */
+.diff-widget-overlay {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--mc-cell-background);
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.diff-widget-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.diff-widget-btn kbd {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-family: inherit;
+}
+
+.diff-widget-btn.accept {
+  background: #22c55e;
+  color: white;
+}
+
+.diff-widget-btn.accept:hover {
+  background: #16a34a;
+}
+
+.diff-widget-btn.accept kbd {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.diff-widget-btn.reject {
+  background: var(--mc-background);
+  color: var(--mc-text-color);
+  border: 1px solid var(--mc-border);
+}
+
+.diff-widget-btn.reject:hover {
+  background: #fef2f2;
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+/* Cell with pending diff */
+.cell.has-pending-diff {
+  border-color: var(--mc-primary) !important;
+  box-shadow: 0 0 0 2px rgba(var(--mc-primary-rgb, 139, 92, 246), 0.2) !important;
+}