@workflow-code/cli 0.2.4-20261013004.codex-studio-integration → 0.2.4-20261013006.codex-studio-integration

package/dist/web/workflow-workspace.css

@@ -70,6 +70,7 @@ summary:focus-visible {
 }
 .project-heading {
   min-width: 0;
+  flex: 1;
 }
 #assistant-folder {
   display: block;
@@ -107,6 +108,9 @@ h1 {
 .project-name {
   color: var(--muted);
   font-size: 10px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 .toolbar-actions {
@@ -131,6 +135,15 @@ h1 {
 .icon-button:hover:not(:disabled) {
   background: var(--vscode-toolbar-hoverBackground);
 }
+.usage-button {
+  width: auto;
+  gap: 6px;
+  padding: 0 8px;
+  color: var(--vscode-textLink-foreground);
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+}
 .toolbar-actions [aria-expanded=true] {
   background: var(--vscode-toolbar-activeBackground, var(--vscode-toolbar-hoverBackground));
 }
@@ -1304,6 +1317,52 @@ main {
   overflow: auto;
   padding: 16px;
 }
+.project-information-name {
+  margin: 0 0 8px;
+  font-size: 18px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.project-information-description {
+  margin: 0 0 16px;
+  color: var(--muted);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.project-information-section {
+  padding: 10px 0;
+  border-top: 1px solid var(--border);
+}
+.project-information-section summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  font-weight: 500;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.project-information-section[open] summary > .codicon {
+  transform: rotate(90deg);
+}
+.project-information-section dl {
+  display: grid;
+  grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
+  gap: 12px 16px;
+  margin: 12px 0 4px;
+  line-height: 1.5;
+}
+.project-information-section dt {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.project-information-section dd {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
 .action-dialog {
   width: min(380px, calc(100vw - 32px));
 }
@@ -1348,25 +1407,122 @@ main {
 .permissions-table td:not(:first-child) {
   text-align: center;
 }
+.usage-balance {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px 10px;
+  padding: 4px 0 20px;
+}
+.usage-balance > span {
+  flex-basis: 100%;
+  color: var(--muted);
+  font-size: 12px;
+}
+.usage-balance > strong {
+  font-size: 28px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.usage-balance small {
+  color: var(--muted);
+  font-size: 11px;
+}
+.usage-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 52px;
+  margin: 0;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.usage-status.error {
+  color: var(--vscode-errorForeground);
+}
+.usage-status > .codicon-loading {
+  animation: spin 1.2s linear infinite;
+}
 .usage-plan {
-  padding: 12px 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  padding: 18px 0;
   border-top: 1px solid var(--border);
 }
 .usage-plan h3 {
-  margin: 0 0 12px;
-  font-size: 13px;
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: 14px;
+  overflow-wrap: anywhere;
 }
-.usage-plan > div {
+.usage-period {
   display: grid;
-  gap: 6px;
-  margin: 12px 0;
+  align-content: start;
+  gap: 10px;
+  min-width: 0;
   font-size: 12px;
 }
+.usage-period-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.usage-period-heading > span {
+  color: var(--muted);
+}
+.usage-period-amount {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.usage-period-amount > strong {
+  font-size: 18px;
+  font-weight: 600;
+}
+.usage-period-amount > span,
+.usage-period-remaining {
+  color: var(--muted);
+}
 .usage-plan progress {
+  appearance: none;
   width: 100%;
-  height: 6px;
+  height: 8px;
+  border: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--vscode-textCodeBlock-background);
+  color: var(--vscode-progressBar-background);
   accent-color: var(--vscode-progressBar-background);
 }
+.usage-plan progress::-webkit-progress-bar {
+  background: var(--vscode-textCodeBlock-background);
+}
+.usage-plan progress::-webkit-progress-value {
+  background: var(--vscode-progressBar-background);
+}
+.usage-plan progress::-moz-progress-bar {
+  background: var(--vscode-progressBar-background);
+}
+.usage-period[data-status=near-limit] {
+  --vscode-progressBar-background: var(--vscode-editorWarning-foreground);
+}
+.usage-period[data-status=exhausted] {
+  --vscode-progressBar-background: var(--vscode-errorForeground);
+}
+.usage-period[data-status=near-limit] .usage-period-heading > strong {
+  color: var(--vscode-editorWarning-foreground);
+}
+.usage-period[data-status=exhausted] .usage-period-heading > strong,
+.usage-period[data-status=exhausted] .usage-period-remaining {
+  color: var(--vscode-errorForeground);
+}
 .content-search {
   position: absolute;
   top: 4px;
@@ -1537,6 +1693,21 @@ textarea::placeholder {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.param-action-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--vscode-editor-foreground);
+}
+.param-action:has(.param-action-summary:not([hidden])) .param-action-label {
+  flex-shrink: 0;
+  max-width: 50%;
+  font-weight: 500;
+}
+.param-action-ai {
+  color: var(--vscode-textLink-foreground);
+}
 .param-action .codicon {
   flex-shrink: 0;
   font-size: 13px;
@@ -1733,12 +1904,9 @@ textarea::placeholder {
 }
 @media (max-width: 680px) {
   #app.menu-open {
-    grid-template-areas: "menu" "main";
+    grid-template-areas: "toolbar" "menu" "main";
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-  .menu-open .toolbar {
-    display: none;
+    grid-template-rows: auto auto minmax(0, 1fr);
   }
   .toolbar {
     padding: 8px 12px;
@@ -1750,6 +1918,9 @@ textarea::placeholder {
   .project-name {
     display: none;
   }
+  .project-icon {
+    display: none;
+  }
   .toolbar-actions {
     gap: 1px;
   }
@@ -1781,6 +1952,15 @@ textarea::placeholder {
     padding: 8px 18px 10px;
   }
 }
+@media (max-width: 520px) {
+  .usage-plan {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 18px;
+  }
+  .usage-period-amount > strong {
+    font-size: 20px;
+  }
+}
 @media (max-width: 420px) {
   .toolbar {
     padding: 8px;
@@ -1788,6 +1968,14 @@ textarea::placeholder {
   .project-title {
     gap: 2px;
   }
+  .usage-button {
+    gap: 4px;
+    padding-inline: 5px;
+  }
+  .project-information-section dl {
+    grid-template-columns: minmax(72px, 95px) minmax(0, 1fr);
+    gap: 10px;
+  }
   h1 {
     font-size: 13px;
   }