openclacky 1.3.7 → 1.3.9

data/lib/clacky/web/app.css

@@ -221,6 +221,7 @@ html { font-size: 16px; }
   100% { background-position: -200% 0; }
 }
 .skel {
+  display: inline-block;
   border-radius: 6px;
   background: linear-gradient(90deg,
     #e8e8e8 25%,
@@ -1855,42 +1856,87 @@ body {
 /* ── New Session landing page (#new) ─────────────────────────────────────── */
 .new-session-page {
   justify-content: flex-start;
-  padding: 3rem 1.5rem 2rem;
-  overflow-y: auto;
+  padding: 0;
+  overflow: hidden;
   gap: 0;
 }
 .new-session-inner {
   width: 100%;
-  max-width: 44rem;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 0;
+}
+.new-session-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 5.5rem 1.5rem 1rem;
+}
+.new-session-composer {
+  position: relative;
+  flex: none;
+  padding: 0.75rem 1.5rem 1.25rem;
 }
 .new-session-title {
   font-size: 1.5rem;
   font-weight: 680;
   color: var(--color-text-primary);
   letter-spacing: -0.01em;
-  text-align: center;
+  text-align: left;
   margin: 0;
 }
 .new-session-subtitle {
   color: var(--color-text-tertiary);
   font-size: 0.875rem;
-  text-align: center;
+  text-align: left;
   margin: 0;
 }
 .new-session-agents {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 0.75rem;
+}
+.new-session-agent-panels {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  justify-content: flex-start;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: -0.625rem;
+  padding-left: 0.125rem;
+}
+.ns-panels-label {
+  width: 100%;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: 0.0625rem;
+}
+.ns-panel-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.78125rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+.ns-panel-chip--panel {
+  background: var(--color-accent-soft);
+  color: var(--color-accent-primary);
+}
+.ns-panel-chip--skill {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-primary);
 }
 .agent-card {
   position: relative;
-  flex: 1 1 12rem;
-  min-width: 11rem;
-  max-width: 15rem;
   padding: 0.9375rem 1rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 0.75rem;
@@ -1918,6 +1964,35 @@ body {
   align-items: center;
   gap: 0.375rem;
 }
+.agent-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.125rem;
+}
+.agent-card-avatar {
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--color-bg-hover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.agent-card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.agent-card-avatar--fallback {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
+}
 .agent-card-new {
   font-size: 0.6rem;
   font-weight: 700;
@@ -1951,45 +2026,77 @@ body {
   color: var(--color-accent-primary);
 }
 .agent-card-author {
+  margin-top: 0.25rem;
   font-size: 0.72rem;
   color: var(--color-text-tertiary);
   opacity: 0.8;
 }
 
-.new-session-composer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+.new-session-input-bar {
+  margin: 0;
+  padding: 10px 12px;
   border: 1px solid var(--color-border-primary);
-  border-radius: 0.75rem;
-  padding: 0.75rem;
+  border-radius: 13px;
   background: var(--color-bg-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: var(--shadow-card);
+  transition: border-color .14s;
+}
+.new-session-input-bar:focus-within {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
+}
+.new-session-composer-btn {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+.new-session-composer-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.new-session-composer-btn.active {
+  color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
+}
+.new-session-composer-btn > span {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
 }
 .new-session-textarea {
-  width: 100%;
+  flex: 1;
   border: none;
   outline: none;
-  resize: vertical;
+  resize: none;
   background: transparent;
   color: var(--color-text-primary);
-  font: inherit;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  padding: 0.25rem;
-  min-height: 3rem;
-  max-height: 12rem;
-}
-.new-session-composer-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.55;
+  padding: 4px 6px;
+  margin: 0;
+  max-height: 12.5rem;
+  overflow-y: auto;
+  scrollbar-width: none;
 }
+.new-session-textarea::-webkit-scrollbar { display: none; }
 .new-session-advanced-wrap {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   align-items: flex-start;
+  margin-top: -0.5rem;
 }
 .new-session-advanced-toggle {
   display: inline-flex;
@@ -2006,7 +2113,6 @@ body {
 }
 .new-session-advanced-toggle:hover {
   color: var(--color-text-secondary);
-  background: var(--color-bg-hover);
 }
 .new-session-advanced-caret {
   transition: transform 0.15s;
@@ -2015,22 +2121,30 @@ body {
   transform: rotate(180deg);
 }
 .new-session-send {
-  padding: 0.4375rem 1rem;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: 9px;
   background: var(--color-accent-primary);
-  color: var(--color-text-inverse, #fff);
-  font-size: 0.875rem;
-  font-weight: 550;
+  color: #fff;
   cursor: pointer;
-  transition: opacity 0.14s;
+  transition: background .12s, opacity .12s;
+}
+.new-session-send svg {
+  width: 15px;
+  height: 15px;
 }
 .new-session-send:disabled {
-  opacity: 0.45;
+  background: var(--color-border-primary);
+  color: var(--color-text-tertiary);
   cursor: not-allowed;
+  opacity: 0.6;
 }
 .new-session-send:not(:disabled):hover {
-  opacity: 0.9;
+  background: color-mix(in srgb, var(--color-accent-primary) 85%, #fff);
 }
 
 .new-session-advanced {
@@ -2255,7 +2369,15 @@ body {
 .session-banner:empty,
 .session-composer:empty { display: none; }
 .session-banner { flex-shrink: 0; }
-.session-composer { flex-shrink: 0; }
+.session-composer {
+  flex-shrink: 0;
+  margin-bottom: -9px;
+  display: flex;
+  padding-inline: 12px;
+}
+.session-composer > * {
+  justify-content: flex-start !important;
+}
 
 /* ── File tree (used inside the Files tab) ──────────────────────────────── */
 .wt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@@ -4038,6 +4160,12 @@ body {
   box-shadow: var(--shadow-card);
   margin-bottom: -1px;
 }
+#ns-image-preview-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0 0.5rem;
+}
 /* Square off the top corners of the input-bar when the preview strip sits above it */
 #input-area:has(#image-preview-strip:not([style*="display:none"])):not(:has(#image-preview-strip[style*="display: none"])) #input-bar {
   border-top-left-radius: 0;
@@ -4136,7 +4264,8 @@ body {
 .pdf-preview-remove:hover { background: var(--color-error); }
 
 /* ── Skill autocomplete dropdown ─────────────────────────────────────────── */
-#skill-autocomplete {
+#skill-autocomplete,
+.skill-autocomplete {
   position: absolute;
   bottom: 100%;
   left: 0;
@@ -4154,7 +4283,8 @@ body {
   z-index: 1000;
 }
 
-#skill-autocomplete-list {
+#skill-autocomplete-list,
+#ns-skill-autocomplete-list {
   padding: 0.25rem 0;
 }
 
@@ -6949,13 +7079,45 @@ body {
   gap: 1.25rem;
 }
 .extensions-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+.extensions-toolbar-right {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
+.extensions-filter-tabs {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+}
+.extensions-filter-tab {
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.25rem 0.875rem 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: color .15s, border-color .15s;
+}
+.extensions-filter-tab:hover {
+  color: var(--color-text-primary);
+}
+.extensions-filter-tab-active {
+  color: var(--color-text-primary);
+  border-bottom-color: var(--color-accent, #6366f1);
+}
 .extensions-search {
   flex: 1;
-  min-width: 0;
+  min-width: 15rem;
   font-size: 0.8125rem;
   padding: 0.4375rem 0.75rem;
   border-radius: 6px;
@@ -6968,13 +7130,22 @@ body {
   border-color: var(--color-accent, #6366f1);
 }
 .extensions-sort {
+  flex-shrink: 0;
   font-size: 0.8125rem;
-  padding: 0.4375rem 0.5rem;
+  padding: 0.4375rem 2rem 0.4375rem 0.75rem;
   border-radius: 6px;
   border: 1px solid var(--color-border-primary);
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
   cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+}
+.extensions-sort:focus {
+  outline: none;
+  border-color: var(--color-accent, #6366f1);
 }
 #extensions-list {
   display: flex;
@@ -7024,7 +7195,7 @@ body {
   color: var(--color-text-secondary);
   background: var(--color-bg-tertiary, rgba(255,255,255,0.05));
   border-radius: 4px;
-  padding: 0.0625rem 0.375rem;
+  padding: 0.0625rem 0rem;
 }
 .extension-units {
   font-size: 0.6875rem;
@@ -7043,6 +7214,14 @@ body {
   line-height: 1.5;
   margin-bottom: 0.375rem;
 }
+.extension-desc-detail {
+  font-size: 0.8125rem;
+  margin-bottom: 0.5rem;
+}
+.extension-detail-author {
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+}
 .extension-meta {
   display: flex;
   align-items: center;
@@ -7065,30 +7244,41 @@ body {
 }
 .extension-detail-head { margin-bottom: 1rem; }
 .extension-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   background: transparent;
   border: none;
   color: var(--color-text-secondary);
   font-size: 0.8125rem;
   cursor: pointer;
-  padding: 0.25rem 0;
+  padding: 0.3rem 0.6rem;
+  border-radius: 6px;
+  margin-left: -0.6rem;
+  transition: background 0.15s, color 0.15s;
+}
+.extension-detail-back:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
 }
-.extension-detail-back:hover { color: var(--color-text-primary); }
 .extension-detail-hero {
   display: flex;
   align-items: flex-start;
-  gap: 0.875rem;
-  padding-bottom: 1rem;
+  gap: 1rem;
+  padding-bottom: 1.25rem;
   border-bottom: 1px solid var(--color-border-primary);
 }
 .extension-detail-heading { flex: 1; min-width: 0; }
-.extension-emoji-lg { font-size: 2.25rem; }
-.extension-name-lg { font-size: 1.0625rem; }
-.extension-detail-block { margin-top: 1.25rem; }
+.extension-emoji-lg { font-size: 2.5rem; line-height: 1; margin-top: 0.125rem; }
+.extension-name-lg { font-size: 1.125rem; font-weight: 700; }
+.extension-detail-block { margin-top: 1.5rem; }
 .extension-detail-block-title {
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin: 0 0 0.75rem;
 }
 .extension-detail-section { margin-bottom: 0.875rem; }
 .extension-detail-section-title {
@@ -7100,18 +7290,30 @@ body {
   margin: 0 0 0.375rem;
 }
 .extension-contrib-list,
-.extension-version-list { list-style: none; margin: 0; padding: 0; }
-.extension-contrib-item {
-  padding: 0.5rem 0.75rem;
-  background: var(--color-bg-secondary);
+.extension-version-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
-  margin-bottom: 0.375rem;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-bg-secondary);
 }
+.extension-contrib-item {
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--color-border-primary);
+  background: transparent;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  margin-bottom: 0;
+}
+.extension-contrib-item:last-child { border-bottom: none; }
 .extension-contrib-title {
   display: block;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .extension-contrib-desc {
@@ -7122,7 +7324,7 @@ body {
   margin-top: 0.125rem;
 }
 .extension-version-item {
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 0.875rem;
   border-bottom: 1px solid var(--color-border-primary);
 }
 .extension-version-item:last-child { border-bottom: none; }
@@ -7158,20 +7360,43 @@ body {
   padding: 0.0625rem 0.375rem;
 }
 .extension-action {
+  display: inline-flex;
+  align-items: center;
   font-size: 0.75rem;
-  padding: 0.3125rem 0.75rem;
-  border-radius: 6px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
+  padding: 0.25rem 0.625rem;
+  border-radius: 5px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
   cursor: pointer;
+  transition: background .15s, border-color .15s, opacity .15s;
+  white-space: nowrap;
+}
+.extension-action:hover { background: var(--color-bg-hover); }
+.extension-action-install {
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  border-color: transparent;
+}
+.extension-action-install:hover {
+  background: var(--color-button-primary-hover);
+}
+.extension-action-install:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.extension-action-disable,
+.extension-action-enable {
+  color: var(--color-text-tertiary);
 }
-.extension-action:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); }
 .extension-action-remove {
-  color: var(--color-danger, #dc2626);
-  border-color: var(--color-danger-border, rgba(220,38,38,0.4));
+  color: var(--color-error);
+  border-color: var(--color-error-border);
+}
+.extension-action-remove:hover {
+  background: var(--color-error-bg);
+  border-color: var(--color-error);
 }
-.extension-action-remove:hover { background: var(--color-danger-bg, rgba(220,38,38,0.08)); }
 
 /* Brand Skill card */
 .brand-skill-card {
@@ -12472,5 +12697,41 @@ body.setup-mode[data-theme="dark"] {
   #workspace-overlay.active {
     display: block;
   }
+
+  /* ── New-session page: mobile ── */
+  #welcome.new-session-page {
+    position: fixed;
+    top: 3rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    padding: 0;
+    justify-content: flex-start;
+    height: auto;
+  }
+  .new-session-inner {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .new-session-spacer {
+    display: none;
+  }
+  .new-session-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 1.25rem 1rem 1rem;
+    max-width: 100%;
+  }
+  .new-session-composer {
+    flex: none;
+    position: static;
+    padding: 0.75rem 1rem 1rem;
+    border-top: 1px solid var(--color-border-subtle);
+    background: var(--color-bg-primary);
+  }
 }