@taskforcehq/taskforce 0.3.306 → 0.3.307

package/README.md

@@ -45,8 +45,6 @@ These exist in the codebase in some form, but should not be treated as current p
 - **Workflow editor**: currently disabled and should not be presented as an active feature
 - **Embedded widget/in-app overlay version**: not part of the product right now, not tested recently, and likely to be deprecated
 
-The README below reflects the product that is actually safe to describe today.
-
 ## Product surfaces
 
 - `apps/app` - the main Taskforce application

package/dist/Taskforce.module.css

@@ -133,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;
@@ -1062,6 +1088,12 @@
   min-height: 0;
 }
 
+.settingsTabMcpOnly {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
 
 /* Modal Size Classes moved to Modal.module.css */
 
@@ -1086,6 +1118,12 @@
   height: 100%;
 }
 
+.settingsLayoutMcpOnly {
+  display: block;
+  min-height: 0;
+  height: auto;
+}
+
 .settingsSidebar {
   display: flex;
   flex-direction: column;
@@ -1242,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;
@@ -2890,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;
@@ -2903,7 +3032,7 @@
   line-height: 1.2;
 }
 
-.taskHierarchyAddBtn {
+.taskHierarchyActionBtn {
   justify-content: center;
   padding-inline: 6px;
   min-width: 24px;
@@ -3930,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;
 }
@@ -4666,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%;
@@ -4686,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;
 }
@@ -4721,6 +4900,8 @@
 
 /* AI Profiles Management */
 .agentsModuleRoot {
+  --agent-tray-width: min(760px, calc(100vw - 96px));
+  position: relative;
   flex: 1;
   min-width: 0;
   min-height: 0;
@@ -4730,6 +4911,84 @@
   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;
@@ -4770,7 +5029,7 @@
 
 .aiProfilesExplorer {
   display: grid;
-  grid-template-columns: 360px 600px;
+  grid-template-columns: 360px 620px;
   gap: 16px;
   align-items: start;
   justify-content: start;
@@ -4814,31 +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: 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;
   position: relative;
-  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
+  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 {
@@ -4865,9 +5127,9 @@
   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);
+    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 {
@@ -4922,7 +5184,7 @@
   align-items: center;
   justify-content: center;
   line-height: 1;
-  opacity: 0.95;
+  opacity: 0.86;
 }
 
 .aiProfileSeatScopeIconDetail {
@@ -4931,11 +5193,11 @@
 }
 
 .aiProfileSeatScopeIconCloud {
-  color: #60a5fa;
+  color: color-mix(in srgb, var(--status-info, #60a5fa) 78%, var(--text-secondary, #cbd5e1));
 }
 
 .aiProfileSeatScopeIconLocal {
-  color: #a78bfa;
+  color: color-mix(in srgb, var(--brand-primary, #a78bfa) 78%, var(--text-secondary, #cbd5e1));
 }
 
 .aiProfileDuplicateBadge {
@@ -4968,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%;
@@ -5004,13 +5266,13 @@
 }
 
 .aiProfileDetailCard {
-  width: 600px;
+  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: 16px;
-  background: var(--surface-panel);
-  box-shadow: var(--box-shadow-md);
+  background: var(--agent-detail-bg, var(--surface-panel));
+  box-shadow: var(--agent-detail-shadow, var(--box-shadow-md));
   backdrop-filter: blur(10px);
   position: relative;
 }
@@ -5029,9 +5291,9 @@
   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);
 }
 
@@ -5091,6 +5353,26 @@
   color: var(--text-secondary, #cbd5e1);
 }
 
+.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: minmax(0, 1fr) minmax(0, 1fr);
@@ -5135,7 +5417,8 @@
 }
 
 .aiProfileStatusSelect {
-  justify-self: end;
+  display: block;
+  width: 100%;
   max-width: 100%;
   appearance: none;
   border: 0;
@@ -5164,6 +5447,12 @@
   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;
@@ -5335,4 +5624,5 @@
     grid-template-columns: 1fr;
     gap: 2px;
   }
+
 }

package/dist/TaskforceCore.js

@@ -279,6 +279,7 @@ function TaskforceCoreWithRouter({ config = {}, initialTaskId, onTaskCountChange
         && !isPricingRoute
         && !isPlansRoute
         && !isPlansScreen
+        && !isLoginRoute
         && bootstrapState.appPending
         && (isSetupRoute || runtimeMode === 'cloud' || isLikelyCloudAppHost);
     const shouldHoldForCommercialOnboardingRedirect = runtimeMode === 'cloud'