refactor: update task assignment message formatting and enhance UI elements
- Changed task assignment message to use italic formatting for task subject for better emphasis. - Updated the task instruction message to utilize a wrapping function for improved readability. - Enhanced splash screen background with an animated gradient for a more dynamic visual experience. - Improved team detail view messaging to clarify provisioning status. - Adjusted member list sorting logic to utilize a new lead member detection function.
This commit is contained in:
iliya
parent
82a70d8a16
commit
7dda73aa74
9 changed files with 43 additions and 17 deletions
|
|
@ -46,9 +46,9 @@ function buildAssignmentMessage(context, task, options = {}) {
|
|||
typeof options.prompt === 'string' && options.prompt.trim() ? options.prompt.trim() : '';
|
||||
const taskLabel = `#${task.displayId || task.id}`;
|
||||
const lines = [
|
||||
`New task assigned to you: ${taskLabel} "${task.subject}".`,
|
||||
`New task assigned to you: ${taskLabel} *${task.subject}*`,
|
||||
``,
|
||||
`*If you are idle and this task is ready to start, start it now. If you are busy, blocked, or still need more context, immediately add a short task comment with the reason and your best ETA or what you are waiting on, and keep this task in TODO until you actually begin.*`,
|
||||
wrapAgentBlock(`If you are idle and this task is ready to start, start it now. If you are busy, blocked, or still need more context, immediately add a short task comment with the reason and your best ETA or what you are waiting on, and keep this task in TODO until you actually begin.`),
|
||||
];
|
||||
|
||||
if (description) {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
TEAM_CREATE,
|
||||
TEAM_CREATE_CONFIG,
|
||||
TEAM_CREATE_TASK,
|
||||
TEAM_DELETE_DRAFT,
|
||||
TEAM_DELETE_TASK_ATTACHMENT,
|
||||
TEAM_DELETE_TEAM,
|
||||
TEAM_GET_ALL_TASKS,
|
||||
|
|
@ -22,6 +23,7 @@ import {
|
|||
TEAM_GET_MEMBER_LOGS,
|
||||
TEAM_GET_MEMBER_STATS,
|
||||
TEAM_GET_PROJECT_BRANCH,
|
||||
TEAM_GET_SAVED_REQUEST,
|
||||
TEAM_GET_TASK_ATTACHMENT,
|
||||
TEAM_KILL_PROCESS,
|
||||
TEAM_LAUNCH,
|
||||
|
|
@ -51,8 +53,6 @@ import {
|
|||
TEAM_TOOL_APPROVAL_READ_FILE,
|
||||
TEAM_TOOL_APPROVAL_RESPOND,
|
||||
TEAM_TOOL_APPROVAL_SETTINGS,
|
||||
TEAM_GET_SAVED_REQUEST,
|
||||
TEAM_DELETE_DRAFT,
|
||||
TEAM_UPDATE_CONFIG,
|
||||
TEAM_UPDATE_KANBAN,
|
||||
TEAM_UPDATE_KANBAN_COLUMN_ORDER,
|
||||
|
|
|
|||
|
|
@ -55,9 +55,9 @@ import { withFileLock } from './fileLock';
|
|||
import { withInboxLock } from './inboxLock';
|
||||
import { TeamConfigReader } from './TeamConfigReader';
|
||||
import { TeamInboxReader } from './TeamInboxReader';
|
||||
import { TeamMetaStore } from './TeamMetaStore';
|
||||
import { TeamMcpConfigBuilder } from './TeamMcpConfigBuilder';
|
||||
import { TeamMembersMetaStore } from './TeamMembersMetaStore';
|
||||
import { TeamMetaStore } from './TeamMetaStore';
|
||||
import { TeamSentMessagesStore } from './TeamSentMessagesStore';
|
||||
import { TeamTaskReader } from './TeamTaskReader';
|
||||
|
||||
|
|
|
|||
|
|
@ -113,6 +113,7 @@ import {
|
|||
TEAM_CREATE,
|
||||
TEAM_CREATE_CONFIG,
|
||||
TEAM_CREATE_TASK,
|
||||
TEAM_DELETE_DRAFT,
|
||||
TEAM_DELETE_TASK_ATTACHMENT,
|
||||
TEAM_DELETE_TEAM,
|
||||
TEAM_GET_ALL_TASKS,
|
||||
|
|
@ -124,6 +125,7 @@ import {
|
|||
TEAM_GET_MEMBER_LOGS,
|
||||
TEAM_GET_MEMBER_STATS,
|
||||
TEAM_GET_PROJECT_BRANCH,
|
||||
TEAM_GET_SAVED_REQUEST,
|
||||
TEAM_GET_TASK_ATTACHMENT,
|
||||
TEAM_KILL_PROCESS,
|
||||
TEAM_LAUNCH,
|
||||
|
|
@ -132,8 +134,6 @@ import {
|
|||
TEAM_LIST,
|
||||
TEAM_MEMBER_SPAWN_STATUSES,
|
||||
TEAM_PERMANENTLY_DELETE,
|
||||
TEAM_GET_SAVED_REQUEST,
|
||||
TEAM_DELETE_DRAFT,
|
||||
TEAM_PREPARE_PROVISIONING,
|
||||
TEAM_PROCESS_ALIVE,
|
||||
TEAM_PROCESS_SEND,
|
||||
|
|
|
|||
|
|
@ -1029,7 +1029,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
|
|||
<TeamProvisioningBanner teamName={teamName} />
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center p-6 text-sm text-[var(--color-text-muted)]">
|
||||
No team data available
|
||||
Team data will appear once provisioning completes
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ import { shortenDisplayPath } from '@renderer/utils/pathDisplay';
|
|||
import { highlightLines } from '@renderer/utils/syntaxHighlighter';
|
||||
import { AlertTriangle, FileText, Search, Terminal } from 'lucide-react';
|
||||
|
||||
import { ToolApprovalDiffPreview } from './ToolApprovalDiffPreview';
|
||||
import { ToolApprovalSettingsPanel } from './dialogs/ToolApprovalSettingsPanel';
|
||||
import { FileIcon } from './editor/FileIcon';
|
||||
import { ToolApprovalDiffPreview } from './ToolApprovalDiffPreview';
|
||||
|
||||
import type { ToolApprovalRequest } from '@shared/types';
|
||||
|
||||
|
|
@ -188,7 +188,7 @@ export const ToolApprovalSheet: React.FC = () => {
|
|||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`fixed bottom-4 left-1/2 z-[55] w-full -translate-x-1/2 rounded-lg border shadow-xl outline-none transition-all duration-200 animate-in fade-in slide-in-from-bottom-4 ${diffExpanded ? 'max-w-[640px]' : 'max-w-[480px]'}`}
|
||||
className={`fixed bottom-4 left-1/2 z-[55] w-full -translate-x-1/2 rounded-lg border shadow-xl outline-none transition-all duration-200 animate-in fade-in slide-in-from-bottom-4 ${diffExpanded ? 'max-w-screen-sm' : 'max-w-[480px]'}`}
|
||||
style={{
|
||||
backgroundColor: 'var(--color-surface-overlay)',
|
||||
borderColor: 'var(--color-border-emphasis)',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
|
||||
import { isLeadAgentType } from '@shared/utils/leadDetection';
|
||||
import { isLeadAgentType, isLeadMember } from '@shared/utils/leadDetection';
|
||||
|
||||
import { MemberCard } from './MemberCard';
|
||||
|
||||
|
|
@ -70,8 +70,8 @@ export const MemberList = ({
|
|||
const activeMembers = members
|
||||
.filter((m) => !m.removedAt)
|
||||
.sort((a, b) => {
|
||||
if (isLeadAgentType(a.agentType)) return -1;
|
||||
if (isLeadAgentType(b.agentType)) return 1;
|
||||
if (isLeadMember(a)) return -1;
|
||||
if (isLeadMember(b)) return 1;
|
||||
return 0;
|
||||
});
|
||||
const removedMembers = members.filter((m) => m.removedAt);
|
||||
|
|
|
|||
|
|
@ -6,14 +6,30 @@
|
|||
<link rel="icon" type="image/png" href="./favicon.png" />
|
||||
<title>Claude Agent Teams UI</title>
|
||||
<style>
|
||||
/* Splash: spotlight gradient + noise overlay */
|
||||
/* Splash: animated gradient background */
|
||||
#splash {
|
||||
position: fixed; inset: 0; z-index: 9999;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
background: radial-gradient(ellipse 60% 50% at 50% 45%, #181924 0%, #0c0d13 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#0c0d13 0%,
|
||||
#1a1535 20%,
|
||||
#1e1245 35%,
|
||||
#231740 50%,
|
||||
#1a1535 65%,
|
||||
#151230 80%,
|
||||
#0c0d13 100%
|
||||
);
|
||||
background-size: 100% 300%;
|
||||
animation: splash-bg 6s ease infinite;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
@keyframes splash-bg {
|
||||
0% { background-position: 50% 0%; }
|
||||
50% { background-position: 50% 100%; }
|
||||
100% { background-position: 50% 0%; }
|
||||
}
|
||||
#splash-noise {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%;
|
||||
opacity: 0.03; pointer-events: none;
|
||||
|
|
@ -38,7 +54,17 @@
|
|||
|
||||
/* Light theme splash overrides */
|
||||
:root.light #splash {
|
||||
background: radial-gradient(ellipse 60% 50% at 50% 45%, #fafafa 0%, #e4e4e7 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#e0e7ff 0%,
|
||||
#c7d2fe 18%,
|
||||
#ddd6fe 36%,
|
||||
#f0abfc 50%,
|
||||
#ddd6fe 64%,
|
||||
#c7d2fe 82%,
|
||||
#e0e7ff 100%
|
||||
);
|
||||
background-size: 100% 300%;
|
||||
}
|
||||
:root.light #splash-text { color: #52525b; }
|
||||
:root.light #splash-noise { opacity: 0.02; }
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const AGENT_LANGUAGE_OPTIONS: readonly AgentLanguageOption[] = [
|
|||
{ value: 'da', label: 'Danish', flag: '\u{1F1E9}\u{1F1F0}' },
|
||||
{ value: 'de', label: 'German', flag: '\u{1F1E9}\u{1F1EA}' },
|
||||
{ value: 'el', label: 'Greek', flag: '\u{1F1EC}\u{1F1F7}' },
|
||||
{ value: 'en', label: 'English', flag: '\u{1F1EC}\u{1F1E7}' },
|
||||
{ value: 'en', label: 'English', flag: '\u{1F1FA}\u{1F1F8}' },
|
||||
{ value: 'es', label: 'Spanish', flag: '\u{1F1EA}\u{1F1F8}' },
|
||||
{ value: 'et', label: 'Estonian', flag: '\u{1F1EA}\u{1F1EA}' },
|
||||
{ value: 'eu', label: 'Basque', flag: '\u{1F1EA}\u{1F1F8}' },
|
||||
|
|
|
|||
Loading…
Reference in a new issue