mirror of
https://github.com/blamouche/obsidian-any-ai-code.git
synced 2026-07-22 06:53:38 +00:00
560735b898
The session tab status dot now reflects live CLI activity rather than just whether the process is alive: green = a manual session's AI is working, purple = an automation session's AI is working, gray = the CLI is idle (finished its turn) or stopped. CliSession tracks activity continuously — output flowing = working, quiet for ~5s = idle — and notifies the view via onActivityChange to repaint the dot. Add a new opt-in setting "Auto-close automation sessions when idle": closes an automation tab once its CLI goes quiet after the prompt ran, even if the process stays interactive (Claude/Codex). It complements the existing on-exit close (renamed "...on exit"); both are kept. Idle-close is armed only after the prompt is sent and driven by real CLI output, so boot and slow first responses don't close the tab early. Extract the pure tabDotClass helper to session-utils.ts with tests. Update README. Bump to 0.2.11. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
702 lines
14 KiB
CSS
702 lines
14 KiB
CSS
.claude-cli-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.claude-cli-toolbar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.claude-cli-toolbar-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claude-cli-toolbar button {
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--interactive-normal);
|
|
color: var(--text-normal);
|
|
border-radius: 6px;
|
|
padding: 5px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 120ms ease,
|
|
border-color 120ms ease,
|
|
color 120ms ease,
|
|
box-shadow 120ms ease,
|
|
transform 80ms ease;
|
|
}
|
|
|
|
.claude-cli-toolbar button:hover {
|
|
background: var(--interactive-hover);
|
|
border-color: var(--background-modifier-border-hover, var(--background-modifier-border));
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.claude-cli-toolbar button:active {
|
|
transform: translateY(1px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.claude-cli-toolbar button:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.claude-cli-toolbar button:disabled,
|
|
.claude-cli-toolbar button[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.claude-cli-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.claude-cli-btn-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
transition: color 120ms ease;
|
|
}
|
|
|
|
.claude-cli-btn-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke-width: 2.1;
|
|
}
|
|
|
|
.claude-cli-toolbar button:hover .claude-cli-btn-icon {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-primary {
|
|
border-color: color-mix(in srgb, var(--color-green, #16a34a) 45%, var(--background-modifier-border));
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-primary .claude-cli-btn-icon {
|
|
color: var(--color-green, #16a34a);
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-primary:hover {
|
|
background: var(--color-green, #16a34a);
|
|
border-color: var(--color-green, #16a34a);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-primary:hover .claude-cli-btn-icon {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-danger {
|
|
border-color: color-mix(in srgb, var(--text-error, #d9534f) 35%, var(--background-modifier-border));
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-danger .claude-cli-btn-icon {
|
|
color: var(--text-error, #d9534f);
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-danger:hover {
|
|
background: var(--text-error, #d9534f);
|
|
border-color: var(--text-error, #d9534f);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-danger:hover .claude-cli-btn-icon {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-info {
|
|
border-color: color-mix(in srgb, var(--color-blue, #2563eb) 35%, var(--background-modifier-border));
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-info .claude-cli-btn-icon {
|
|
color: var(--color-blue, #2563eb);
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-info:hover {
|
|
background: var(--color-blue, #2563eb);
|
|
border-color: var(--color-blue, #2563eb);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.claude-cli-toolbar .claude-cli-btn-info:hover .claude-cli-btn-icon {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.claude-cli-runtime-picker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--interactive-normal);
|
|
border-radius: 6px;
|
|
padding: 3px 8px;
|
|
transition:
|
|
background-color 120ms ease,
|
|
border-color 120ms ease,
|
|
box-shadow 120ms ease;
|
|
}
|
|
|
|
.claude-cli-runtime-picker:hover {
|
|
background: var(--interactive-hover);
|
|
border-color: var(--background-modifier-border-hover, var(--background-modifier-border));
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.claude-cli-runtime-picker:focus-within {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 30%, transparent);
|
|
}
|
|
|
|
.claude-cli-runtime-picker-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claude-cli-runtime-picker-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke-width: 2.1;
|
|
}
|
|
|
|
.claude-cli-runtime-select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
background-image: none;
|
|
color: var(--text-normal);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
padding: 3px 0;
|
|
cursor: pointer;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.claude-cli-runtime-select:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.claude-cli-runtime-picker-chevron {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claude-cli-runtime-picker-chevron svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
stroke-width: 2.1;
|
|
}
|
|
|
|
.claude-cli-runtime-picker:hover .claude-cli-runtime-picker-chevron {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claude-cli-runtimes-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claude-cli-runtime-item {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.claude-cli-runtime-item .setting-item-control {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
.claude-cli-runtime-command-input {
|
|
flex: 1 1 240px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.claude-cli-status {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ----- Session tab bar ----- */
|
|
.claude-cli-tabbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.claude-cli-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px 6px 0 0;
|
|
background: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.claude-cli-tab:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claude-cli-tab.is-active {
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
border-bottom-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claude-cli-tab-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claude-cli-tab-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.claude-cli-tab-dot.is-working {
|
|
background: var(--color-green, #3fb950);
|
|
}
|
|
|
|
.claude-cli-tab-dot.is-automation {
|
|
background: var(--color-purple, #a371f7);
|
|
}
|
|
|
|
.claude-cli-tab-dot.is-idle {
|
|
background: var(--text-faint);
|
|
}
|
|
|
|
.claude-cli-tab-auto {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.claude-cli-tab-auto svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claude-cli-tab-close {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.claude-cli-tab-close:hover {
|
|
opacity: 1;
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claude-cli-tab-close svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.claude-cli-tab-new {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.claude-cli-tab-new:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* ----- Terminals container ----- */
|
|
.claude-cli-terminals {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.claude-cli-empty-hint {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.claude-cli-empty-hint.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.claude-cli-terminal {
|
|
flex: 1;
|
|
min-height: 220px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claude-cli-terminal.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 8px;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-helpers {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-helper-textarea {
|
|
position: absolute;
|
|
opacity: 0;
|
|
left: -9999em;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
z-index: -5;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
resize: none;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Match xterm default accessibility styles to avoid visible ghost text. */
|
|
.claude-cli-terminal .xterm .xterm-accessibility,
|
|
.claude-cli-terminal .xterm .xterm-message {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-accessibility-tree *::selection {
|
|
color: transparent;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-accessibility-tree {
|
|
font-family: monospace;
|
|
user-select: text;
|
|
white-space: pre;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-accessibility-tree > div {
|
|
transform-origin: left;
|
|
width: fit-content;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .live-region {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-char-measure-element {
|
|
display: inline-block;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -9999em;
|
|
line-height: normal;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-viewport {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow-y: auto;
|
|
background-color: inherit;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-screen {
|
|
position: relative;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm .xterm-screen canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.claude-cli-terminal .xterm-cursor-layer {
|
|
position: relative;
|
|
}
|
|
|
|
.any-ai-cli-automations-modal {
|
|
max-width: 760px;
|
|
width: min(760px, 90vw);
|
|
}
|
|
|
|
.any-ai-cli-am-tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.any-ai-cli-am-tab {
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--text-muted);
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.any-ai-cli-am-tab:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.any-ai-cli-am-tab.is-active {
|
|
color: var(--text-normal);
|
|
border-bottom-color: var(--interactive-accent);
|
|
}
|
|
|
|
.any-ai-cli-am-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.any-ai-cli-am-info {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.any-ai-cli-am-empty {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.any-ai-cli-am-errors {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-left: 3px solid var(--color-orange, #d97706);
|
|
background: var(--background-secondary);
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.any-ai-cli-am-errors ul {
|
|
margin: 6px 0 0 0;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.any-ai-cli-am-error-path {
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.any-ai-cli-am-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.any-ai-cli-am-table th,
|
|
.any-ai-cli-am-table td {
|
|
text-align: left;
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.any-ai-cli-am-table th {
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.any-ai-cli-am-table tr.is-disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.any-ai-cli-am-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.any-ai-cli-am-actions button {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--interactive-normal);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.any-ai-cli-am-actions button:hover:not(:disabled) {
|
|
background: var(--interactive-hover);
|
|
}
|
|
|
|
.any-ai-cli-am-actions button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.any-ai-cli-am-badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.any-ai-cli-am-badge.is-enabled,
|
|
.any-ai-cli-am-badge.is-ran {
|
|
background: rgba(34, 197, 94, 0.18);
|
|
color: var(--color-green, #16a34a);
|
|
}
|
|
|
|
.any-ai-cli-am-badge.is-disabled,
|
|
.any-ai-cli-am-badge.is-skipped {
|
|
background: rgba(234, 179, 8, 0.18);
|
|
color: var(--color-yellow, #ca8a04);
|
|
}
|
|
|
|
.any-ai-cli-am-badge.is-error {
|
|
background: rgba(239, 68, 68, 0.18);
|
|
color: var(--color-red, #dc2626);
|
|
}
|
|
|
|
.any-ai-cli-am-history-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.any-ai-cli-am-history-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.any-ai-cli-am-history-actions button {
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--interactive-normal);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.any-ai-cli-am-history-actions button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.any-ai-cli-am-history-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.any-ai-cli-am-history-item {
|
|
display: grid;
|
|
grid-template-columns: 140px 1fr auto auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.any-ai-cli-am-history-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.any-ai-cli-am-history-ts {
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.any-ai-cli-am-history-name {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.any-ai-cli-am-history-source {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.any-ai-cli-am-history-detail {
|
|
grid-column: 2 / -1;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
}
|