From be6287552b7cfabd998fcb18659b225bf6215c92 Mon Sep 17 00:00:00 2001
From: "Scion Agent (project-agents-list-ui)" <agent@scion.dev>
Date: Tue, 9 Jun 2026 22:07:37 +0000
Subject: [PATCH] fix: apply agent list UI improvements to project detail view

Port two fixes from the global /agents list to the project detail
agent list for consistency:

1. Task column truncation: use multi-line clamp (2 lines) instead of
   single-line ellipsis, so action buttons remain visible.
2. Label-free buttons: remove text labels from card view buttons and
   add tooltip wrappers with aria-labels to both card and table view
   buttons, matching the icon-only style of the agents page.
---
 web/src/components/pages/project-detail.ts | 269 ++++++++++++---------
 1 file changed, 153 insertions(+), 116 deletions(-)

diff --git a/web/src/components/pages/project-detail.ts b/web/src/components/pages/project-detail.ts
index d6ac35ba7..1a0ef91c5 100644
--- a/web/src/components/pages/project-detail.ts
+++ b/web/src/components/pages/project-detail.ts
@@ -400,10 +400,12 @@ export class ScionPageProjectDetail extends LitElement {
     }
 
     .agent-table-container .task-cell {
-      max-width: 250px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      max-width: 250px;
+      white-space: normal;
       color: var(--scion-text-muted, #64748b);
       font-size: 0.8125rem;
     }
@@ -1420,76 +1422,96 @@ export class ScionPageProjectDetail extends LitElement {
         <td class="actions-cell">
           <span class="table-actions">
             ${can(agent._capabilities, 'attach') ? html`
-              <sl-button
-                variant="primary"
-                size="small"
-                href="/agents/${agent.id}/terminal"
-                ?disabled=${!isTerminalAvailable(agent)}
-              >
-                <sl-icon slot="prefix" name="terminal"></sl-icon>
-              </sl-button>
+              <sl-tooltip content="Terminal">
+                <span style="display: inline-flex">
+                  <sl-button
+                    variant="primary"
+                    size="small"
+                    href="/agents/${agent.id}/terminal"
+                    ?disabled=${!isTerminalAvailable(agent)}
+                    aria-label="Terminal"
+                  >
+                    <sl-icon slot="prefix" name="terminal"></sl-icon>
+                  </sl-button>
+                </span>
+              </sl-tooltip>
             ` : nothing}
             ${isAgentRunning(agent)
               ? can(agent._capabilities, 'stop') ? html`
                   ${agent.harnessCapabilities?.resume?.support !== 'no' ? html`
+                    <sl-tooltip content="Suspend">
+                      <sl-button
+                        variant="warning"
+                        size="small"
+                        outline
+                        ?loading=${isLoading}
+                        ?disabled=${isLoading}
+                        @click=${() => this.handleAgentAction(agent.id, 'suspend')}
+                        aria-label="Suspend"
+                      >
+                        <sl-icon slot="prefix" name="pause-circle"></sl-icon>
+                      </sl-button>
+                    </sl-tooltip>
+                  ` : nothing}
+                  <sl-tooltip content="Stop">
                     <sl-button
-                      variant="warning"
+                      variant="danger"
                       size="small"
                       outline
                       ?loading=${isLoading}
                       ?disabled=${isLoading}
-                      @click=${() => this.handleAgentAction(agent.id, 'suspend')}
+                      @click=${() => this.handleAgentAction(agent.id, 'stop')}
+                      aria-label="Stop"
                     >
-                      <sl-icon slot="prefix" name="pause-circle"></sl-icon>
+                      <sl-icon slot="prefix" name="stop-circle"></sl-icon>
                     </sl-button>
-                  ` : nothing}
-                  <sl-button
-                    variant="danger"
-                    size="small"
-                    outline
-                    ?loading=${isLoading}
-                    ?disabled=${isLoading}
-                    @click=${() => this.handleAgentAction(agent.id, 'stop')}
-                  >
-                    <sl-icon slot="prefix" name="stop-circle"></sl-icon>
-                  </sl-button>
+                  </sl-tooltip>
                 ` : nothing
               : agent.phase === 'suspended'
                 ? can(agent._capabilities, 'start') ? html`
-                    <sl-button
-                      variant="success"
-                      size="small"
-                      outline
-                      ?loading=${isLoading}
-                      ?disabled=${isLoading}
-                      @click=${() => this.handleAgentAction(agent.id, 'resume')}
-                    >
-                      <sl-icon slot="prefix" name="play-circle"></sl-icon>
-                    </sl-button>
+                    <sl-tooltip content="Resume">
+                      <sl-button
+                        variant="success"
+                        size="small"
+                        outline
+                        ?loading=${isLoading}
+                        ?disabled=${isLoading}
+                        @click=${() => this.handleAgentAction(agent.id, 'resume')}
+                        aria-label="Resume"
+                      >
+                        <sl-icon slot="prefix" name="play-circle"></sl-icon>
+                      </sl-button>
+                    </sl-tooltip>
                   ` : nothing
                 : can(agent._capabilities, 'start') ? html`
-                    <sl-button
-                      variant="success"
-                      size="small"
-                      outline
-                      ?loading=${isLoading}
-                      ?disabled=${isLoading}
-                      @click=${() => this.handleAgentAction(agent.id, 'start')}
-                    >
-                      <sl-icon slot="prefix" name="play-circle"></sl-icon>
-                    </sl-button>
+                    <sl-tooltip content="Start">
+                      <sl-button
+                        variant="success"
+                        size="small"
+                        outline
+                        ?loading=${isLoading}
+                        ?disabled=${isLoading}
+                        @click=${() => this.handleAgentAction(agent.id, 'start')}
+                        aria-label="Start"
+                      >
+                        <sl-icon slot="prefix" name="play-circle"></sl-icon>
+                      </sl-button>
+                    </sl-tooltip>
                   ` : nothing}
             ${can(agent._capabilities, 'delete') ? html`
-              <sl-button
-                variant="default"
-                size="small"
-                outline
-                ?loading=${isLoading}
-                ?disabled=${isLoading}
-                @click=${(e: MouseEvent) => this.handleAgentAction(agent.id, 'delete', e)}
-              >
-                <sl-icon slot="prefix" name="trash"></sl-icon>
-              </sl-button>
+              <sl-tooltip content="Delete">
+                <sl-button
+                  variant="default"
+                  size="small"
+                  outline
+                  ?loading=${isLoading}
+                  ?disabled=${isLoading}
+                  @click=${(e: MouseEvent) => this.handleAgentAction(agent.id, 'delete', e)}
+                  aria-label="Delete"
+                >
+                  <sl-icon slot="prefix" name="trash"></sl-icon>
+                </sl-button>
+              </sl-tooltip>
             ` : nothing}
           </span>
         </td>
@@ -1534,15 +1556,19 @@ export class ScionPageProjectDetail extends LitElement {
         <div class="agent-actions">
           ${can(agent._capabilities, 'attach')
             ? html`
-                <sl-button
-                  variant="primary"
-                  size="small"
-                  href="/agents/${agent.id}/terminal"
-                  ?disabled=${!isTerminalAvailable(agent)}
-                >
-                  <sl-icon slot="prefix" name="terminal"></sl-icon>
-                  Terminal
-                </sl-button>
+                <sl-tooltip content="Terminal">
+                  <span style="display: inline-flex">
+                    <sl-button
+                      variant="primary"
+                      size="small"
+                      href="/agents/${agent.id}/terminal"
+                      ?disabled=${!isTerminalAvailable(agent)}
+                      aria-label="Terminal"
+                    >
+                      <sl-icon slot="prefix" name="terminal"></sl-icon>
+                    </sl-button>
+                  </span>
+                </sl-tooltip>
               `
             : nothing}
           ${isAgentRunning(agent)
@@ -1550,75 +1576,86 @@ export class ScionPageProjectDetail extends LitElement {
               ? html`
                   ${agent.harnessCapabilities?.resume?.support !== 'no'
                     ? html`
-                        <sl-button
-                          variant="warning"
-                          size="small"
-                          outline
-                          ?loading=${isLoading}
-                          ?disabled=${isLoading}
-                          @click=${() => this.handleAgentAction(agent.id, 'suspend')}
-                        >
-                          <sl-icon slot="prefix" name="pause-circle"></sl-icon>
-                          Suspend
-                        </sl-button>
+                        <sl-tooltip content="Suspend">
+                          <sl-button
+                            variant="warning"
+                            size="small"
+                            outline
+                            ?loading=${isLoading}
+                            ?disabled=${isLoading}
+                            @click=${() => this.handleAgentAction(agent.id, 'suspend')}
+                            aria-label="Suspend"
+                          >
+                            <sl-icon slot="prefix" name="pause-circle"></sl-icon>
+                          </sl-button>
+                        </sl-tooltip>
                       `
                     : nothing}
-                  <sl-button
-                    variant="danger"
-                    size="small"
-                    outline
-                    ?loading=${isLoading}
-                    ?disabled=${isLoading}
-                    @click=${() => this.handleAgentAction(agent.id, 'stop')}
-                  >
-                    <sl-icon slot="prefix" name="stop-circle"></sl-icon>
-                    Stop
-                  </sl-button>
-                `
-              : nothing
-            : agent.phase === 'suspended'
-              ? can(agent._capabilities, 'start')
-                ? html`
+                  <sl-tooltip content="Stop">
                     <sl-button
-                      variant="success"
+                      variant="danger"
                       size="small"
                       outline
                       ?loading=${isLoading}
                       ?disabled=${isLoading}
-                      @click=${() => this.handleAgentAction(agent.id, 'resume')}
+                      @click=${() => this.handleAgentAction(agent.id, 'stop')}
+                      aria-label="Stop"
                     >
-                      <sl-icon slot="prefix" name="play-circle"></sl-icon>
-                      Resume
+                      <sl-icon slot="prefix" name="stop-circle"></sl-icon>
                     </sl-button>
+                  </sl-tooltip>
+                `
+              : nothing
+            : agent.phase === 'suspended'
+              ? can(agent._capabilities, 'start')
+                ? html`
+                    <sl-tooltip content="Resume">
+                      <sl-button
+                        variant="success"
+                        size="small"
+                        outline
+                        ?loading=${isLoading}
+                        ?disabled=${isLoading}
+                        @click=${() => this.handleAgentAction(agent.id, 'resume')}
+                        aria-label="Resume"
+                      >
+                        <sl-icon slot="prefix" name="play-circle"></sl-icon>
+                      </sl-button>
+                    </sl-tooltip>
                   `
                 : nothing
               : can(agent._capabilities, 'start')
                 ? html`
-                    <sl-button
-                      variant="success"
-                      size="small"
-                      outline
-                      ?loading=${isLoading}
-                      ?disabled=${isLoading}
-                      @click=${() => this.handleAgentAction(agent.id, 'start')}
-                    >
-                      <sl-icon slot="prefix" name="play-circle"></sl-icon>
-                      Start
-                    </sl-button>
+                    <sl-tooltip content="Start">
+                      <sl-button
+                        variant="success"
+                        size="small"
+                        outline
+                        ?loading=${isLoading}
+                        ?disabled=${isLoading}
+                        @click=${() => this.handleAgentAction(agent.id, 'start')}
+                        aria-label="Start"
+                      >
+                        <sl-icon slot="prefix" name="play-circle"></sl-icon>
+                      </sl-button>
+                    </sl-tooltip>
                   `
                 : nothing}
           ${can(agent._capabilities, 'delete')
             ? html`
-                <sl-button
-                  variant="default"
-                  size="small"
-                  outline
-                  ?loading=${isLoading}
-                  ?disabled=${isLoading}
-                  @click=${(e: MouseEvent) => this.handleAgentAction(agent.id, 'delete', e)}
-                >
-                  <sl-icon slot="prefix" name="trash"></sl-icon>
-                </sl-button>
+                <sl-tooltip content="Delete">
+                  <sl-button
+                    variant="default"
+                    size="small"
+                    outline
+                    ?loading=${isLoading}
+                    ?disabled=${isLoading}
+                    @click=${(e: MouseEvent) => this.handleAgentAction(agent.id, 'delete', e)}
+                    aria-label="Delete"
+                  >
+                    <sl-icon slot="prefix" name="trash"></sl-icon>
+                  </sl-button>
+                </sl-tooltip>
               `
             : nothing}
         </div>