claudeck 1.0.0

package/public/css/core/layout.css

@@ -0,0 +1,330 @@
+/* ── Header Bar ───────────────────────────────────────── */
+.top-header {
+  height: var(--header-h);
+  background: var(--bg-deep);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  flex-shrink: 0;
+  user-select: none;
+  letter-spacing: 0.02em;
+  position: relative;
+  z-index: 10;
+}
+
+/* Subtle gradient line at bottom of header */
+.top-header::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
+  opacity: 0.5;
+}
+
+.term-project-name {
+  font-weight: 700;
+  font-size: 12px;
+  font-family: var(--font-display);
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.term-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.term-prompt   { color: var(--success); font-weight: 700; }
+.term-cmd      { color: var(--accent); font-weight: 600; font-family: var(--font-display); letter-spacing: 0.04em; }
+.term-sep      { color: var(--border); }
+.term-user     { color: var(--text-secondary); font-size: 11px; }
+.term-plan     { color: var(--purple); font-size: 11px; font-weight: 500; }
+
+.term-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--error);
+  flex-shrink: 0;
+  box-shadow: 0 0 8px var(--error), 0 0 2px var(--error);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.term-dot.connected    { background: var(--success); box-shadow: 0 0 8px var(--success), 0 0 2px var(--success); }
+.term-dot.reconnecting { background: var(--warning); box-shadow: 0 0 8px var(--warning), 0 0 2px var(--warning); animation: blink 1s infinite; }
+
+.term-status          { color: var(--text-dim); font-size: 11px; }
+.term-status.ok       { color: var(--success); }
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+/* Header dropdowns */
+.header-dropdown {
+  position: relative;
+}
+
+.header-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 3px 10px;
+  cursor: pointer;
+  height: 26px;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.header-dropdown-trigger:hover,
+.header-dropdown.open .header-dropdown-trigger {
+  color: var(--text);
+  border-color: var(--text-dim);
+  background: rgba(255,255,255,0.02);
+}
+
+.header-dropdown.open .header-dropdown-trigger {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.header-dropdown-chevron {
+  transition: transform 0.2s var(--ease-smooth);
+}
+
+.header-dropdown.open .header-dropdown-chevron {
+  transform: rotate(180deg);
+}
+
+.header-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 200px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  z-index: 200;
+  animation: fadeInUp 0.15s var(--ease-out-expo);
+}
+
+.header-dropdown.open .header-dropdown-menu {
+  display: block;
+}
+
+.header-dropdown-menu--right {
+  left: auto;
+  right: 0;
+}
+
+.header-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  position: relative;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.header-dropdown-item:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.header-dropdown-item-label {
+  flex: 1;
+  font-weight: 500;
+}
+
+.header-dropdown-item-value {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--accent);
+  margin-left: auto;
+}
+
+.header-dropdown-arrow {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+/* Submenu (second level) */
+.header-submenu {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: -4px;
+  min-width: 140px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  z-index: 201;
+}
+
+.header-dropdown-item.has-submenu:hover > .header-submenu {
+  display: block;
+}
+
+.header-submenu--left {
+  left: auto;
+  right: 100%;
+}
+
+.header-submenu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 12px;
+  background: none;
+  border: none;
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.header-submenu-item:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.header-submenu-item.active {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.header-submenu-item.active::before {
+  content: "\2713\0020";
+}
+
+/* Checkbox-style submenu items for disabled tools */
+.header-submenu-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 14px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+
+.header-submenu-check:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.header-submenu-check input[type="checkbox"] {
+  accent-color: var(--accent);
+  width: 13px;
+  height: 13px;
+  cursor: pointer;
+}
+
+.header-submenu--tools {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.header-hidden-select {
+  display: none !important;
+}
+
+.header-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  cursor: pointer;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.header-icon-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+  background: rgba(255,255,255,0.02);
+}
+
+.header-icon-btn.active {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+  box-shadow: var(--glow);
+}
+
+.term-costs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.term-costs:hover {
+  opacity: 0.8;
+}
+
+@keyframes tokenPulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.6; }
+}
+
+.term-cost-value { color: var(--success); font-weight: 600; font-family: var(--font-mono); font-size: 11px; }
+
+/* ── Layout ───────────────────────────────────────────── */
+.layout {
+  display: flex;
+  height: calc(100vh - var(--header-h) - 24px);
+}

package/public/css/core/print.css

@@ -0,0 +1,18 @@
+/* ── Print Styles ───────────────────────────────────── */
+@media print {
+  .sidebar, .top-header, .input-bar, .toolbox-panel,
+  .workflow-panel, .thinking-bar, .modal-overlay,
+  .code-copy-btn, .tool-indicator, .session-delete,
+  #send-btn, #stop-btn, .mode-toggle { display: none !important; }
+
+  .layout { display: block; }
+  .chat-area { width: 100%; }
+  .messages { padding: 0; overflow: visible; }
+  .msg { max-width: 100%; break-inside: avoid; }
+  .msg-user { background: #f0f0f0; border: 1px solid #ddd; color: #333; }
+  .msg-assistant { color: #222; }
+  .msg-assistant .text-content pre { background: #f5f5f5; border: 1px solid #ddd; }
+  .msg-assistant .text-content code { background: #eee; }
+
+  body { background: #fff; color: #222; overflow: visible; height: auto; }
+}

package/public/css/core/reset.css

@@ -0,0 +1,36 @@
+/* ── Reset ─────────────────────────────────────────────── */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Noise texture overlay for atmosphere */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 200px 200px;
+  opacity: var(--noise-opacity);
+  pointer-events: none;
+  z-index: 9998;
+  mix-blend-mode: overlay;
+}
+
+/* Selection styling */
+::selection {
+  background: var(--accent-mid);
+  color: var(--text);
+}