james.maesandClaude Opus 4.6
4bcf751887
Three coupled fixes to the processing UX: Streaming (providers/*, node-stream.ts): Native fetch() is blocked by Obsidian's Electron CSP, so every provider was silently falling back to non-streaming requestUrl. Added a Node https client (bypasses CSP) and switched all four providers to it. onToken callbacks now fire per chunk as the model streams. Cancellation (pipeline.ts, service.ts, commands.ts): Added AbortController per annotation and plumbed signal through the provider interface. Cancel now actually tears down in-flight requests via req.destroy() instead of waiting minutes for the current call to finish. Progress modal (progress-modal-state.ts, progress-modal.ts): Split logic from DOM into a pure ProgressModalStateMachine so the "Cancelling..." sticky-header and Close-re-triggers-Cancel bugs can't recur -- Cancel and Close are now structurally distinct buttons, recreated per render. Added a rotating "while we wait together..." quote panel (quotes.ts) and a placeholder line in the stream preview while waiting for the first token. Stream preview is the only element that scrolls internally; outer log fits its content. Tests: 451 passing (22 files). New coverage for state machine transitions, cancellation propagation, and the Node stream client. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
773 lines
15 KiB
CSS
773 lines
15 KiB
CSS
/* PENNY - Prose Engine for Narrative, Notes, and Yarns */
|
|
|
|
/* Setup wizard modal */
|
|
.penny-wizard-modal .modal-content {
|
|
max-width: 580px;
|
|
}
|
|
|
|
.penny-wizard-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
margin-bottom: 20px;
|
|
padding: 16px 0 12px 0;
|
|
}
|
|
|
|
.penny-wizard-dot {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.8em;
|
|
font-weight: 700;
|
|
border: 2px solid var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
background: var(--background-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.penny-wizard-dot-active {
|
|
border-color: var(--interactive-accent);
|
|
color: #fff;
|
|
background: var(--interactive-accent);
|
|
}
|
|
|
|
.penny-wizard-dot-done {
|
|
border-color: var(--color-green, #2ecc71);
|
|
color: #fff;
|
|
background: var(--color-green, #2ecc71);
|
|
}
|
|
|
|
.penny-wizard-line {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--background-modifier-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.penny-wizard-line-done {
|
|
background: var(--color-green, #2ecc71);
|
|
}
|
|
|
|
.penny-wizard-title {
|
|
text-align: center;
|
|
margin: 0 0 16px 0;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.penny-wizard-body {
|
|
min-height: 200px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.penny-wizard-body p {
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.penny-wizard-body .setting-item {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.penny-wizard-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
gap: 8px;
|
|
}
|
|
|
|
.penny-wizard-checklist {
|
|
margin: 16px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.penny-wizard-check-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.penny-wizard-check-num {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.8em;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.penny-wizard-provider-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin: 12px 0 16px 0;
|
|
}
|
|
|
|
.penny-wizard-provider-card {
|
|
border: 2px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.penny-wizard-provider-card:hover {
|
|
border-color: var(--text-accent);
|
|
}
|
|
|
|
.penny-wizard-provider-selected {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.penny-wizard-provider-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.penny-wizard-provider-name {
|
|
font-weight: 600;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.penny-wizard-provider-badge {
|
|
font-size: 0.68em;
|
|
font-weight: 600;
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
background: var(--interactive-accent);
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.penny-wizard-detected {
|
|
padding: 10px 14px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.penny-wizard-detected ul {
|
|
margin: 4px 0 0 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.penny-wizard-detected li {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.penny-wizard-summary p {
|
|
font-size: 0.95em;
|
|
padding: 8px 14px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Settings header -- hero banner */
|
|
.penny-settings-header {
|
|
margin-bottom: 16px;
|
|
padding: 24px 28px;
|
|
background: linear-gradient(135deg, var(--background-secondary) 0%, var(--background-primary) 100%);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.penny-title-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
.penny-settings-header h1 {
|
|
margin: 0 0 2px 0;
|
|
font-size: 2.2em;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.penny-version-badge {
|
|
font-size: 0.75em;
|
|
color: var(--text-muted);
|
|
background: var(--background-modifier-border);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.penny-settings-subtitle {
|
|
margin-top: 0;
|
|
margin-bottom: 12px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-size: 1.05em;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.penny-settings-header .setting-item-description {
|
|
margin-bottom: 14px;
|
|
font-size: 0.95em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.penny-settings-links {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.penny-settings-links a {
|
|
color: var(--text-accent);
|
|
text-decoration: none;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.penny-settings-links a:hover {
|
|
background: var(--background-modifier-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.penny-settings-links span {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* Model lists in provider sections */
|
|
.penny-model-list {
|
|
margin: 4px 0 12px 0;
|
|
padding: 8px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.penny-model-row {
|
|
padding: 3px 0;
|
|
}
|
|
|
|
.penny-model-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.penny-model-meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Settings collapsible sections */
|
|
.penny-settings-header + hr + details,
|
|
.penny-settings-header + hr ~ details {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.penny-settings-header + hr ~ details > summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
padding: 8px 0;
|
|
user-select: none;
|
|
}
|
|
|
|
.penny-settings-header + hr ~ details > summary:hover {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.penny-settings-header + hr ~ details[open] > summary {
|
|
margin-bottom: 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.penny-status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.penny-status-bar-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.penny-processing-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.penny-processing-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--text-faint);
|
|
border-top-color: var(--text-accent);
|
|
border-radius: 50%;
|
|
animation: penny-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes penny-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.penny-init-modal .setting-item {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.penny-init-modal .setting-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Commands reference table */
|
|
.penny-commands-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 8px 0 12px 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.penny-commands-table th {
|
|
text-align: left;
|
|
padding: 6px 10px;
|
|
border-bottom: 2px solid var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.penny-commands-table td {
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.penny-commands-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.penny-command-name {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.9em;
|
|
white-space: nowrap;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.penny-help-tip {
|
|
margin-top: 12px;
|
|
padding: 8px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Progress modal.
|
|
Size rule lives on the OUTER wrapper (`.penny-progress-modal-wrapper`,
|
|
applied to Obsidian's `this.modalEl`) because `min-width` on the inner
|
|
contentEl doesn't reliably force the whole modal to grow. `max-width`
|
|
keeps it sane on narrow vault layouts. */
|
|
.penny-progress-modal-wrapper {
|
|
width: 760px;
|
|
max-width: 92vw;
|
|
}
|
|
|
|
.penny-progress-modal {
|
|
width: 100%;
|
|
}
|
|
|
|
.penny-progress-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.penny-progress-header {
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.penny-progress-timer {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.9em;
|
|
color: var(--text-accent);
|
|
font-weight: 500;
|
|
flex: 0 0 auto;
|
|
margin-left: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.penny-inline-spinner {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid var(--text-faint);
|
|
border-top-color: var(--text-accent);
|
|
border-radius: 50%;
|
|
animation: penny-spin 0.8s linear infinite;
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.penny-waiting-text {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Outer log container. Intentionally does NOT scroll -- we want the spinner
|
|
line AND the stream preview's top to stay visible. The stream preview
|
|
itself has `overflow-y: auto` for token-level scrolling. */
|
|
.penny-progress-log {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.85em;
|
|
margin-bottom: 12px;
|
|
padding: 8px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.penny-progress-line {
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.penny-progress-line:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.penny-progress-active {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.penny-progress-done {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.penny-progress-error {
|
|
color: var(--text-error, #e74c3c);
|
|
}
|
|
|
|
/* Streaming preview -- live LLM output.
|
|
Uses `height` (not `max-height`) so the box reserves its full size from the
|
|
moment it appears. This prevents the modal from jumping around as tokens
|
|
arrive, and gives the user a stable reading area. Auto-scroll (JS side)
|
|
keeps the newest tokens visible at the bottom. */
|
|
.penny-stream-preview {
|
|
height: 320px;
|
|
overflow-y: auto;
|
|
padding: 8px 12px;
|
|
margin: 4px 0 8px 0;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
line-height: 1.5;
|
|
color: var(--text-normal);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Error modal */
|
|
.penny-error-modal {
|
|
min-width: 450px;
|
|
}
|
|
|
|
.penny-error-box {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--text-error, #e74c3c);
|
|
border-radius: 6px;
|
|
padding: 12px 16px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.penny-error-message {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
margin: 0;
|
|
}
|
|
|
|
.penny-error-details {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.penny-error-details summary {
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.penny-error-details pre {
|
|
background: var(--background-secondary);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.penny-error-log-path {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.penny-progress-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* "While you wait..." quote panel
|
|
Visible during active processing, hidden in terminal states (controlled by
|
|
inline style set in progress-modal.ts render()). Intentionally quiet --
|
|
should feel like atmosphere, not UI demanding attention. */
|
|
.penny-quote-panel {
|
|
margin: 12px 0;
|
|
padding: 14px 18px;
|
|
background: var(--background-secondary);
|
|
border-left: 3px solid var(--interactive-accent);
|
|
border-radius: 4px;
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
transition: opacity 400ms ease;
|
|
}
|
|
|
|
.penny-quote-panel-label {
|
|
font-size: 0.72em;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-faint);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.penny-quote-text {
|
|
font-size: 0.95em;
|
|
line-height: 1.5;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.penny-quote-author {
|
|
font-size: 0.8em;
|
|
font-style: normal;
|
|
text-align: right;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* File conflict modal */
|
|
.penny-conflict-box {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 12px 16px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.penny-conflict-path {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
word-break: break-all;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
/* Model routing grid -- compact tier rows */
|
|
.penny-route-grid {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin: 8px 0 16px 0;
|
|
}
|
|
|
|
.penny-route-grid .setting-item {
|
|
padding: 8px 14px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin: 0;
|
|
}
|
|
|
|
.penny-route-grid .setting-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.penny-route-grid .setting-item-info {
|
|
flex: 0 0 auto;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.penny-route-grid .setting-item-name {
|
|
font-size: 0.92em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.penny-route-grid .setting-item-description {
|
|
display: none;
|
|
}
|
|
|
|
.penny-route-grid .setting-item-control {
|
|
gap: 8px;
|
|
}
|
|
|
|
.penny-route-grid .setting-item-control select {
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.penny-route-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 14px;
|
|
background: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
font-size: 0.78em;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.penny-route-header span:first-child {
|
|
flex: 0 0 140px;
|
|
}
|
|
|
|
.penny-route-divider {
|
|
border-bottom: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.penny-route-muted {
|
|
color: var(--text-faint);
|
|
font-size: 0.82em;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Companion plugins section */
|
|
.penny-companion-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.penny-companion-card {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 14px 18px;
|
|
background: var(--background-primary);
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.penny-companion-card:hover {
|
|
border-color: var(--text-accent);
|
|
}
|
|
|
|
.penny-companion-dimmed {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.penny-companion-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.penny-companion-title-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.penny-companion-name {
|
|
font-weight: 600;
|
|
font-size: 1.02em;
|
|
}
|
|
|
|
.penny-companion-badge {
|
|
font-size: 0.72em;
|
|
font-weight: 600;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.penny-badge-installed {
|
|
background: var(--color-green, #2ecc71);
|
|
color: #fff;
|
|
}
|
|
|
|
.penny-badge-missing {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.penny-companion-desc {
|
|
font-size: 0.88em;
|
|
color: var(--text-muted);
|
|
margin: 0 0 10px 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.penny-companion-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.penny-companion-actions .mod-cta {
|
|
font-size: 0.85em;
|
|
padding: 4px 14px;
|
|
}
|
|
|
|
.penny-companion-link {
|
|
font-size: 0.85em;
|
|
color: var(--text-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.penny-companion-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.penny-companion-success {
|
|
margin-top: 8px;
|
|
padding: 6px 12px;
|
|
background: var(--color-green, #2ecc71);
|
|
color: #fff;
|
|
border-radius: 6px;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
}
|