@taskforcehq/taskforce 0.3.329 → 0.3.330

package/dist/Taskforce.module.css

@@ -4507,7 +4507,10 @@ button.projectName:focus-visible {
   background: #1e1e2e !important;
   padding: 14px 16px !important;
   border: none !important;
-  overflow-x: auto;
+  overflow-x: hidden;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   border-radius: 0 !important;
 }
 
@@ -5626,6 +5629,246 @@ button.projectName:focus-visible {
   display: none;
 }
 
+.taskforceModelConnectionsRoot {
+  display: grid;
+  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
+  width: 100%;
+  min-height: 0;
+}
+
+.taskforceModelConnectionsRootExternalLibrary {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.taskforceModelConnectionsWorkspace {
+  display: grid;
+  gap: 1rem;
+  width: min(100%, 920px);
+  min-width: 0;
+  padding: 18px clamp(18px, 3vw, 32px);
+  box-sizing: border-box;
+  align-content: start;
+}
+
+.taskforceModelConnectionsHeader,
+.taskforceModelConnectionCardHeader,
+.taskforceModelConnectionActions,
+.taskforceModelConnectionCodeRow,
+.taskforceAgentConnectionControlHeader,
+.taskforceAgentConnectionBindingRow,
+.taskforceAgentConnectionCallout {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.taskforceModelConnectionsHeader,
+.taskforceModelConnectionCardHeader,
+.taskforceAgentConnectionControlHeader,
+.taskforceAgentConnectionCallout {
+  justify-content: space-between;
+}
+
+.taskforceModelConnectionsHeader > div,
+.taskforceModelConnectionCardHeader > div {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.taskforceModelConnectionNameRow,
+.taskforceModelConnectionNameEditor {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.taskforceModelConnectionCardHeader > .taskforceModelConnectionIdentity {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.taskforceModelConnectionIdentityText {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.taskforceModelConnectionLogo {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 2.25rem;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--surface-elevated);
+}
+
+.taskforceModelConnectionLogo img {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  object-fit: contain;
+}
+
+.taskforceModelConnectionNameRow strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskforceModelConnectionNameEditor .input {
+  min-width: 12rem;
+  max-width: 24rem;
+}
+
+.taskforceModelConnectionCard,
+.taskforceAgentConnectionControl {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--surface-panel);
+}
+
+.taskforceModelConnectionLogin {
+  border-color: var(--status-warning);
+  background: var(--surface-elevated);
+}
+
+.taskforceModelConnectionCardHeader strong,
+.taskforceAgentConnectionControlHeader strong,
+.taskforceAgentConnectionControl > div:first-child strong {
+  color: var(--text-title);
+  font-size: 0.875rem;
+}
+
+.taskforceModelConnectionCardHeader > div > span,
+.taskforceAgentConnectionControl > span,
+.taskforceAgentConnectionCallout > span,
+.taskforceModelConnectionsEmpty > span {
+  color: var(--text-helper);
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.taskforceModelConnectionMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.taskforceModelConnectionActions {
+  flex-wrap: wrap;
+}
+
+.taskforceModelConnectionCodeRow {
+  flex-wrap: wrap;
+}
+
+.taskforceModelConnectionCodeRow code {
+  min-width: 9rem;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text-title);
+  font-size: 1rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.taskforceModelConnectionsLoading,
+.taskforceModelConnectionsEmpty {
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+}
+
+.taskforceModelConnectionsEmpty {
+  flex-direction: column;
+  gap: 0.5rem;
+  border: 1px dashed var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  text-align: center;
+}
+
+.taskforceModelConnectionsEmpty strong {
+  color: var(--text-title);
+  font-size: 0.875rem;
+}
+
+.taskforceAgentConnectionControl {
+  margin-top: 0.75rem;
+  background: var(--surface-inset);
+}
+
+.taskforceAgentConnectionControl > div:first-child,
+.taskforceAgentConnectionControlHeader > div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.taskforceAgentConnectionBindingRow {
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.taskforceAgentConnectionBindingRow > label {
+  flex: 1 1 16rem;
+}
+
+@media (max-width: 720px) {
+  .taskforceModelConnectionsRoot {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .taskforceModelConnectionsHeader,
+  .taskforceModelConnectionCardHeader,
+  .taskforceAgentConnectionControlHeader,
+  .taskforceAgentConnectionCallout {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .taskforceModelConnectionActions > button,
+  .taskforceModelConnectionCodeRow > a,
+  .taskforceModelConnectionCodeRow > button,
+  .taskforceAgentConnectionBindingRow > button,
+  .taskforceAgentConnectionCallout > button,
+  .taskforceModelConnectionsHeader > button,
+  .taskforceModelConnectionsWorkspace > .taskforceAgentTestError > button,
+  .taskforceModelConnectionsWorkspace > .taskforceAgentTestNotice > button {
+    flex: 1 1 auto;
+    min-height: 44px;
+  }
+
+  .taskforceModelConnectionsWorkspace > .taskforceAgentTestError,
+  .taskforceModelConnectionsWorkspace > .taskforceAgentTestNotice {
+    flex-wrap: wrap;
+  }
+
+  .taskforceModelConnectionsWorkspace > .taskforceAgentTestError > span,
+  .taskforceModelConnectionsWorkspace > .taskforceAgentTestNotice > span {
+    flex: 1 1 calc(100% - 24px);
+  }
+
+  .taskforceModelConnectionCodeRow > :global(button.tf-control-icon) {
+    min-width: 44px;
+  }
+}
+
 .taskforceAgentBuilderEmpty {
   min-height: min(420px, 58vh);
   display: flex;
@@ -6084,7 +6327,7 @@ button.projectName:focus-visible {
   min-width: 0;
 }
 
-.taskforceAgentOutputPanel {
+.taskforceAgentHeaderTestPanel {
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -6095,31 +6338,22 @@ button.projectName:focus-visible {
   padding: 12px;
 }
 
-.taskforceAgentTestTitle {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.taskforceAgentTestTitle .taskforceAgentBuilderEmptyIcon {
-  width: 36px;
-  height: 36px;
-  flex: 0 0 auto;
+.taskforceAgentTestComposer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
 }
 
-.taskforceAgentTestTitle > div {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
+.taskforceAgentTestComposer textarea {
+  min-height: 92px;
+  resize: vertical;
 }
 
-.taskforceAgentTestTitle p {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: 11px;
-  line-height: 1.4;
+.taskforceAgentTestSendButton {
+  width: 36px;
+  height: 36px;
+  margin-bottom: 0;
 }
 
 .taskforceAgentTestNotice,
@@ -6153,19 +6387,13 @@ button.projectName:focus-visible {
   color: var(--status-error);
 }
 
-.taskforceAgentTestPending svg {
-  color: var(--accent-primary);
-}
-
-.taskforceAgentTestActions {
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 8px;
+.taskforceAgentRetryButton {
+  flex: 0 0 auto;
+  margin-left: auto;
 }
 
-.taskforceAgentTestActions > button:first-child {
-  margin-right: auto;
+.taskforceAgentTestPending svg {
+  color: var(--accent-primary);
 }
 
 .taskforceAgentTestRestriction {
@@ -6373,17 +6601,6 @@ button.projectName:focus-visible {
   padding: 12px 0;
 }
 
-.taskforceAgentSignatureColorField > div:first-child {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.taskforceAgentSignatureColorField small {
-  color: var(--text-helper);
-  font-size: 11px;
-}
-
 .taskforceAgentSignatureColorField .aiProfileColorPicker {
   justify-content: flex-start;
   margin-top: 0;
@@ -6534,6 +6751,34 @@ button.projectName:focus-visible {
   background: color-mix(in srgb, var(--input-bg) 72%, transparent);
 }
 
+.taskforceAgentToolCopyButton {
+  grid-column: 1 / -1;
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 26px;
+  padding: 4px 7px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: var(--button-bg, var(--input-bg));
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.taskforceAgentToolCopyButton:hover {
+  color: var(--text-primary);
+  border-color: var(--border-secondary, var(--border-primary));
+}
+
+.taskforceAgentToolCopyButton span {
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
 .taskforceAgentToolDetailsGrid span {
   color: var(--text-helper);
   font-size: 10px;

package/dist/components/features/AiProfilesModule.js

@@ -11,9 +11,8 @@ import { buildVersionedAvatarUrl } from '../../utils/avatarDisplay';
 import { getAiProfileDefaultLogoUrl } from '../../utils/aiProfileDefaultLogo';
 import { dispatchTaskforceAiProfilesMutated, TASKFORCE_AI_PROFILES_MUTATED_EVENT, } from '../../utils/aiProfileEvents';
 import { getTaskforceManagedAgentId, isAiProfileAvatarGenerationEligible, } from '../../shared/aiProfileAvatarEligibility.js';
-import { AI_PROFILE_COLOR_TOKENS } from '../../shared/aiProfileColors.js';
+import { AI_PROFILE_SIGNATURE_COLOR_OPTIONS } from '../../shared/aiProfileColors.js';
 import { AiIdentityRosterCard } from '../ui/AiIdentityRosterCard.js';
-import { COLOR_PALETTE } from '../../shared/colorPalette.js';
 import { AI_PROFILE_SURFACE_TYPES, formatAiProfileSurfaceTypeLabel, formatAiProfileSurfaceTypeSectionLabel, getAiProfileSurfaceTypeSection, parseAiProfileSurfaceType } from '../../shared/aiProfileSurfaceType.js';
 import { formatAiProfileSeatScopeLabel, parseAiProfileSeatScope } from '../../shared/aiProfileSeatScope.js';
 const AI_PROFILE_DISPLAY_SECTION_ORDER = [
@@ -716,9 +715,8 @@ export function AiProfilesModule({ workspaceId, runtimeMode = 'local', cloudAuth
                                                         setAiAvatarError(null);
                                                         setAiAvatarNotice(null);
                                                         setAvatarEditorProfileId(selectedGroup.primaryProfile.id);
-                                                    } }), _jsxs("div", { className: styles.aiProfileDetailHeading, children: [_jsx("div", { className: styles.aiProfileDetailTitleRow, children: _jsx("h5", { className: styles.aiProfileDetailTitle, children: selectedGroup.primaryProfile.name }) }), _jsxs("div", { className: styles.aiProfileDetailMetaRow, children: [_jsxs("span", { className: styles.aiProfileDetailHandle, children: ["@", selectedGroup.primaryProfile.username] }), selectedGroup.profiles.length > 1 && (_jsxs("span", { className: styles.aiProfileDetailLinkedCount, children: [selectedGroup.profiles.length, " linked"] }))] }), _jsxs("div", { className: styles.aiProfileDetailRole, children: ["Role: ", selectedGroup.primaryProfile.role || 'Not set'] }), selectedGroup.primaryProfile.description && (_jsx("div", { className: styles.aiProfileDetailDescription, children: selectedGroup.primaryProfile.description })), _jsxs("div", { className: styles.aiProfileSignatureColor, children: [_jsx("span", { children: "Signature color" }), _jsxs("button", { type: "button", className: styles.aiProfileSignatureColorButton, onClick: () => setColorPickerOpen((open) => !open), disabled: colorBusy, "aria-expanded": colorPickerOpen, "aria-label": "Change signature color", children: [_jsx("span", { className: styles.aiProfileSignatureSwatch, style: { backgroundColor: selectedGroup.primaryProfile.color }, "aria-hidden": "true" }), _jsx("span", { children: selectedGroup.primaryProfile.color })] })] }), colorPickerOpen && (_jsxs("div", { className: styles.aiProfileColorPicker, "aria-label": "Signature color options", children: [AI_PROFILE_COLOR_TOKENS.map((token) => {
-                                                                    const color = COLOR_PALETTE[token];
-                                                                    return _jsx("button", { type: "button", className: styles.aiProfileColorOption, style: { backgroundColor: color }, "aria-label": `Use ${token}`, "aria-pressed": selectedGroup.primaryProfile.color.toLowerCase() === color.toLowerCase(), disabled: colorBusy, onClick: () => { void handleColorChange(selectedGroup, color); } }, token);
+                                                    } }), _jsxs("div", { className: styles.aiProfileDetailHeading, children: [_jsx("div", { className: styles.aiProfileDetailTitleRow, children: _jsx("h5", { className: styles.aiProfileDetailTitle, children: selectedGroup.primaryProfile.name }) }), _jsxs("div", { className: styles.aiProfileDetailMetaRow, children: [_jsxs("span", { className: styles.aiProfileDetailHandle, children: ["@", selectedGroup.primaryProfile.username] }), selectedGroup.profiles.length > 1 && (_jsxs("span", { className: styles.aiProfileDetailLinkedCount, children: [selectedGroup.profiles.length, " linked"] }))] }), _jsxs("div", { className: styles.aiProfileDetailRole, children: ["Role: ", selectedGroup.primaryProfile.role || 'Not set'] }), selectedGroup.primaryProfile.description && (_jsx("div", { className: styles.aiProfileDetailDescription, children: selectedGroup.primaryProfile.description })), _jsxs("div", { className: styles.aiProfileSignatureColor, children: [_jsx("span", { children: "Signature color" }), _jsxs("button", { type: "button", className: styles.aiProfileSignatureColorButton, onClick: () => setColorPickerOpen((open) => !open), disabled: colorBusy, "aria-expanded": colorPickerOpen, "aria-label": "Change signature color", children: [_jsx("span", { className: styles.aiProfileSignatureSwatch, style: { backgroundColor: selectedGroup.primaryProfile.color }, "aria-hidden": "true" }), _jsx("span", { children: selectedGroup.primaryProfile.color })] })] }), colorPickerOpen && (_jsxs("div", { className: styles.aiProfileColorPicker, "aria-label": "Signature color options", children: [AI_PROFILE_SIGNATURE_COLOR_OPTIONS.map(({ name, value: color }) => {
+                                                                    return _jsx("button", { type: "button", className: styles.aiProfileColorOption, style: { backgroundColor: color }, "aria-label": `Use ${name}`, "aria-pressed": selectedGroup.primaryProfile.color.toLowerCase() === color.toLowerCase(), disabled: colorBusy, onClick: () => { void handleColorChange(selectedGroup, color); } }, color);
                                                                 }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, disabled: colorBusy, onClick: () => { void handleColorChange(selectedGroup, undefined, true); }, children: "Reset" })] })), colorError && _jsx("div", { className: styles.aiProfileInlineError, children: colorError })] })] }), _jsxs("div", { className: styles.aiProfileDetailDataList, children: [_jsx("div", { className: styles.aiProfileDetailDataGroup, children: selectedProfileDataGroups.attributes.map((row) => (_jsxs("div", { className: styles.aiProfileDetailDataRow, children: [_jsx("span", { className: styles.aiProfileDetailDataLabel, children: row.label }), row.label === 'Category' && !isTaskforceManagedAiProfile(selectedGroup.primaryProfile) ? (_jsx("span", { className: styles.aiProfileDetailDataValue, children: _jsxs("select", { className: styles.aiProfileStatusSelect, "aria-label": "Agent category", value: selectedGroup.primaryProfile.surfaceType ?? '', disabled: aiProfileCategoryBusy, onChange: (event) => {
                                                                         void handleCategoryChange(selectedGroup, event.target.value);
                                                                     }, children: [_jsx("option", { value: "", children: "Unclassified" }), AI_PROFILE_SURFACE_TYPES.map((surfaceType) => (_jsx("option", { value: surfaceType, children: formatAiProfileSurfaceTypeLabel(surfaceType) }, surfaceType)))] }) })) : (_jsx("span", { className: styles.aiProfileDetailDataValue, children: row.value }))] }, row.label))) }), _jsx("div", { className: `${styles.aiProfileDetailDataGroup} ${styles.aiProfileDetailDateGroup}`, children: selectedProfileDataGroups.dates.map((row) => (_jsxs("div", { className: styles.aiProfileDetailDataRow, children: [_jsx("span", { className: styles.aiProfileDetailDataLabel, children: row.label }), row.label === 'Status' ? (_jsx("span", { className: styles.aiProfileDetailDataValue, children: _jsxs("select", { className: styles.aiProfileStatusSelect, "aria-label": "Agent roster status", value: selectedGroup.primaryProfile.archivedAt ? 'retired' : 'active', onChange: (event) => {