@mndrk/agx 2.0.13 → 2.0.15

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/styles/{threadSidebar.css → workspaceSidebar.css}

@@ -1,7 +1,7 @@
 /* ──────────────────────────────────────────────
    Sidebar shell
    ────────────────────────────────────────────── */
-.thread-sidebar {
+.workspace-sidebar {
   width: 16rem;
   min-width: 16rem;
   border-right: 1px solid #e2e8f0;
@@ -15,28 +15,28 @@
   overflow: hidden;
 }
 
-.thread-sidebar--collapsed {
+.workspace-sidebar--collapsed {
   width: 3.5rem;
   min-width: 3.5rem;
 }
 
-.thread-sidebar--collapsed .thread-sidebar__brand {
+.workspace-sidebar--collapsed .workspace-sidebar__brand {
   justify-content: center;
 }
 
-.thread-sidebar--collapsed .thread-sidebar__brand-icon {
+.workspace-sidebar--collapsed .workspace-sidebar__brand-icon {
   cursor: pointer;
   transition: transform 0.15s ease;
 }
 
-.thread-sidebar--collapsed .thread-sidebar__brand-icon:hover {
+.workspace-sidebar--collapsed .workspace-sidebar__brand-icon:hover {
   transform: scale(1.08);
 }
 
 /* ──────────────────────────────────────────────
    Brand bar  (matches p-4 + border-b border-slate-100 + gap-2)
    ────────────────────────────────────────────── */
-.thread-sidebar__brand {
+.workspace-sidebar__brand {
   padding: 1rem;
   border-bottom: 1px solid #f1f5f9;
   /* slate-100 */
@@ -45,7 +45,7 @@
   gap: 0.5rem;
 }
 
-.thread-sidebar__brand-icon {
+.workspace-sidebar__brand-icon {
   width: 2rem;
   height: 2rem;
   border-radius: 0.5rem;
@@ -61,7 +61,7 @@
   flex-shrink: 0;
 }
 
-.thread-sidebar__brand-title {
+.workspace-sidebar__brand-title {
   margin: 0;
   font-size: 1.125rem;
   /* text-lg */
@@ -73,7 +73,7 @@
 /* ──────────────────────────────────────────────
    Scrollable nav area  (flex-1, p-3, space-y-1)
    ────────────────────────────────────────────── */
-.thread-sidebar__content {
+.workspace-sidebar__content {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
@@ -86,19 +86,19 @@
 /* ──────────────────────────────────────────────
    Section groupings
    ────────────────────────────────────────────── */
-.thread-sidebar__section {
+.workspace-sidebar__section {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.thread-sidebar__section--workspaces {
+.workspace-sidebar__section--workspaces {
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
 
-.thread-sidebar__section-header {
+.workspace-sidebar__section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -108,7 +108,7 @@
 
 /* Section labels — "WORKSPACE", "AGENTS"
    (text-xs font-semibold text-slate-400 uppercase tracking-wider px-3 mt-4 mb-2) */
-.thread-sidebar__section-label {
+.workspace-sidebar__section-label {
   margin: 1rem 0 0.5rem;
   padding: 0 0.75rem;
   font-size: 0.6875rem;
@@ -119,11 +119,32 @@
   /* slate-400 */
 }
 
+/* Clickable section link (e.g. "Agents") — distinct from static labels */
+.workspace-sidebar__section-link {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 1rem 0 0.5rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: #64748b; /* slate-500 — slightly darker than labels */
+  border-radius: 0.375rem;
+  transition: color 0.15s, background-color 0.15s;
+}
+.workspace-sidebar__section-link:hover {
+  color: #334155; /* slate-700 */
+  background-color: #f1f5f9; /* slate-100 */
+}
+
 /* ──────────────────────────────────────────────
    Generic nav button  (Dashboard etc.)
    (w-full flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-md)
    ────────────────────────────────────────────── */
-.thread-sidebar__nav-item {
+.workspace-sidebar__nav-item {
   width: 100%;
   border: 0;
   background: transparent;
@@ -132,7 +153,7 @@
   /* rounded-md */
   display: inline-flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.35rem;
   font-size: 0.875rem;
   /* text-sm */
   font-weight: 500;
@@ -143,13 +164,13 @@
   text-align: left;
 }
 
-.thread-sidebar__nav-item:hover {
+.workspace-sidebar__nav-item:hover {
   background: #f1f5f9;
   /* slate-100 */
   color: #0f172a;
 }
 
-.thread-sidebar__nav-item--active {
+.workspace-sidebar__nav-item--active {
   background: #eef2ff;
   /* indigo-50 */
   color: #4338ca;
@@ -159,7 +180,7 @@
 /* ──────────────────────────────────────────────
    Workspace list (threads)
    ────────────────────────────────────────────── */
-.thread-sidebar__workspace-list {
+.workspace-sidebar__workspace-list {
   list-style: none;
   margin: 0;
   padding: 0.125rem 0;
@@ -170,27 +191,27 @@
   overflow-y: auto;
 }
 
-.thread-sidebar__workspace-item {
+.workspace-sidebar__workspace-item {
   position: relative;
 }
 
-.thread-sidebar__workspace-nav-item {
+.workspace-sidebar__workspace-nav-item {
   padding-right: 3rem;
 }
 
-.thread-sidebar__workspace-nav-item:focus-visible,
-.thread-sidebar__workspace-action:focus-visible {
+.workspace-sidebar__workspace-nav-item:focus-visible,
+.workspace-sidebar__workspace-action:focus-visible {
   outline: 2px solid #94a3b8;
   outline-offset: 2px;
 }
 
-.thread-sidebar__workspace-title {
+.workspace-sidebar__workspace-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.thread-sidebar__workspace-actions {
+.workspace-sidebar__workspace-actions {
   position: absolute;
   top: 50%;
   right: 0.35rem;
@@ -202,7 +223,7 @@
   transition: opacity 0.12s ease;
 }
 
-.thread-sidebar__workspace-action {
+.workspace-sidebar__workspace-action {
   border: 1px solid transparent;
   background: #ffffff;
   color: #94a3b8;
@@ -216,24 +237,24 @@
   transition: all 0.12s ease;
 }
 
-.thread-sidebar__workspace-item:hover .thread-sidebar__workspace-actions,
-.thread-sidebar__workspace-nav-item--active+.thread-sidebar__workspace-actions {
+.workspace-sidebar__workspace-item:hover .workspace-sidebar__workspace-actions,
+.workspace-sidebar__workspace-nav-item--active+.workspace-sidebar__workspace-actions {
   opacity: 1;
 }
 
-.thread-sidebar__workspace-action:hover:not(:disabled) {
+.workspace-sidebar__workspace-action:hover:not(:disabled) {
   color: #0f172a;
   background: #f8fafc;
   border-color: #e2e8f0;
 }
 
-.thread-sidebar__workspace-action--delete:hover:not(:disabled) {
+.workspace-sidebar__workspace-action--delete:hover:not(:disabled) {
   color: #dc2626;
   background: #fef2f2;
   border-color: #fee2e2;
 }
 
-.thread-sidebar__workspace-action:disabled {
+.workspace-sidebar__workspace-action:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -241,13 +262,13 @@
 /* ──────────────────────────────────────────────
    Section-header action buttons  (+ create)
    ────────────────────────────────────────────── */
-.thread-sidebar__header-actions {
+.workspace-sidebar__header-actions {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
 }
 
-.thread-sidebar__action {
+.workspace-sidebar__action {
   border: 1px solid #e2e8f0;
   background: #ffffff;
   width: 1.75rem;
@@ -261,19 +282,19 @@
   transition: all 0.15s ease;
 }
 
-.thread-sidebar__action:hover:not(:disabled) {
+.workspace-sidebar__action:hover:not(:disabled) {
   background: #f8fafc;
   color: #0f172a;
 }
 
-.thread-sidebar__action:disabled {
+.workspace-sidebar__action:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-.thread-sidebar__action:focus-visible,
-.thread-sidebar__empty-cta:focus-visible,
-.thread-sidebar__settings-button:focus-visible {
+.workspace-sidebar__action:focus-visible,
+.workspace-sidebar__empty-cta:focus-visible,
+.workspace-sidebar__settings-button:focus-visible {
   outline: 2px solid #94a3b8;
   outline-offset: 2px;
 }
@@ -281,7 +302,7 @@
 /* ──────────────────────────────────────────────
    Thread item cards (feed-style)
    ────────────────────────────────────────────── */
-.thread-sidebar__list {
+.workspace-sidebar__list {
   list-style: none;
   margin: 0;
   padding: 0.25rem 0;
@@ -363,11 +384,11 @@
 /* ──────────────────────────────────────────────
    Empty state
    ────────────────────────────────────────────── */
-.thread-sidebar__empty {
+.workspace-sidebar__empty {
   padding: 0.75rem 0.625rem;
 }
 
-.thread-sidebar__empty-card {
+.workspace-sidebar__empty-card {
   border: 1px dashed #cbd5e1;
   border-radius: 0.75rem;
   background: #f8fafc;
@@ -378,21 +399,21 @@
   gap: 0.5rem;
 }
 
-.thread-sidebar__empty-title {
+.workspace-sidebar__empty-title {
   margin: 0;
   font-size: 0.8125rem;
   font-weight: 600;
   color: #334155;
 }
 
-.thread-sidebar__empty-copy {
+.workspace-sidebar__empty-copy {
   margin: 0;
   font-size: 0.75rem;
   line-height: 1.45;
   color: #64748b;
 }
 
-.thread-sidebar__empty-cta {
+.workspace-sidebar__empty-cta {
   border: 1px solid #cbd5e1;
   background: #ffffff;
   color: #0f172a;
@@ -404,11 +425,11 @@
   width: fit-content;
 }
 
-.thread-sidebar__empty-cta:hover:not(:disabled) {
+.workspace-sidebar__empty-cta:hover:not(:disabled) {
   background: #f8fafc;
 }
 
-.thread-sidebar__empty-cta:disabled {
+.workspace-sidebar__empty-cta:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -417,7 +438,7 @@
    Models / Agents section  (matches "Models Active" in snippet)
    — dot + name row, model tag fades in on hover
    ────────────────────────────────────────────── */
-.thread-sidebar__models {
+.workspace-sidebar__models {
   list-style: none;
   margin: 0;
   padding: 0.125rem 0;
@@ -425,7 +446,7 @@
   flex-direction: column;
 }
 
-.thread-sidebar__model-item {
+.workspace-sidebar__model-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -434,25 +455,25 @@
   gap: 0.75rem;
 }
 
-.thread-sidebar__model-item:hover {
+.workspace-sidebar__model-item:hover {
   background: #f1f5f9;
 }
 
-.thread-sidebar__model-dot {
+.workspace-sidebar__model-dot {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 999px;
   flex-shrink: 0;
 }
 
-.thread-sidebar__model-name {
+.workspace-sidebar__model-name {
   font-size: 0.875rem;
   font-weight: 500;
   color: #334155;
   /* slate-700 */
 }
 
-.thread-sidebar__model-meta {
+.workspace-sidebar__model-meta {
   font-size: 0.625rem;
   /* text-[10px] */
   color: #94a3b8;
@@ -461,11 +482,11 @@
   text-align: right;
 }
 
-.thread-sidebar__model-item:hover .thread-sidebar__model-meta {
+.workspace-sidebar__model-item:hover .workspace-sidebar__model-meta {
   opacity: 1;
 }
 
-.thread-sidebar__models-empty {
+.workspace-sidebar__models-empty {
   margin: 0;
   padding: 0.25rem 0.75rem 0;
   font-size: 0.75rem;
@@ -476,12 +497,12 @@
    Footer / Settings button
    (w-full flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-md)
    ────────────────────────────────────────────── */
-.thread-sidebar__footer {
+.workspace-sidebar__footer {
   border-top: 1px solid #f1f5f9;
   padding: 0.75rem;
 }
 
-.thread-sidebar__settings-button {
+.workspace-sidebar__settings-button {
   width: 100%;
   border: 0;
   background: transparent;
@@ -498,7 +519,8 @@
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.thread-sidebar__settings-button:hover {
+.workspace-sidebar__settings-button:hover {
   background: #f1f5f9;
   color: #0f172a;
-}
+}
+

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/tsconfig.json

@@ -41,6 +41,7 @@
     "test",
     "__tests__",
     "**/*.test.ts",
-    "**/*.test.tsx"
+    "**/*.test.tsx",
+    "agent_profile_example.tsx"
   ]
 }