@taskforcehq/taskforce 0.3.305 → 0.3.306

package/dist/Taskforce.module.css

@@ -1,15 +1,10 @@
+@import "./styles/fonts.css";
+
 /**
  * DevTask Manager - Styles
  * 
  * Matches FeedbackWidget styling with project design tokens.
  */
-@font-face {
-  font-family: "Russo One";
-  src: url("./assets/fonts/RussoOne-Regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 .filterGlow {
   color: var(--brand-primary) !important;
   background: var(--brand-primary-soft) !important;
@@ -127,7 +122,7 @@
   letter-spacing: -0.01em;
   flex: 1;
   min-width: 0;
-  font-family: "Russo One", sans-serif;
+  font-family: var(--font-brand);
   text-transform: uppercase;
   font-style: italic;
 }
@@ -462,6 +457,18 @@
   color: var(--color-success, #10b981);
 }
 
+.errorMessage {
+  padding: 12px 14px;
+  border-radius: var(--radius-md, 12px);
+  border: 1px solid rgba(239, 68, 68, 0.28);
+  background: rgba(127, 29, 29, 0.18);
+  color: #fecaca;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+}
+
 .successIcon {
   width: 64px;
   height: 64px;
@@ -4713,6 +4720,25 @@
    ============================= */
 
 /* AI Profiles Management */
+.agentsModuleRoot {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 20px 24px 22px;
+}
+
+.agentsModuleContent {
+  width: min(100%, 760px);
+  min-height: 0;
+}
+
+.agentsModuleGroup {
+  min-height: 0;
+}
+
 .marginTop24 {
   margin-top: 24px;
 }
@@ -4744,36 +4770,25 @@
 
 .aiProfilesExplorer {
   display: grid;
-  grid-template-columns: 360px 360px;
+  grid-template-columns: 360px 600px;
   gap: 16px;
   align-items: start;
   justify-content: start;
+  min-height: 0;
+  width: fit-content;
+  max-width: 100%;
 }
 
 .aiProfilesListPane {
   min-width: 0;
-  max-height: min(72vh, 780px);
+  max-height: min(72vh, calc(100vh - 250px));
   overflow-y: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
-  padding-right: 6px;
+  padding-right: 8px;
   scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-
-.aiProfilesListPane::-webkit-scrollbar {
-  width: 10px;
-}
-
-.aiProfilesListPane::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-  border-radius: 999px;
-}
-
-.aiProfilesListPane::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 999px;
-  border: 2px solid var(--scrollbar-track);
+  --tf-scrollbar-size: 8px;
+  --tf-scrollbar-thumb-border: 1px;
 }
 
 .aiProfilesList {
@@ -4801,7 +4816,7 @@
   appearance: none;
   border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
   border-radius: 8px;
-  padding: 8px 12px;
+  padding: 10px 40px 10px 12px;
   width: 100%;
   text-align: left;
   font: inherit;
@@ -4809,6 +4824,7 @@
   background: rgba(255, 255, 255, 0.02);
   cursor: pointer;
   box-sizing: border-box;
+  position: relative;
   transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
 }
 
@@ -4832,35 +4848,94 @@
 
 .aiProfileGroupHeader {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  align-items: flex-start;
+  gap: 10px;
   font-size: 12px;
   font-weight: 500;
 }
 
-.aiProfileName {
+.aiProfileGroupAvatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  margin-right: 2px;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
+    rgba(15, 23, 42, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.aiProfileGroupAvatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.aiProfileGroupIdentity {
+  min-width: 0;
+  display: flex;
   flex: 1;
+  flex-direction: column;
+  gap: 3px;
+  padding-top: 2px;
+}
+
+.aiProfileName {
   color: var(--text-primary, #fff);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
 }
 
-.aiProfileMetaRow {
-  display: flex;
-  flex-wrap: wrap;
+.aiProfileHandle,
+.aiProfileRole {
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.aiProfileRole {
+  color: var(--text-secondary, #cbd5e1);
+}
+
+.aiProfileSeatSummary {
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--text-secondary, #9ca3af);
+  margin-bottom: 14px;
+  color: var(--text-secondary, #cbd5e1);
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.aiProfileSurfaceBadge {
+.aiProfileSeatScopeIcon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
   display: inline-flex;
   align-items: center;
-  padding: 2px 6px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text-primary, #fff);
+  justify-content: center;
+  line-height: 1;
+  opacity: 0.95;
+}
+
+.aiProfileSeatScopeIconDetail {
+  top: 18px;
+  right: 18px;
+}
+
+.aiProfileSeatScopeIconCloud {
+  color: #60a5fa;
+}
+
+.aiProfileSeatScopeIconLocal {
+  color: #a78bfa;
 }
 
 .aiProfileDuplicateBadge {
@@ -4929,13 +5004,15 @@
 }
 
 .aiProfileDetailCard {
+  width: 600px;
   min-width: 0;
   border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
   border-radius: var(--radius-md);
-  padding: 18px;
+  padding: 16px;
   background: var(--surface-panel);
   box-shadow: var(--box-shadow-md);
   backdrop-filter: blur(10px);
+  position: relative;
 }
 
 .aiProfileDetailHero {
@@ -4958,6 +5035,10 @@
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+.aiProfileDetailAvatar {
+  flex: 0 0 auto;
+}
+
 .aiProfileDetailHeading {
   min-width: 0;
   flex: 1;
@@ -4991,18 +5072,11 @@
   font-size: 12px;
 }
 
-.aiProfileDetailSectionBadge {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: var(--text-secondary, #dbe5f4);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.aiProfileDetailRole {
+  margin-top: 10px;
+  color: var(--text-primary, #fff);
+  font-size: 13px;
+  line-height: 1.35;
 }
 
 .aiProfileDetailLinkedCount {
@@ -5011,60 +5085,101 @@
 }
 
 .aiProfileDetailDescription {
-  margin-top: 15px;
+  margin-top: 8px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-secondary, #cbd5e1);
 }
 
-.aiProfileDetailGrid {
+.aiProfileDetailDataList {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 18px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 18px;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
 }
 
-.aiProfileDetailStat {
+.aiProfileDetailDataGroup {
   display: flex;
   flex-direction: column;
-  gap: 7px;
+  gap: 6px;
   min-width: 0;
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  border-radius: 12px;
-  padding: 11px 12px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
-    rgba(15, 23, 42, 0.18);
 }
 
-.aiProfileDetailStatLabel {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-secondary, #94a3b8);
+.aiProfileDetailDateGroup {
+  border-left: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
+  padding-left: 18px;
 }
 
-.aiProfileDetailStatValue {
-  font-size: 14px;
+.aiProfileDetailDataRow {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 10px;
+  align-items: baseline;
+  font-size: 12px;
   line-height: 1.35;
+}
+
+.aiProfileDetailDataLabel {
+  color: var(--text-muted, #94a3b8);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.aiProfileDetailDataValue {
+  min-width: 0;
+  color: var(--text-secondary, #cbd5e1);
+  overflow-wrap: anywhere;
+}
+
+.aiProfileStatusSelect {
+  justify-self: end;
+  max-width: 100%;
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-secondary, #cbd5e1);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 2px 16px 2px 0;
+  cursor: pointer;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 7px) 50%,
+    calc(100% - 3px) 50%;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+
+.aiProfileStatusSelect:hover {
   color: var(--text-primary, #fff);
-  word-break: break-word;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.aiProfileStatusSelect:focus-visible {
+  outline: 2px solid rgba(96, 165, 250, 0.55);
+  outline-offset: 2px;
 }
 
 .aiProfileInstanceSection {
-  margin-top: 18px;
-  padding-top: 16px;
+  margin-top: 14px;
+  padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .aiProfileInstanceSectionHeader {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 10px;
+  gap: 3px;
+  margin-bottom: 8px;
   color: var(--text-primary, #fff);
   font-size: 13px;
   font-weight: 600;
@@ -5079,13 +5194,66 @@
 .aiProfileInstanceCard {
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
-  padding: 11px 12px;
+  padding: 9px 11px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
     rgba(15, 23, 42, 0.2);
   display: flex;
   flex-direction: column;
-  gap: 9px;
+  gap: 7px;
+  position: relative;
+}
+
+.aiProfileIdFooter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.aiProfileIdFooterValue {
+  max-width: 100%;
+  color: var(--text-muted, #94a3b8);
+  font-family: monospace;
+  font-size: 11px;
+  line-height: 1.35;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.aiProfileDangerTextButton {
+  align-self: flex-end;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+  padding: 2px 0;
+  cursor: pointer;
+  transition: color var(--transition-base), text-decoration-color var(--transition-base);
+}
+
+.aiProfileDangerTextButton:hover:not(:disabled),
+.aiProfileDangerTextButton:focus-visible {
+  color: #f87171;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 3px;
+}
+
+.aiProfileDangerTextButton:focus-visible {
+  outline: 2px solid rgba(248, 113, 113, 0.55);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+.aiProfileDangerTextButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
 }
 
 .aiProfileInstanceTopRow {
@@ -5110,9 +5278,31 @@
   color: var(--text-secondary, #94a3b8);
 }
 
+.aiProfileInlineError {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  background: rgba(127, 29, 29, 0.14);
+  color: #fecaca;
+  border-radius: 10px;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 @media (max-width: 1100px) {
+  .agentsModuleRoot {
+    padding: 20px;
+  }
+
+  .agentsModuleContent {
+    width: 100%;
+  }
+
   .aiProfilesExplorer {
     grid-template-columns: minmax(0, 1fr);
+    width: 100%;
   }
 
   .aiProfilesListPane {
@@ -5123,10 +5313,26 @@
   .aiProfileDetailPane {
     position: static;
   }
+
+  .aiProfileDetailCard {
+    width: auto;
+  }
 }
 
 @media (max-width: 640px) {
-  .aiProfileDetailGrid {
+  .aiProfileDetailDataList {
+    grid-template-columns: 1fr;
+  }
+
+  .aiProfileDetailDateGroup {
+    border-left: 0;
+    border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
+    padding-left: 0;
+    padding-top: 12px;
+  }
+
+  .aiProfileDetailDataRow {
     grid-template-columns: 1fr;
+    gap: 2px;
   }
 }