jupyterlab-codex-sidebar 0.1.4 → 0.1.6

package/style/index.css

@@ -123,7 +123,7 @@
   justify-self: end;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 0;
 }
 
 @container (max-width: 420px) {
@@ -142,7 +142,7 @@
   }
 
   .jp-CodexChat-header-actions {
-    gap: 6px;
+    gap: 0;
   }
 
   .jp-CodexChat-notebook {
@@ -770,6 +770,7 @@
 .jp-CodexChat-assistant {
   align-self: flex-start;
   border: 0;
+  background: transparent;
   padding-left: 0;
   padding-right: 0;
 }
@@ -905,6 +906,133 @@
   margin-top: 8px;
 }
 
+.jp-CodexChat-selectionToggle {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  position: absolute;
+  right: calc(var(--cdx-selection-btn-size, 2em) * -0.14);
+  bottom: calc(var(--cdx-selection-btn-size, 2em) * -0.36);
+  z-index: 1;
+  width: var(--cdx-selection-btn-size, 2em) !important;
+  height: var(--cdx-selection-btn-size, 2em) !important;
+  min-width: var(--cdx-selection-btn-size, 2em) !important;
+  min-height: var(--cdx-selection-btn-size, 2em) !important;
+  max-width: var(--cdx-selection-btn-size, 2em) !important;
+  max-height: var(--cdx-selection-btn-size, 2em) !important;
+  border-radius: 50% !important;
+  overflow: hidden;
+  border: 2px solid color-mix(in srgb, var(--cdx-surface) 94%, #ffffff);
+  background: #101010;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  line-height: 0;
+  font-size: calc(var(--cdx-selection-btn-size, 2em) * 0.48);
+  cursor: pointer;
+  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.3);
+  opacity: 1;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease,
+    opacity 120ms ease;
+}
+
+.jp-CodexChat-selectionToggle svg {
+  display: block;
+  transition: transform 120ms ease;
+}
+
+.jp-CodexChat-selectionToggle:hover {
+  background: #1a1a1a;
+  border-color: color-mix(in srgb, #ffffff 94%, var(--cdx-border));
+  transform: translateY(-1px);
+}
+
+.jp-CodexChat-selectionToggle.is-open {
+  background: #000000;
+  border-color: #ffffff;
+}
+
+.jp-CodexChat-selectionToggle.is-open svg {
+  transform: rotate(45deg);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .jp-CodexChat-user.has-selection-preview .jp-CodexChat-selectionToggle {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(2px) scale(0.94);
+  }
+
+  .jp-CodexChat-user.has-selection-preview:hover .jp-CodexChat-selectionToggle,
+  .jp-CodexChat-user.has-selection-preview:focus-within .jp-CodexChat-selectionToggle,
+  .jp-CodexChat-user.has-selection-preview.is-selection-open .jp-CodexChat-selectionToggle {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  .jp-CodexChat-user.has-selection-preview .jp-CodexChat-selectionToggle:hover {
+    transform: translateY(-1px) scale(1);
+  }
+}
+
+.jp-CodexChat-selectionCard {
+  margin-top: 0;
+  width: auto;
+  padding: 9px 11px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--cdx-border) 72%, transparent);
+  background: color-mix(in srgb, var(--cdx-surface-2) 82%, transparent);
+}
+
+.jp-CodexChat-contextSection + .jp-CodexChat-contextSection {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid color-mix(in srgb, var(--cdx-border) 66%, transparent);
+}
+
+.jp-CodexChat-selectionMeta {
+  font-family: var(--cdx-mono);
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--cdx-muted);
+}
+
+.jp-CodexChat-selectionText {
+  margin-top: 4px;
+  font-family: var(--cdx-mono);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--cdx-text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.jp-CodexChat-selectionCode {
+  margin-top: 6px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--cdx-border) 78%, transparent);
+  background: color-mix(in srgb, var(--cdx-surface) 86%, var(--cdx-surface-2));
+  padding: 8px 10px;
+  overflow: auto;
+}
+
+.jp-CodexChat-selectionCode code.hljs {
+  white-space: pre;
+}
+
+.jp-CodexChat-message.has-selection-preview {
+  overflow: visible;
+}
+
+.jp-CodexChat-user.has-selection-preview {
+  --cdx-selection-btn-size: clamp(1.85em, 2.08em, 2.28em);
+  margin-bottom: calc(var(--cdx-selection-btn-size) * 0.45);
+}
+
 .jp-CodexChat-attachmentPill {
   display: inline-flex;
   align-items: center;
@@ -957,10 +1085,12 @@
 
 .jp-CodexMarkdown code {
   font-family: var(--cdx-mono);
-  font-size: 11px;
+  font-size: 8px;
   color: var(--cdx-code-text);
-  padding: 2px 7px;
-  border-radius: 10px;
+  padding: 2px 5px;
+  margin-left: 2px;
+  margin-right: 2px;
+  border-radius: 8px;
   border: 0;
   background: color-mix(in srgb, var(--cdx-surface-2) 78%, transparent);
   line-height: 1.45;
@@ -971,6 +1101,11 @@
   word-break: break-word;
 }
 
+.jp-CodexChat .jp-CodexMarkdown code {
+  font-family: var(--cdx-mono) !important;
+  font-size: 12px !important;
+}
+
 .jp-CodexMarkdown pre {
   margin: 10px 0 0;
   padding: 10px;
@@ -1108,6 +1243,16 @@
   color: var(--cdx-code-operator);
 }
 
+/* Fallback for highlight.js token classes we do not theme explicitly. */
+.jp-CodexCodeBlock .hljs-subst,
+.jp-CodexCodeBlock .hljs-type,
+.jp-CodexCodeBlock .hljs-name,
+.jp-CodexCodeBlock .hljs-class,
+.jp-CodexCodeBlock .hljs-tag,
+.jp-CodexCodeBlock .hljs-link {
+  color: var(--cdx-code-text);
+}
+
 .jp-CodexCodeBlockCopyBtn {
   opacity: 0;
   pointer-events: none;
@@ -1156,7 +1301,7 @@
   box-shadow: none;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 2px;
 }
 
 .jp-CodexComposer:focus-within {
@@ -1168,13 +1313,13 @@
   width: 100%;
   box-sizing: border-box;
   resize: none;
-  min-height: calc(1.55em + 12px);
-  max-height: calc(1.55em * 3 + 12px);
+  min-height: calc(1.45em + 8px);
+  max-height: calc(1.45em * 3 + 8px);
   border: 0;
   border-radius: 14px;
-  padding: 6px 10px;
+  padding: 4px 10px;
   font-size: 13px;
-  line-height: 1.55;
+  line-height: 1.45;
   background: transparent;
   color: var(--cdx-text);
   outline: none;
@@ -1189,6 +1334,83 @@
   opacity: 0.7;
 }
 
+.jp-CodexComposer-cellAttachmentWrap {
+  display: flex;
+  align-items: center;
+  max-height: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+  transform-origin: left center;
+  overflow: hidden;
+  pointer-events: none;
+  transition: max-height 170ms ease, margin-bottom 170ms ease, opacity 170ms ease, transform 170ms ease;
+}
+
+.jp-CodexComposer-cellAttachmentWrap.is-visible {
+  max-height: 32px;
+  margin-bottom: 6px;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.jp-CodexComposer-cellAttachment {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: fit-content;
+  max-width: 100%;
+  min-height: 24px;
+  padding: 0 7px 0 6px;
+  border-radius: 9999px !important;
+  border: 1px solid transparent;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--cdx-accent) 9%, var(--cdx-surface));
+  color: color-mix(in srgb, var(--cdx-accent) 80%, var(--cdx-text));
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+  animation: cdx-cell-attachment-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.jp-CodexComposer-cellAttachment:not(.is-off) {
+  border-color: color-mix(in srgb, var(--cdx-accent) 42%, var(--cdx-border));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cdx-accent) 16%, transparent);
+}
+
+.jp-CodexComposer-cellAttachment.is-off {
+  background: color-mix(in srgb, var(--cdx-border) 28%, var(--cdx-surface));
+  color: color-mix(in srgb, var(--cdx-text) 72%, var(--cdx-muted));
+}
+
+.jp-CodexComposer-cellAttachment:hover,
+.jp-CodexComposer-cellAttachment:focus-within {
+  background: color-mix(in srgb, var(--cdx-accent) 80%, var(--cdx-text));
+  color: var(--cdx-surface);
+}
+
+.jp-CodexComposer-cellAttachmentLabel {
+  min-width: 0;
+  white-space: nowrap;
+}
+
+@keyframes cdx-cell-attachment-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .jp-CodexComposer-attachments {
   display: flex;
   flex-wrap: wrap;
@@ -1196,6 +1418,55 @@
   padding: 0 4px;
 }
 
+.jp-CodexComposer-queued {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  margin: 0 2px 4px;
+  padding: 4px 8px;
+  border: 1px solid color-mix(in srgb, var(--cdx-accent) 30%, var(--cdx-border));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--cdx-accent) 10%, var(--cdx-surface));
+  color: color-mix(in srgb, var(--cdx-accent) 82%, var(--cdx-text));
+  font-size: 11px;
+}
+
+.jp-CodexComposer-queuedLabel {
+  flex: 0 0 auto;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.jp-CodexComposer-queuedText {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jp-CodexComposer-queuedRemove {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--cdx-accent) 35%, var(--cdx-border));
+  background: color-mix(in srgb, var(--cdx-surface) 84%, transparent);
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+.jp-CodexComposer-queuedRemove:hover:not(:disabled) {
+  background: var(--cdx-surface);
+  border-color: color-mix(in srgb, var(--cdx-accent) 55%, var(--cdx-border));
+}
+
 .jp-CodexComposer-attachment {
   position: relative;
   width: 64px;
@@ -1241,7 +1512,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding-top: 8px;
+  padding-top: 0;
 }
 
 .jp-CodexComposer-toolbarLeft {
@@ -1260,6 +1531,65 @@
   flex-shrink: 0;
 }
 
+.jp-CodexContextWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.jp-CodexContextBtn {
+  color: color-mix(in srgb, var(--cdx-muted) 90%, var(--cdx-text));
+}
+
+.jp-CodexContextBtn.is-stale:not(:disabled) {
+  opacity: 0.72;
+}
+
+.jp-CodexContextPopover {
+  min-width: 176px;
+  width: fit-content;
+  z-index: 35;
+  max-width: min(280px, calc(100vw - 24px));
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--cdx-border) 85%, transparent);
+  background: color-mix(in srgb, var(--cdx-surface) 94%, transparent);
+  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.2);
+  backdrop-filter: blur(10px);
+  padding: 8px 9px;
+  display: grid;
+  gap: 6px;
+}
+
+.jp-CodexContextPopoverTitle {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--cdx-text);
+}
+
+.jp-CodexContextPopoverRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--cdx-muted);
+}
+
+.jp-CodexContextPopoverRow strong {
+  color: var(--cdx-text);
+  font-family: var(--cdx-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.jp-CodexContextPopoverMeta {
+  padding-top: 2px;
+  border-top: 1px solid color-mix(in srgb, var(--cdx-border) 80%, transparent);
+  font-size: 10px;
+  color: color-mix(in srgb, var(--cdx-muted) 90%, var(--cdx-text));
+}
+
 .jp-CodexComposer-hint {
   font-size: 11px;
   color: var(--cdx-muted);
@@ -1530,6 +1860,15 @@
   --cdx-good: var(--jp-success-color1, #22c55e);
   --cdx-warn: var(--jp-warn-color1, #f97316);
   --cdx-bad: var(--jp-error-color1, #ef4444);
+  --cdx-code-text: var(--cdx-text);
+  --cdx-code-comment: #6b7280;
+  --cdx-code-keyword: #7c3aed;
+  --cdx-code-string: #0f766e;
+  --cdx-code-number: #b45309;
+  --cdx-code-function: #0f766e;
+  --cdx-code-variable: #1d4ed8;
+  --cdx-code-operator: #334155;
+  --cdx-code-title: #0f172a;
 
   --cdx-radius: 14px;
   --cdx-radius-sm: 10px;
@@ -1547,6 +1886,108 @@
   color: var(--cdx-text);
 }
 
+.jp-mod-theme-light .jp-CodexMenuPortal {
+  --cdx-code-text: #0f172a;
+  --cdx-code-comment: #6b7280;
+  --cdx-code-keyword: #7c3aed;
+  --cdx-code-string: #0f766e;
+  --cdx-code-number: #b45309;
+  --cdx-code-function: #0f766e;
+  --cdx-code-variable: #1d4ed8;
+  --cdx-code-operator: #334155;
+  --cdx-code-title: #0f172a;
+}
+
+.jp-mod-theme-dark .jp-CodexMenuPortal {
+  --cdx-code-text: #e2e8f0;
+  --cdx-code-comment: #94a3b8;
+  --cdx-code-keyword: #c084fc;
+  --cdx-code-string: #5eead4;
+  --cdx-code-number: #fbbf24;
+  --cdx-code-function: #4ade80;
+  --cdx-code-variable: #93c5fd;
+  --cdx-code-operator: #cbd5e1;
+  --cdx-code-title: #f8fafc;
+}
+
+.jp-CodexMenu.jp-CodexChat-selectionPopover {
+  min-width: min(18ch, calc(100vw - 24px)) !important;
+  width: fit-content !important;
+  max-width: min(600px, calc(100vw - 24px)) !important;
+  max-height: calc(100vh - 48px) !important;
+  max-height: calc(100dvh - 48px) !important;
+  padding: 8px !important;
+  overflow: auto !important;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.jp-CodexMenu.jp-CodexCellAttachmentPopoverMenu {
+  min-width: 220px;
+  width: fit-content;
+  max-width: min(320px, calc(100vw - 24px));
+  padding: 8px;
+  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.16);
+}
+
+.jp-CodexMenu.jp-CodexContextPopover {
+  min-width: 176px;
+  width: fit-content;
+  max-width: min(280px, calc(100vw - 24px));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--cdx-surface) 94%, transparent);
+  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.2);
+  padding: 8px 9px;
+}
+
+.jp-CodexCellAttachmentPopoverCard {
+  display: grid;
+  gap: 6px;
+  padding: 2px;
+}
+
+.jp-CodexCellAttachmentPopoverTitle {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--cdx-text);
+}
+
+.jp-CodexCellAttachmentPopoverRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--cdx-muted);
+}
+
+.jp-CodexCellAttachmentPopoverRow strong {
+  color: var(--cdx-text);
+  font-family: var(--cdx-mono);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.jp-CodexCellAttachmentDot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  display: inline-block;
+  border: 1px solid color-mix(in srgb, var(--cdx-border) 80%, transparent);
+}
+
+.jp-CodexCellAttachmentDot.is-on {
+  background: color-mix(in srgb, var(--cdx-good) 88%, var(--cdx-text));
+  border-color: color-mix(in srgb, var(--cdx-good) 48%, var(--cdx-border));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cdx-good) 18%, transparent);
+}
+
+.jp-CodexCellAttachmentDot.is-off {
+  background: color-mix(in srgb, var(--cdx-muted) 42%, var(--cdx-surface));
+  border-color: color-mix(in srgb, var(--cdx-border) 88%, transparent);
+}
+
 .jp-CodexUsageBtn {
   position: relative;
 }
@@ -1564,6 +2005,19 @@
   color: color-mix(in srgb, var(--cdx-bad) 85%, var(--cdx-text));
 }
 
+.jp-CodexPermissionBtn.is-warning:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: color-mix(in srgb, #f5b301 72%, var(--cdx-text));
+}
+
+.jp-CodexPermissionBtn.is-warning:hover:not(:disabled),
+.jp-CodexPermissionBtn.is-warning.is-open:not(:disabled) {
+  border-color: color-mix(in srgb, #f5b301 55%, var(--cdx-border));
+  background: color-mix(in srgb, #f5b301 14%, var(--cdx-surface));
+  color: color-mix(in srgb, #f5b301 84%, var(--cdx-text));
+}
+
 .jp-CodexUsageBtn.is-stale:not(:disabled),
 .jp-CodexUsageBtn.is-stale:hover:not(:disabled),
 .jp-CodexUsageBtn.is-stale.is-open:not(:disabled) {
@@ -1775,15 +2229,30 @@
   color: #ffffff;
 }
 
+.jp-CodexSendBtn.is-queue:not(:disabled) {
+  border-color: color-mix(in srgb, var(--cdx-accent) 70%, var(--cdx-border));
+  background: color-mix(in srgb, var(--cdx-accent) 92%, #0f172a);
+  color: #ffffff;
+}
+
 .jp-CodexSendBtn:hover:not(:disabled) {
   border-color: color-mix(in srgb, #000000 92%, var(--cdx-border));
   background: color-mix(in srgb, #000000 92%, #222222);
 }
 
+.jp-CodexSendBtn.is-queue:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--cdx-accent) 86%, var(--cdx-border));
+  background: color-mix(in srgb, var(--cdx-accent) 96%, #0f172a);
+}
+
 .jp-CodexSendBtn:active:not(:disabled) {
   background: color-mix(in srgb, #000000 88%, #222222);
 }
 
+.jp-CodexSendBtn.is-queue:active:not(:disabled) {
+  background: color-mix(in srgb, var(--cdx-accent) 88%, #0f172a);
+}
+
 .jp-CodexSendBtn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdx-accent) 22%, transparent);

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}