painapple-code 1.0.0__py3-none-any.whl

painapple_code/static/css/66-history-explorer.css

@@ -0,0 +1,1496 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   HISTORY EXPLORER WIDGET
+   Merged from the old 76-history-explorer.css (newer Files-tab/tree/card
+   rules) and the CSS block formerly embedded in
+   widgets/history-explorer-widget.js (injected <style>, which loaded after
+   styles.css and silently overrode the file on shared selectors).
+   Rule order preserves that cascade: file-derived rules first, JS-derived
+   rules after. Shared selectors keep only the file's still-effective props.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── from 76-history-explorer.css (props overridden by the JS block removed) ── */
+
+.he-container {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.he-tabs {
+    gap: var(--sp-4);
+    padding: var(--sp-8) var(--sp-12);
+    flex-shrink: 0;
+}
+
+.he-tab {
+    border-radius: var(--radius-sm);
+    transition: all 0.15s;
+}
+
+.he-tab:hover {
+    background: var(--bg-secondary);
+}
+
+.he-file-history-header {
+    padding: var(--sp-6) var(--sp-4) var(--sp-8);
+    border-bottom: 1px solid var(--border-color);
+    min-width: 0;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+.he-file-path-info {
+    flex: 1;
+    min-width: 0;
+    font-size: var(--font-size-md);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.he-file-dir {
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+}
+
+.he-file-name-main {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.he-stat-item, .he-stat-additions, .he-stat-deletions, .he-stat-sep {
+    flex-shrink: 0;
+}
+
+.he-stat-sep {
+    opacity: 0.4;
+}
+
+.he-stat-additions {
+    color: #22c55e;
+    font-weight: 600;
+}
+
+.he-stat-deletions {
+    color: #ef4444;
+    font-weight: 600;
+}
+
+.he-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--layout-btn-sm);
+    height: var(--layout-btn-sm);
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 120ms, color 120ms, border-color 120ms;
+}
+
+.he-icon-btn:hover {
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+.he-icon-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+.he-date-group {
+    margin-bottom: var(--sp-16);
+}
+
+.he-date-header {
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: var(--sp-8);
+    padding-left: var(--sp-4);
+}
+
+.he-file-commit-card {
+    display: flex;
+    align-items: stretch;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--sp-8);
+    overflow: hidden;
+    border: 1px solid transparent;
+    transition: border-color 0.15s;
+}
+
+.he-file-commit-card:hover {
+    border-color: var(--border-color);
+}
+
+.he-file-commit-main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--sp-10);
+    padding: var(--sp-10) var(--sp-12);
+    cursor: pointer;
+}
+
+.he-file-commit-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--sp-2);
+    padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
+    flex-shrink: 0;
+}
+
+.he-file-commit-actions .he-icon-btn {
+    width: 24px;
+    height: 24px;
+    opacity: 0.55;
+}
+
+.he-file-commit-actions .he-icon-btn svg {
+    width: 14px;
+    height: 14px;
+}
+
+.he-file-commit-card:hover .he-file-commit-actions .he-icon-btn {
+    opacity: 1;
+}
+
+.he-file-commit-actions .he-icon-btn:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-file-commit-main:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-file-commit-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.he-file-commit-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    margin-bottom: var(--sp-4);
+    font-size: var(--font-size-sm);
+}
+
+.he-commit-hash {
+    font-family: var(--font-mono);
+    color: var(--accent);
+    font-size: var(--font-size-xs);
+}
+
+.he-commit-session {
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
+    background: var(--bg-tertiary);
+    padding: 1px var(--sp-5);
+    border-radius: var(--radius-sm);
+}
+
+.he-commit-session[data-action] {
+    cursor: pointer;
+    transition: color 120ms, background 120ms;
+}
+
+.he-commit-session[data-action]:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover, var(--border-color));
+}
+
+.he-file-commit-summary {
+    font-size: var(--font-size-base);
+    line-height: 1.4;
+    color: var(--text-primary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.he-file-commit-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sp-4);
+    margin-top: var(--sp-6);
+}
+
+.he-mini-tag {
+    font-size: 10px;
+    padding: var(--sp-2) var(--sp-6);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+}
+
+.he-file-commit-stats {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--sp-4);
+    flex-shrink: 0;
+    min-width: 70px;
+}
+
+.he-change-bar {
+    width: 60px;
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    display: flex;
+}
+
+.he-change-bar-add {
+    background: #22c55e;
+    height: 100%;
+}
+
+.he-change-bar-del {
+    background: #ef4444;
+    height: 100%;
+}
+
+.he-change-numbers {
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+}
+
+.he-change-numbers .he-additions {
+    color: #22c55e;
+    margin-right: var(--sp-6);
+}
+
+.he-change-numbers .he-deletions {
+    color: #ef4444;
+}
+
+.he-btn {
+    padding: var(--sp-6) var(--sp-12);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: var(--font-size-base);
+    transition: all 0.15s;
+}
+
+.he-btn:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-btn-sm {
+    padding: var(--sp-4) var(--sp-10);
+    font-size: var(--font-size-sm);
+}
+
+.he-back-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--layout-btn-sm);
+    height: var(--layout-btn-sm);
+    line-height: 1;
+    flex-shrink: 0;
+    transition: background 120ms, color 120ms, border-color 120ms;
+}
+
+.he-back-btn:hover {
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+.he-loading {
+    text-align: center;
+}
+
+.he-empty-message {
+    color: var(--text-secondary);
+}
+
+.he-empty-text {
+    padding: var(--sp-20);
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: var(--font-size-base);
+}
+
+.he-files-search-input {
+    padding-right: var(--sp-32);
+}
+
+.he-files-search-clear {
+    padding: var(--sp-4);
+}
+
+.he-files-view-toggle {
+    gap: var(--sp-2);
+}
+
+.he-view-btn:first-child {
+    border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.he-view-btn:last-child {
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+.he-view-btn.active {
+    border-color: var(--accent);
+}
+
+.he-file-tree {
+    font-size: var(--font-size-base);
+}
+
+.he-tree-file {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-4) var(--sp-8);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+}
+
+.he-tree-file:hover {
+    background: var(--bg-secondary);
+}
+
+.he-tree-dir {
+    margin-bottom: var(--sp-2);
+}
+
+.he-tree-dir-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-4) var(--sp-8);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+}
+
+.he-tree-dir-header:hover {
+    background: var(--bg-secondary);
+}
+
+.he-tree-chevron, .he-tree-spacer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.he-tree-chevron {
+    color: var(--text-secondary);
+    transition: transform 0.15s ease, color 0.1s ease;
+}
+
+.he-tree-chevron svg {
+    width: 12px;
+    height: 12px;
+}
+
+.he-tree-chevron.expanded {
+    transform: rotate(90deg);
+    color: var(--text-primary);
+}
+
+.he-tree-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.he-tree-icon svg {
+    width: 16px;
+    height: 16px;
+}
+
+.he-tree-name {
+    flex: 1;
+}
+
+.he-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-2);
+}
+
+.he-file-item, .he-file-row {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-6) var(--sp-10);
+    cursor: pointer;
+    border-radius: var(--radius-md);
+}
+
+.he-file-item:hover, .he-file-row:hover {
+    background: var(--bg-secondary);
+}
+
+.he-file-name {
+    flex: 1;
+}
+
+.he-file-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.he-file-icon svg {
+    width: 16px;
+    height: 16px;
+}
+
+.he-file-diff-clickable {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-6) var(--sp-10);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background 120ms;
+}
+
+.he-file-diff-clickable:hover {
+    background: var(--bg-secondary);
+}
+
+.he-file-diff-clickable:hover .he-diff-tool-icon {
+    opacity: 1;
+    color: var(--accent);
+}
+
+.he-diff-tool-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--text-secondary);
+    opacity: 0.55;
+    transition: opacity 120ms, color 120ms;
+}
+
+.he-diff-tool-icon svg {
+    width: 14px;
+    height: 14px;
+}
+
+.he-file-preview-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    width: 22px;
+    height: 22px;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    opacity: 0;
+    transition: opacity 120ms, background 120ms, color 120ms;
+}
+
+.he-file-preview-icon svg {
+    width: 14px;
+    height: 14px;
+}
+
+.he-file-row:hover .he-file-preview-icon, .he-tree-file:hover .he-file-preview-icon {
+    opacity: 0.7;
+}
+
+.he-file-preview-icon:hover {
+    opacity: 1 !important;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.he-file-clickable {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-4) var(--sp-8);
+    margin-right: var(--sp-4);
+    margin-bottom: var(--sp-4);
+    border-radius: var(--radius-sm);
+    background: var(--bg-tertiary, var(--bg-secondary));
+    font-size: var(--font-size-sm);
+    font-family: var(--font-mono, monospace);
+    cursor: pointer;
+    transition: background 120ms, color 120ms;
+}
+
+.he-file-clickable:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.he-file-clickable:hover .he-file-chip-icon {
+    opacity: 1;
+    color: var(--accent);
+}
+
+.he-file-chip-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--text-secondary);
+    opacity: 0.55;
+    transition: opacity 120ms, color 120ms;
+}
+
+.he-file-chip-icon svg {
+    width: 12px;
+    height: 12px;
+}
+
+/* ── from the JS-injected block (cascade winner on shared selectors) ── */
+
+.he-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.he-search-bar {
+    padding: var(--sp-8) var(--sp-12);
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.he-search-input {
+    width: 100%;
+    padding: var(--sp-8) var(--sp-12);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: var(--font-size-md);
+}
+
+.he-search-input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+.he-filter-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sp-4);
+    margin-top: 8px;
+}
+
+.he-pill {
+    padding: var(--sp-2) var(--sp-8);
+    background: var(--accent);
+    color: white;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+}
+
+.he-pill-clear {
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+}
+
+.he-session-filter {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    margin-top: 8px;
+    font-size: var(--font-size-base);
+    color: var(--text-secondary);
+    cursor: pointer;
+    user-select: none;
+}
+
+.he-session-filter:hover {
+    color: var(--text-primary);
+}
+
+.he-session-filter input[type="checkbox"] {
+    -webkit-appearance: checkbox;
+    appearance: checkbox;
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
+    min-height: 18px;
+    accent-color: var(--accent);
+    cursor: pointer;
+    opacity: 1 !important;
+    margin: 0;
+}
+
+.he-filter-active {
+    color: var(--accent);
+    font-weight: 500;
+}
+
+.he-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    overflow-x: auto;
+}
+
+.he-tab {
+    height: var(--layout-btn-lg);
+    padding: 0 var(--sp-16);
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    font-size: var(--font-size-base);
+    cursor: pointer;
+    white-space: nowrap;
+    border-bottom: 2px solid transparent;
+}
+
+.he-tab:hover {
+    color: var(--text-primary);
+}
+
+.he-tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.he-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--sp-12);
+}
+
+.he-stats {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    margin-bottom: 12px;
+}
+
+.he-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--sp-32);
+    color: var(--text-muted);
+    gap: var(--sp-8);
+}
+
+.he-spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--border-color);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: he-spin 1s linear infinite;
+}
+
+.he-empty {
+    text-align: center;
+    padding: var(--sp-32) var(--sp-20);
+    color: var(--text-muted);
+}
+
+.he-empty-title {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.he-empty-message {
+    font-size: var(--font-size-base);
+}
+
+.he-session {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    margin-bottom: 8px;
+    overflow: hidden;
+}
+
+.he-session-header {
+    display: flex;
+    align-items: center;
+    padding: var(--sp-10) var(--sp-12);
+    background: var(--bg-secondary);
+    cursor: pointer;
+    gap: var(--sp-8);
+}
+
+.he-session-header:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-session-toggle {
+    color: var(--text-muted);
+    font-size: 10px;
+}
+
+.he-session-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.he-session-title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+}
+
+.he-session-title {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+}
+
+.he-session-time {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+
+.he-session-meta {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    flex-wrap: wrap;
+}
+
+.he-session-commits {
+    border-top: 1px solid var(--border-color);
+}
+
+.he-commit {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.he-commit:last-child {
+    border-bottom: none;
+}
+
+.he-commit-header {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--sp-10) var(--sp-12);
+    cursor: pointer;
+    gap: var(--sp-10);
+}
+
+.he-commit-header:hover {
+    background: var(--bg-hover);
+}
+
+.he-commit-turn {
+    background: var(--accent-green);
+    color: white;
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+}
+
+.he-commit-time {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+.he-commit-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.he-commit-summary {
+    font-size: var(--font-size-base);
+    color: var(--text-primary);
+    line-height: 1.4;
+}
+
+.he-commit-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    margin-top: 4px;
+    flex-wrap: wrap;
+}
+
+.he-expand-icon {
+    color: var(--text-muted);
+    font-size: 10px;
+}
+
+.he-commit-details {
+    padding: var(--sp-12);
+    background: var(--bg-tertiary);
+    border-top: 1px solid var(--border-color);
+}
+
+.he-section-title {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    margin-bottom: 6px;
+    margin-top: 12px;
+}
+
+.he-section-title:first-child {
+    margin-top: 0;
+}
+
+.he-section-content {
+    font-size: var(--font-size-base);
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+.he-tag {
+    padding: 1px var(--sp-6);
+    background: rgba(139, 92, 246, 0.15);
+    color: var(--accent-purple);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+}
+
+.he-file-count {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+.he-cost {
+    font-size: var(--font-size-xs);
+    color: var(--accent-green);
+}
+
+.he-files-changed {
+    margin-top: 12px;
+}
+
+.he-file-diff {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    margin-bottom: 6px;
+    overflow: hidden;
+}
+
+.he-file-header {
+    display: flex;
+    align-items: center;
+    padding: var(--sp-6) var(--sp-10);
+    background: var(--bg-secondary);
+    cursor: pointer;
+    gap: var(--sp-8);
+}
+
+.he-file-header:hover {
+    background: var(--bg-hover);
+}
+
+.he-file-path {
+    flex: 1;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.he-file-stats {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+}
+
+.he-additions {
+    color: var(--accent-green);
+}
+
+.he-deletions {
+    color: var(--accent-red);
+    margin-left: 4px;
+}
+
+.he-diff-toggle {
+    color: var(--text-muted);
+    font-size: 10px;
+}
+
+.he-diff-content {
+    border-top: 1px solid var(--border-color);
+    background: var(--bg-primary);
+}
+
+.he-hunk {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.he-hunk:last-child {
+    border-bottom: none;
+}
+
+.he-hunk-header {
+    padding: var(--sp-4) var(--sp-10);
+    background: var(--bg-tertiary);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--accent);
+}
+
+.he-hunk-lines {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    line-height: 1.4;
+}
+
+.he-diff-line {
+    display: flex;
+    padding: 1px var(--sp-10);
+}
+
+.he-diff-add {
+    background: rgba(34, 197, 94, 0.15);
+}
+
+.he-diff-del {
+    background: rgba(239, 68, 68, 0.15);
+}
+
+.he-diff-context {
+    color: var(--text-muted);
+}
+
+.he-line-prefix {
+    width: 16px;
+    flex-shrink: 0;
+    color: var(--text-muted);
+}
+
+.he-line-content {
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.he-commit-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-12);
+    margin-top: 12px;
+    padding-top: var(--sp-8);
+    border-top: 1px solid var(--border-color);
+}
+
+.he-hash {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--accent);
+    cursor: pointer;
+}
+
+.he-hash:hover {
+    text-decoration: underline;
+}
+
+.he-tokens {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+.he-decision-card, .he-problem-card, .he-learning-card {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--sp-12);
+    margin-bottom: 8px;
+    background: var(--bg-secondary);
+}
+
+.he-decision-header, .he-problem-header, .he-learning-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    margin-bottom: 8px;
+}
+
+.he-decision-icon, .he-problem-icon, .he-learning-icon {
+    font-size: var(--font-size-lg);
+}
+
+.he-decision-summary, .he-problem-summary, .he-learning-summary {
+    flex: 1;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.he-decision-turn, .he-problem-turn {
+    font-size: var(--font-size-xs);
+    color: var(--accent-green);
+    background: rgba(34, 197, 94, 0.15);
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+}
+
+.he-decision-content, .he-problem-content, .he-learning-content {
+    font-size: var(--font-size-base);
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin-bottom: 8px;
+}
+
+.he-decision-meta, .he-problem-meta, .he-learning-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    flex-wrap: wrap;
+}
+
+.he-file-chip {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    padding: var(--sp-2) var(--sp-6);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+}
+
+.he-file-list {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.he-file-row {
+    display: flex;
+    align-items: center;
+    padding: var(--sp-8) var(--sp-12);
+    cursor: pointer;
+    gap: var(--sp-8);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.he-file-row:last-child {
+    border-bottom: none;
+}
+
+.he-file-row:hover {
+    background: var(--bg-hover);
+}
+
+.he-file-name {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
+    color: var(--text-primary);
+}
+
+.he-files-toolbar {
+    display: flex;
+    gap: var(--sp-8);
+    margin-bottom: 12px;
+}
+
+.he-files-search {
+    flex: 1;
+    position: relative;
+}
+
+.he-files-search-input {
+    width: 100%;
+    padding: var(--sp-6) 28px var(--sp-6) var(--sp-10);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: var(--font-size-base);
+}
+
+.he-files-search-input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+.he-files-search-clear {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: transparent;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    font-size: var(--font-size-lg);
+    line-height: 1;
+}
+
+.he-files-search-clear:hover {
+    color: var(--text-primary);
+}
+
+.he-files-view-toggle {
+    display: flex;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.he-view-btn {
+    height: var(--layout-btn-sm);
+    padding: 0 var(--sp-10);
+    border: none;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--font-size-md);
+}
+
+.he-view-btn:not(:last-child) {
+    border-right: 1px solid var(--border-color);
+}
+
+.he-view-btn:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-view-btn.active {
+    background: var(--accent);
+    color: white;
+}
+
+.he-file-tree {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.he-tree-file, .he-tree-dir-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-6) var(--sp-10);
+    cursor: pointer;
+}
+
+.he-tree-file:hover, .he-tree-dir-header:hover {
+    background: var(--bg-hover);
+}
+
+.he-tree-name {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
+    color: var(--text-primary);
+}
+
+.he-tree-dir-header .he-tree-name {
+    font-weight: 500;
+}
+
+.he-tree-children {
+    padding-left: var(--sp-16);
+    border-top: 1px solid var(--border-color);
+}
+
+.he-tree-dir:not(:last-child) {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.he-file-history-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-12);
+    margin-bottom: 12px;
+}
+
+.he-back-btn {
+    padding: var(--sp-4) var(--sp-8);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--font-size-base);
+}
+
+.he-back-btn:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-file-commits {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.he-file-commit {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--sp-8) var(--sp-12);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.he-file-commit:last-child {
+    border-bottom: none;
+}
+
+.he-file-commit-info {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    flex: 1;
+    min-width: 0;
+}
+
+.he-subject {
+    font-size: var(--font-size-base);
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.he-file-commit-stats {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+}
+
+.he-tags-view {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-20);
+}
+
+.he-tags-section {
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    padding: var(--sp-12);
+}
+
+.he-section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    font-size: var(--font-size-md);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+}
+
+.he-section-icon {
+    font-size: var(--font-size-lg);
+}
+
+.he-tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sp-8);
+}
+
+.he-tag-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-6) var(--sp-12);
+    border-radius: var(--radius-sm);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.he-tag-pill:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent);
+}
+
+.he-tag-pill.recent {
+    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-red) 100%);
+    color: white;
+    border-color: transparent;
+}
+
+.he-tag-pill.recent:hover {
+    filter: brightness(1.1);
+}
+
+.he-tag-pill.selected {
+    background: var(--accent);
+    color: white;
+    border-color: transparent;
+}
+
+.he-tag-name {
+    font-size: var(--font-size-base);
+    font-weight: 500;
+}
+
+.he-tag-count {
+    font-size: var(--font-size-xs);
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.he-tag-pill.recent .he-tag-count, .he-tag-pill.selected .he-tag-count {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.he-tag-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-4);
+}
+
+.he-tag-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-4);
+    padding: var(--sp-10) var(--sp-12);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.he-tag-row:hover {
+    background: var(--bg-tertiary);
+}
+
+.he-tag-row-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.he-tag-name-lg {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.he-tag-count-lg {
+    font-size: var(--font-size-md);
+    font-weight: 600;
+    color: var(--accent);
+    min-width: 36px;
+    text-align: right;
+}
+
+.he-tag-bar-container {
+    height: 4px;
+    background: var(--border-color);
+    border-radius: var(--radius-xs);
+    overflow: hidden;
+}
+
+.he-tag-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), var(--accent-purple));
+    border-radius: var(--radius-xs);
+    transition: width 0.3s ease;
+}
+
+.he-tag-meta {
+    display: flex;
+    gap: var(--sp-12);
+    font-size: var(--font-size-sm);
+    color: var(--text-tertiary);
+}
+
+.he-tag-recent {
+    color: var(--accent-orange);
+}
+
+.he-tag-commits {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-12);
+}
+
+.he-tag-commits-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-12);
+    padding-bottom: var(--sp-12);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.he-tag-title {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+}
+
+.he-tag-commit-count {
+    font-size: var(--font-size-base);
+    color: var(--text-secondary);
+}
+
+.he-tag-commits-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-8);
+}
+
+.he-empty-small {
+    padding: var(--sp-24);
+    text-align: center;
+    color: var(--text-tertiary);
+    font-size: var(--font-size-md);
+}
+
+.he-tag.current {
+    background: var(--accent);
+    color: white;
+}
+
+.he-toast {
+    position: fixed;
+    bottom: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent-green);
+    color: white;
+    padding: var(--sp-8) var(--sp-16);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-md);
+    z-index: var(--z-toast);
+    animation: he-toast 2s ease-out forwards;
+}
+
+@keyframes he-spin {
+    to { transform: rotate(360deg); }
+}
+
+@keyframes he-toast {
+    0%, 80% { opacity: 1; }
+    100% { opacity: 0; }
+}