@taskforcehq/taskforce 0.3.305 → 0.3.307

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;
 }
@@ -138,6 +133,32 @@
   object-fit: contain;
 }
 
+.brandHomeButton,
+.brandHomeStatic {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  font-style: inherit;
+}
+
+.brandHomeButton {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.brandHomeButton:focus-visible {
+  outline: 2px solid var(--field-focus-border, var(--brand-primary));
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
 .brandCloudSuffix {
   color: var(--brand-cloud-accent);
   letter-spacing: 0.04em;
@@ -462,6 +483,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;
@@ -1055,6 +1088,12 @@
   min-height: 0;
 }
 
+.settingsTabMcpOnly {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
 
 /* Modal Size Classes moved to Modal.module.css */
 
@@ -1079,6 +1118,12 @@
   height: 100%;
 }
 
+.settingsLayoutMcpOnly {
+  display: block;
+  min-height: 0;
+  height: auto;
+}
+
 .settingsSidebar {
   display: flex;
   flex-direction: column;
@@ -1235,6 +1280,90 @@
   position: relative;
 }
 
+.settingsTabMcpOnly .settingsContent {
+  padding: 0;
+  gap: 16px;
+  overflow: visible;
+}
+
+.settingsTabMcpOnly .settingsTabs {
+  margin: 0 -12px;
+  padding: 12px 28px 0;
+  background: var(--bg-secondary);
+  box-shadow:
+    0 -16px 0 16px var(--bg-secondary),
+    0 10px 18px color-mix(in srgb, var(--bg-secondary) 92%, transparent);
+}
+
+.mcpRegistrationHint {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.mcpRegistrationPrompt {
+  appearance: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--brand-primary-strong);
+  font: inherit;
+  font-weight: 700;
+  padding: 0 2px;
+  cursor: pointer;
+}
+
+.mcpRegistrationPrompt:hover,
+.mcpRegistrationPrompt:focus-visible {
+  color: var(--text-primary);
+  text-decoration: underline;
+  outline: none;
+}
+
+.mcpAuthRequiredCard {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 18px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 62%),
+    var(--surface-raised);
+}
+
+.mcpAuthRequiredIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  border-radius: var(--radius-md);
+  color: var(--brand-primary-strong);
+  background: var(--brand-primary-soft);
+  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
+}
+
+.mcpAuthRequiredBody {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mcpAuthRequiredActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
 @media (max-width: 900px) {
   .settingsLayout {
     grid-template-columns: 1fr;
@@ -2883,6 +3012,13 @@
   line-height: 1;
 }
 
+.taskHierarchySegment {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .taskHierarchyMeta {
   display: inline-flex;
   align-items: center;
@@ -2896,7 +3032,7 @@
   line-height: 1.2;
 }
 
-.taskHierarchyAddBtn {
+.taskHierarchyActionBtn {
   justify-content: center;
   padding-inline: 6px;
   min-width: 24px;
@@ -3923,8 +4059,15 @@
   font-size: inherit;
 }
 
+.mcpTokenValueInput {
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+  font-size: 13px;
+}
+
 .mcpTokenActionRow {
   display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
   justify-content: flex-end;
   padding: 8px 16px 14px;
 }
@@ -4659,8 +4802,10 @@
    ============================= */
 
 .docWorkspace {
+  --doc-tray-width: min(332px, calc(100vw - 96px));
   display: flex;
   flex: 1;
+  position: relative;
   min-height: 0;
   overflow: hidden;
   height: 100%;
@@ -4679,6 +4824,47 @@
   overflow: hidden;
 }
 
+.docWorkspaceTrayMode .docViewerPanel {
+  margin-left: 0;
+  transition: margin-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.docWorkspaceTrayOpen .docViewerPanel {
+  margin-left: var(--doc-tray-width);
+}
+
+.docTrayPanel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--doc-tray-width);
+  min-width: 260px;
+  max-width: 332px;
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+  box-sizing: border-box;
+  border-right: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  overflow: hidden;
+  transform: translateX(-100%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 34;
+  box-shadow: 4px 0 18px rgba(8, 10, 24, 0.16);
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 220ms;
+}
+
+.docTrayPanelOpen {
+  transform: translateX(0);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 0s;
+}
+
 .docSpinning {
   animation: docSpin 1s linear infinite;
 }
@@ -4713,6 +4899,105 @@
    ============================= */
 
 /* AI Profiles Management */
+.agentsModuleRoot {
+  --agent-tray-width: min(760px, calc(100vw - 96px));
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 20px 24px 22px;
+}
+
+.agentsModuleWithTray {
+  transition: padding-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.agentsModuleTrayOpen {
+  padding-left: calc(var(--agent-tray-width) + 20px);
+}
+
+.agentTrayPanel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--agent-tray-width);
+  min-width: min(360px, calc(100vw - 96px));
+  max-width: 760px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-right: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  overflow: hidden;
+  transform: translateX(-100%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 34;
+  box-shadow: 4px 0 18px rgba(8, 10, 24, 0.16);
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 220ms;
+}
+
+.agentTrayPanelOpen {
+  transform: translateX(0);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 0s;
+}
+
+.agentTrayHeader {
+  position: sticky;
+  top: 0;
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  box-shadow: 0 10px 16px color-mix(in srgb, var(--bg-secondary) 90%, transparent);
+  flex-shrink: 0;
+}
+
+.agentTrayTitle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.agentTrayContent {
+  flex: 1;
+  min-height: 0;
+  padding: 12px 0 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.agentTrayContentInner {
+  padding: 0 12px;
+}
+
+.agentsModuleContent {
+  width: min(100%, 760px);
+  min-height: 0;
+}
+
+.agentsModuleGroup {
+  min-height: 0;
+}
+
 .marginTop24 {
   margin-top: 24px;
 }
@@ -4744,36 +5029,25 @@
 
 .aiProfilesExplorer {
   display: grid;
-  grid-template-columns: 360px 360px;
+  grid-template-columns: 360px 620px;
   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 {
@@ -4799,30 +5073,34 @@
 
 .aiProfileGroup {
   appearance: none;
-  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
+  border: 1px solid var(--agent-card-border, 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;
   color: inherit;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--agent-card-bg, rgba(255, 255, 255, 0.02));
+  box-shadow: var(--agent-card-shadow, none);
   cursor: pointer;
   box-sizing: border-box;
-  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
+  position: relative;
+  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
 }
 
 .aiProfileGroup:hover {
-  border-color: rgba(96, 165, 250, 0.3);
-  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--agent-card-hover-border, rgba(96, 165, 250, 0.3));
+  background: var(--agent-card-hover-bg, rgba(255, 255, 255, 0.04));
+  transform: translateY(-1px);
 }
 
 .aiProfileGroupSelected {
-  border-color: rgba(96, 165, 250, 0.5);
+  border-color: var(--agent-card-selected-border, rgba(96, 165, 250, 0.5));
   background:
-    linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 165, 233, 0.06)),
-    rgba(255, 255, 255, 0.04);
-  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
+    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 10%, transparent), color-mix(in srgb, var(--status-info, #3b82f6) 4%, transparent)),
+    var(--agent-card-selected-bg, rgba(255, 255, 255, 0.04));
+  box-shadow: var(--agent-card-selected-shadow, inset 0 0 0 1px rgba(96, 165, 250, 0.16));
+  transform: none;
 }
 
 .aiProfileGroupDuplicate {
@@ -4832,35 +5110,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, color-mix(in srgb, #fff 8%, transparent), transparent),
+    var(--agent-avatar-bg, rgba(15, 23, 42, 0.42));
+  border: 1px solid var(--agent-avatar-border, 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.86;
+}
+
+.aiProfileSeatScopeIconDetail {
+  top: 18px;
+  right: 18px;
+}
+
+.aiProfileSeatScopeIconCloud {
+  color: color-mix(in srgb, var(--status-info, #60a5fa) 78%, var(--text-secondary, #cbd5e1));
+}
+
+.aiProfileSeatScopeIconLocal {
+  color: color-mix(in srgb, var(--brand-primary, #a78bfa) 78%, var(--text-secondary, #cbd5e1));
 }
 
 .aiProfileDuplicateBadge {
@@ -4893,8 +5230,8 @@
   font-family: monospace;
   font-size: 10px;
   color: var(--text-muted, #9ca3af);
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--surface-inset, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
   border-radius: 6px;
   padding: 3px 7px;
   max-width: 100%;
@@ -4929,13 +5266,15 @@
 }
 
 .aiProfileDetailCard {
+  width: 620px;
   min-width: 0;
-  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
+  border: 1px solid var(--agent-detail-border, var(--border-primary, rgba(255, 255, 255, 0.08)));
   border-radius: var(--radius-md);
-  padding: 18px;
-  background: var(--surface-panel);
-  box-shadow: var(--box-shadow-md);
+  padding: 16px;
+  background: var(--agent-detail-bg, var(--surface-panel));
+  box-shadow: var(--agent-detail-shadow, var(--box-shadow-md));
   backdrop-filter: blur(10px);
+  position: relative;
 }
 
 .aiProfileDetailHero {
@@ -4952,12 +5291,16 @@
   height: 44px;
   border-radius: 14px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
-    rgba(15, 23, 42, 0.36);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+    linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent),
+    var(--agent-avatar-bg, rgba(15, 23, 42, 0.36));
+  border: 1px solid var(--agent-avatar-border, rgba(255, 255, 255, 0.1));
   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 +5334,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 +5347,128 @@
 }
 
 .aiProfileDetailDescription {
-  margin-top: 15px;
+  margin-top: 8px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-secondary, #cbd5e1);
 }
 
-.aiProfileDetailGrid {
+.aiProfileSignatureColor {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 10px;
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.aiProfileSignatureSwatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  box-shadow:
+    0 0 0 2px rgba(255, 255, 255, 0.04),
+    0 2px 6px rgba(0, 0, 0, 0.22);
+}
+
+.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 {
+  display: block;
+  width: 100%;
+  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:disabled {
+  cursor: wait;
+  opacity: 0.62;
+  text-decoration: none;
+}
+
+.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 +5483,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 +5567,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 +5602,27 @@
   .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;
+  }
+
 }