pi-studio 0.9.14 → 0.9.16

package/client/studio.css

@@ -849,6 +849,63 @@
       -webkit-text-fill-color: transparent;
     }
 
+    .completion-suggestion-panel {
+      border: 1px solid var(--control-border);
+      border-radius: 10px;
+      background: var(--panel-2);
+      box-shadow: var(--panel-shadow);
+      overflow: hidden;
+    }
+
+    .completion-suggestion-panel[hidden] {
+      display: none !important;
+    }
+
+    .completion-suggestion-header,
+    .completion-suggestion-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 8px 10px;
+    }
+
+    .completion-suggestion-header {
+      border-bottom: 1px solid var(--border-subtle);
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+    }
+
+    .completion-suggestion-header strong {
+      color: var(--text);
+      font-weight: 650;
+    }
+
+    .completion-suggestion-text {
+      margin: 0;
+      max-height: 180px;
+      overflow: auto;
+      padding: 10px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-family: var(--font-mono);
+      font-size: var(--studio-editor-font-size);
+      line-height: 1.45;
+      color: var(--text);
+      background: var(--editor-bg);
+    }
+
+    .completion-suggestion-actions {
+      justify-content: flex-end;
+      border-top: 1px solid var(--border-subtle);
+    }
+
+    .completion-suggestion-header button,
+    .completion-suggestion-actions button {
+      padding: 4px 8px;
+      font-size: 12px;
+    }
+
     .editor-selection-actions {
       position: absolute;
       top: 12px;
@@ -2666,6 +2723,148 @@
       flex: 0 0 auto;
     }
 
+    .files-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      color: var(--text);
+      font-family: var(--font-ui);
+      font-size: var(--studio-response-font-size);
+    }
+
+    .files-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      flex-wrap: wrap;
+      padding: 10px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 10px;
+      background: var(--panel-2);
+    }
+
+    .files-path-group {
+      min-width: 0;
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+    }
+
+    .files-label {
+      flex: 0 0 auto;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--studio-info-text, var(--muted));
+    }
+
+    .files-path,
+    .files-subtitle span {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: var(--font-mono);
+    }
+
+    .files-toolbar-actions,
+    .files-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    .files-toolbar-actions button,
+    .files-actions button {
+      padding: 4px 7px;
+      font-size: 11px;
+    }
+
+    .files-subtitle,
+    .files-notice,
+    .files-empty {
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+    }
+
+    .files-notice-error {
+      color: var(--danger);
+    }
+
+    .files-list {
+      display: grid;
+      gap: 4px;
+    }
+
+    .files-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 7px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 9px;
+      background: var(--panel);
+    }
+
+    .files-row:hover {
+      border-color: var(--control-border);
+      background: var(--panel-2);
+    }
+
+    .files-open-btn {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      padding: 3px 0;
+      border: 0;
+      background: transparent;
+      color: var(--text);
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .files-open-btn:hover,
+    .files-open-btn:focus-visible {
+      outline: none;
+      color: var(--accent);
+    }
+
+    .files-icon {
+      width: 1.3em;
+      text-align: center;
+    }
+
+    .files-name {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 550;
+    }
+
+    .files-meta {
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      white-space: nowrap;
+    }
+
+    @container (max-width: 620px) {
+      .files-row,
+      .files-open-btn {
+        grid-template-columns: minmax(0, 1fr);
+      }
+      .files-actions,
+      .files-meta {
+        justify-self: start;
+      }
+    }
+
     .trace-panel {
       display: flex;
       flex-direction: column;
@@ -3624,8 +3823,8 @@
 
     .shortcuts-group dl > div {
       display: grid;
-      grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
-      gap: 12px;
+      grid-template-columns: minmax(260px, 260px) minmax(0, 1fr);
+      gap: 24px;
       align-items: baseline;
       padding: 6px 10px;
       border-top: 1px solid var(--border-subtle);
@@ -4046,13 +4245,18 @@
         justify-content: stretch;
       }
 
-      body.studio-ui-refresh .studio-refresh-pane-tools,
-      body.studio-ui-refresh .studio-refresh-toolbar-state {
+      body.studio-ui-refresh .studio-refresh-pane-tools {
         justify-content: flex-start;
         justify-items: start;
         min-width: 0;
       }
 
+      body.studio-ui-refresh .studio-refresh-toolbar-state {
+        justify-content: flex-end;
+        justify-items: end;
+        min-width: 0;
+      }
+
       body.studio-ui-refresh .studio-refresh-pane-tools,
       body.studio-ui-refresh .studio-refresh-title-group,
       body.studio-ui-refresh .studio-refresh-utility-left {
@@ -4060,7 +4264,7 @@
       }
 
       body.studio-ui-refresh .studio-refresh-toolbar-state .studio-refresh-action-line {
-        justify-content: flex-start;
+        justify-content: flex-end;
       }
     }
 
@@ -4522,6 +4726,12 @@
       font-size: 12px;
     }
 
+    body.studio-ui-refresh .studio-refresh-toolbar-actions .studio-refresh-action-line button:not(#sendRunBtn):not(#queueSteerBtn):not(#sendReplBtn):not(.request-stop-active) {
+      min-height: 26px;
+      padding: 5px 8px;
+      line-height: 1.2;
+    }
+
     body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(#sendReplBtn):not(.request-stop-active),
     body.studio-ui-refresh .studio-refresh-toolbar select {
       color: color-mix(in srgb, var(--text) 72%, var(--muted));