@proflandrigan/shards 1.1.0

package/src/ui/css/sidebar.css

@@ -0,0 +1,661 @@
+/* ─── Explorer sidebar ───────────────────────────────────── */
+#explorer-sidebar {
+  width: 240px;
+  min-width: 176px;
+  max-width: 500px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  background: rgba(0, 0, 0, 0.3);
+  border-right: 1px solid var(--glass-border);
+  overflow: hidden;
+}
+#explorer-sidebar.collapsed {
+  width: 36px !important;
+  min-width: 36px;
+}
+#explorer-sidebar.collapsed #sidebar-content { display: none; }
+
+/* ─── Activity bar ───────────────────────────────────────── */
+#activity-bar {
+  width: 36px;
+  min-width: 36px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 6px;
+  gap: 2px;
+  background: #060610;
+  border-right: 1px solid #12121e;
+}
+.activity-btn {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  color: #5a5a78;
+  font-size: 14px;
+  transition: color 0.15s, border-color 0.15s;
+  padding: 0;
+}
+.activity-btn:hover { color: #9090b0; }
+.activity-btn.active { color: #b0b0c8; border-left-color: #3860c0; }
+.activity-btn .badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  font-size: 8px;
+  background: #e8b84a;
+  color: #080810;
+  border-radius: 6px;
+  padding: 0 3px;
+  line-height: 13px;
+  min-width: 13px;
+  text-align: center;
+  font-weight: 700;
+}
+
+/* ─── Sidebar content area ───────────────────────────────── */
+#sidebar-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+.sidebar-view {
+  display: none;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+.sidebar-view.active { display: flex; }
+
+/* ─── Session files view ─────────────────────────────────── */
+#session-view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #6a6a88;
+  background: #0a0a14;
+  border-bottom: 1px solid #12121e;
+  flex-shrink: 0;
+}
+#session-file-count {
+  font-size: 9px;
+  color: #6a6a88;
+  letter-spacing: 0;
+  text-transform: none;
+}
+#sidebar-view-session #session-files-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2px 0;
+}
+
+#explorer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  cursor: pointer;
+  user-select: none;
+  background: #0a0a14;
+  border-bottom: 1px solid #12121e;
+  flex-shrink: 0;
+}
+#explorer-header:hover { background: #0e0e1a; }
+#explorer-toggle {
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #6a6a88;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+#explorer-toggle .chevron {
+  display: inline-block;
+  transition: transform 0.2s;
+  font-size: 7px;
+  color: #6a6a88;
+}
+#explorer-sidebar.collapsed #explorer-toggle .chevron { transform: rotate(-90deg); }
+#explorer-sidebar.collapsed #explorer-toggle .label-text { display: none; }
+
+#explorer-collapse-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6a6a88;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+#explorer-collapse-btn:hover { color: #b0b0c8; }
+#explorer-sidebar.collapsed #explorer-collapse-btn { transform: scaleX(-1); }
+
+#explorer-breadcrumb {
+  padding: 4px 10px;
+  font-size: 11px;
+  color: #4a4a68;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #12121e;
+  background: #090912;
+  flex-shrink: 0;
+}
+.crumb {
+  cursor: pointer;
+  color: #5a5a78;
+  padding: 1px 3px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.crumb:hover { color: #9090b0; background: #141428; }
+.crumb-sep { color: #2a2a3a; font-size: 7px; }
+.crumb.current { color: #8888a8; cursor: default; }
+.crumb.current:hover { background: none; color: #8888a8; }
+
+#explorer-listing {
+  overflow-y: auto;
+  flex: 1;
+}
+.dir-entry {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 3px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #8888a8;
+  transition: background 0.15s;
+}
+.dir-entry:hover { background: #0f0f1e; }
+.dir-entry.is-dir { color: #9090b0; }
+.dir-entry.is-file { color: #6a6a88; }
+.dir-icon {
+  font-size: 9px;
+  width: 14px;
+  text-align: center;
+  flex-shrink: 0;
+  color: #6a6a88;
+}
+.dir-entry.is-dir .dir-icon { color: #5a7aaa; }
+.dir-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dir-size { font-size: 10px; color: #5a5a78; flex-shrink: 0; }
+.dir-entry.parent-entry { color: #7a7a98; font-style: italic; }
+.dir-entry.parent-entry .dir-icon { color: #7a7a98; }
+
+/* ─── Explorer view toggle button ────────────────────────── */
+#explorer-view-toggle {
+  background: none;
+  border: 1px solid #3a3a5a;
+  border-radius: 3px;
+  cursor: pointer;
+  color: #7a7a98;
+  font-size: 9px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  line-height: 1.4;
+  transition: color 0.15s, border-color 0.15s;
+  flex-shrink: 0;
+}
+#explorer-view-toggle:hover { color: #b0b0c8; border-color: #5a5a80; }
+#explorer-sidebar.collapsed #explorer-view-toggle { display: none; }
+
+/* ─── Tree view entries ───────────────────────────────────── */
+.tree-entry {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #8888a8;
+  transition: background 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tree-entry:hover { background: #0f0f1e; }
+.tree-entry.is-dir { color: #9090b0; }
+.tree-entry.is-file { color: #6a6a88; }
+.tree-toggle {
+  font-size: 7px;
+  width: 10px;
+  min-width: 10px;
+  text-align: center;
+  flex-shrink: 0;
+  color: #5a5a78;
+  line-height: 1;
+}
+.tree-entry.is-dir .dir-icon { color: #5a7aaa; }
+.tree-entry.is-file .dir-icon { color: #6a6a88; }
+
+/* ─── Explorer search input ───────────────────────────────── */
+#explorer-search-wrap {
+  padding: 4px 8px;
+  border-bottom: 1px solid #12121e;
+  display: none;
+  flex-shrink: 0;
+}
+#explorer-search-wrap.visible { display: block; }
+#explorer-search-input {
+  width: 100%;
+  background: #0a0a14;
+  border: 1px solid #2a2a44;
+  border-radius: 4px;
+  color: #c8c8d8;
+  font-family: inherit;
+  font-size: 11px;
+  padding: 3px 8px;
+  outline: none;
+  box-sizing: border-box;
+}
+#explorer-search-input:focus { border-color: #3860c0; }
+#explorer-search-results { max-height: 200px; overflow-y: auto; }
+
+/* ─── Session file entries ────────────────────────────────── */
+.session-file-entry {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px 2px 16px;
+  cursor: pointer;
+  font-size: 11px;
+  color: #e8b84a;
+  transition: background 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.session-file-entry:hover { background: #0f0f1e; }
+.session-file-entry .dir-icon { font-size: 9px; color: #e8b84a; flex-shrink: 0; }
+
+/* ─── Bookmarks view ───────────────────────────────────── */
+#bookmarks-view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #6a6a88;
+  background: #0a0a14;
+  border-bottom: 1px solid #12121e;
+  flex-shrink: 0;
+}
+#bookmarks-count {
+  font-size: 9px;
+  color: #6a6a88;
+  letter-spacing: 0;
+  text-transform: none;
+}
+#sidebar-view-bookmarks #bookmarks-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2px 0;
+}
+#bookmarks-empty {
+  display: none;
+  padding: 16px 12px;
+  font-size: 11px;
+  color: #5a5a78;
+  text-align: center;
+}
+#bookmarks-empty.visible { display: block; }
+.bookmark-entry {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px 3px 16px;
+  cursor: pointer;
+  font-size: 11px;
+  color: #8888a8;
+  transition: background 0.15s;
+  overflow: hidden;
+}
+.bookmark-entry:hover { background: #0f0f1e; }
+.bookmark-entry-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.bookmark-entry-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+.bookmark-entry-session {
+  font-size: 9px;
+  color: #4a4a68;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bookmark-entry-preview {
+  font-size: 11px;
+  color: #7a7a98;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bookmark-entry:hover .bookmark-entry-preview { color: #a0a0b8; }
+.bookmark-entry-remove {
+  background: none;
+  border: none;
+  color: #5a5a78;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+}
+.bookmark-entry:hover .bookmark-entry-remove { opacity: 0.6; }
+.bookmark-entry-remove:hover { opacity: 1 !important; color: #e05050; }
+
+/* Bookmarks hidden when sidebar collapsed (via #sidebar-content hiding) */
+
+/* Highlight agent-edited files */
+.tree-entry.is-file.touched .dir-name,
+.dir-entry.is-file.touched .dir-name { color: #e8b84a; }
+.tree-entry.is-file.touched .file-icon,
+.dir-entry.is-file.touched .dir-icon { color: #e8b84a; }
+
+/* ─── Multi-repo picker ──────────────────────────────────── */
+#git-repo-picker {
+  padding: 4px 8px;
+  background: #0a0a14;
+  border-bottom: 1px solid #12121e;
+}
+#git-repo-select {
+  width: 100%;
+  padding: 4px 6px;
+  background: #0f0f1e;
+  border: 1px solid #1e1e32;
+  border-radius: 4px;
+  color: #8888a8;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a4a68'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 22px;
+}
+#git-repo-select:focus { border-color: #3860c0; color: #b0b0c8; }
+#git-repo-select option { background: #0f0f1e; color: #b0b0c8; }
+
+[data-theme="light"] #git-repo-picker { background: #f5f5f8; border-bottom-color: #e0e0e8; }
+[data-theme="light"] #git-repo-select { background: #fff; border-color: #ccc; color: #555; }
+[data-theme="light"] #git-repo-select:focus { border-color: #3860c0; color: #333; }
+[data-theme="light"] #git-repo-select option { background: #fff; color: #333; }
+
+/* ─── Git / Source Control view ──────────────────────────── */
+#git-view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  font-size: 9px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: #6a6a88;
+  background: #0a0a14;
+  border-bottom: 1px solid #12121e;
+  flex-shrink: 0;
+}
+.git-view-title { color: #6a6a88; }
+#git-branch-label {
+  font-size: 9px;
+  color: #6a8acc;
+  letter-spacing: 0.5px;
+  text-transform: none;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#git-changes-list {
+  flex: 1;
+  padding: 2px 0;
+  overflow-y: auto;
+}
+.git-change-entry {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px 2px 16px;
+  cursor: pointer;
+  font-size: 11px;
+  color: #8888a8;
+  transition: background 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.git-change-entry:hover { background: #0f0f1e; }
+.git-status-badge {
+  font-size: 8px;
+  font-weight: 700;
+  width: 14px;
+  min-width: 14px;
+  text-align: center;
+  border-radius: 2px;
+  padding: 0 2px;
+  line-height: 14px;
+}
+.git-status-badge.modified { color: #e8b84a; }
+.git-status-badge.added { color: #5cba6e; }
+.git-status-badge.deleted { color: #e05050; }
+.git-status-badge.untracked { color: #6a8acc; }
+.git-status-badge.renamed { color: #b07acc; }
+.git-change-entry .dir-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.git-change-entry .git-dir { font-size: 9px; color: #5a5a78; flex-shrink: 0; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
+
+/* Git diff badges on file tabs */
+.ws-tab .git-diff-badge {
+  font-size: 7px;
+  font-weight: 700;
+  margin-left: 4px;
+  padding: 0 3px;
+  border-radius: 2px;
+  line-height: 13px;
+  vertical-align: middle;
+}
+.ws-tab .git-diff-badge.modified { color: #e8b84a; }
+.ws-tab .git-diff-badge.added { color: #5cba6e; }
+.ws-tab .git-diff-badge.deleted { color: #e05050; }
+.ws-tab .git-diff-badge.untracked { color: #6a8acc; }
+.ws-tab .git-diff-badge.renamed { color: #b07acc; }
+
+/* Git diff view in file pane */
+#git-diff-container {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+#git-diff-container.visible { display: block; }
+
+/* ─── Session Activity timeline (R3) ──────────────────────── */
+#timeline-view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #6a6a88;
+  background: #0a0a14;
+  border-bottom: 1px solid #12121e;
+  flex-shrink: 0;
+}
+#timeline-session-count {
+  font-size: 9px;
+  color: #6a6a88;
+  letter-spacing: 0;
+  text-transform: none;
+}
+#sidebar-view-timeline #timeline-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+#timeline-empty {
+  display: none;
+  padding: 16px 12px;
+  font-size: 11px;
+  color: #5a5a78;
+  text-align: center;
+}
+#timeline-empty.visible { display: block; }
+
+.timeline-session {
+  border-bottom: 1px solid #0e0e1a;
+  padding: 4px 0 6px;
+}
+.timeline-session.active .timeline-session-header {
+  background: #0f0f1e;
+}
+.timeline-session-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 11px;
+  color: #b0b0c8;
+  transition: background 0.15s;
+}
+.timeline-session-header:hover { background: #0f0f1e; }
+.timeline-session-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.timeline-session-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.timeline-session-status {
+  font-size: 9px;
+  color: #5a5a78;
+  letter-spacing: 0.3px;
+  text-transform: lowercase;
+  flex-shrink: 0;
+}
+.timeline-session-status.live {
+  color: #6a8acc;
+  font-weight: 600;
+}
+.timeline-session-status.live::before {
+  content: '●';
+  margin-right: 3px;
+  animation: timeline-live-pulse 1.4s ease-in-out infinite;
+}
+@keyframes timeline-live-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+.timeline-session-status.attention {
+  color: #e0a030;
+  font-weight: 600;
+}
+
+.timeline-entries {
+  display: flex;
+  flex-direction: column;
+  margin: 2px 0 0 0;
+  padding-left: 16px;
+  border-left: 1px solid #1a1a2a;
+  margin-left: 13px;
+}
+.timeline-entry {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 1px 10px 1px 4px;
+  font-size: 10.5px;
+  color: #7a7a98;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.timeline-entry-time {
+  font-size: 9.5px;
+  color: #4a4a68;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+.timeline-entry-glyph {
+  font-size: 10px;
+  color: #6a6a88;
+  width: 10px;
+  text-align: center;
+  flex-shrink: 0;
+}
+.timeline-entry-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.timeline-entry.kind-gate { color: #e0a030; }
+.timeline-entry.kind-gate .timeline-entry-glyph { color: #e0a030; }
+.timeline-entry.kind-error { color: #e07050; }
+.timeline-entry.kind-error .timeline-entry-glyph { color: #e07050; }
+.timeline-entry.kind-file { color: #e8b84a; }
+.timeline-entry.kind-file .timeline-entry-glyph { color: #e8b84a; }
+.timeline-entry.kind-consult { color: #b07acc; }
+.timeline-entry.kind-consult .timeline-entry-glyph { color: #b07acc; }
+.timeline-entry.kind-start { color: #5cba6e; }
+.timeline-entry.kind-start .timeline-entry-glyph { color: #5cba6e; }
+.timeline-entry.kind-end { color: #5a5a78; font-style: italic; }
+
+.timeline-empty-row {
+  font-size: 10px;
+  color: #4a4a68;
+  font-style: italic;
+  padding: 2px 10px 2px 30px;
+}
+
+/* Light theme overrides */
+[data-theme="light"] #timeline-view-header { background: #f5f5f8; color: #555; border-bottom-color: #e0e0e8; }
+[data-theme="light"] .timeline-session { border-bottom-color: #ececf2; }
+[data-theme="light"] .timeline-session.active .timeline-session-header { background: #eef0f7; }
+[data-theme="light"] .timeline-session-header { color: #333; }
+[data-theme="light"] .timeline-session-header:hover { background: #ececf2; }
+[data-theme="light"] .timeline-entries { border-left-color: #d0d0d8; }
+[data-theme="light"] .timeline-entry { color: #555; }
+[data-theme="light"] .timeline-entry-time { color: #999; }
+[data-theme="light"] .timeline-entry-glyph { color: #777; }