docs: share cleanup title

packages/web/src/components/Share.tsx

@@ -781,59 +781,15 @@ export default function Share(props: {
           <h1>{store.info?.title}</h1>
         </div>
         <div data-section="row">
-          <ul data-section="stats">
-            <li>
-              <span data-element-label>Cost</span>
-              {data().cost !== undefined ? (
-                <span>${data().cost.toFixed(2)}</span>
-              ) : (
-                <span data-placeholder>&mdash;</span>
-              )}
-            </li>
-            <li>
-              <span data-element-label>Input Tokens</span>
-              {data().tokens.input ? (
-                <span>{data().tokens.input}</span>
-              ) : (
-                <span data-placeholder>&mdash;</span>
-              )}
-            </li>
-            <li>
-              <span data-element-label>Output Tokens</span>
-              {data().tokens.output ? (
-                <span>{data().tokens.output}</span>
-              ) : (
-                <span data-placeholder>&mdash;</span>
-              )}
-            </li>
-            <li>
-              <span data-element-label>Reasoning Tokens</span>
-              {data().tokens.reasoning ? (
-                <span>{data().tokens.reasoning}</span>
-              ) : (
-                <span data-placeholder>&mdash;</span>
-              )}
-            </li>
-          </ul>
-          <Show when={data().rootDir}>
-            <ul data-section="stats" data-section-root>
-              <li title="Project root">
-                <div data-stat-icon>
-                  <IconFolder width={16} height={16} />
-                </div>
-                <span>{data().rootDir}</span>
-              </li>
-              <li title="opencode version">
-                <div data-stat-icon title="opencode">
-                  <IconOpencode width={16} height={16} />
-                </div>
-                <Show when={store.info?.version} fallback="v0.0.1">
-                  <span>v{store.info?.version}</span>
-                </Show>
-              </li>
-            </ul>
-          </Show>
           <ul data-section="stats" data-section-models>
+            <li title="opencode version">
+              <div data-stat-icon title="opencode">
+                <IconOpencode width={16} height={16} />
+              </div>
+              <Show when={store.info?.version} fallback="v0.0.1">
+                <span>v{store.info?.version}</span>
+              </Show>
+            </li>
             {Object.values(data().models).length > 0 ? (
               <For each={Object.values(data().models)}>
                 {([provider, model]) => (
@@ -1226,12 +1182,12 @@ export default function Share(props: {
                         >
                           {(_part) => {
                             const path = createMemo(() =>
-                              toolData()?.args.path !== data().rootDir
+                              toolData()?.args?.path !== data().rootDir
                                 ? stripWorkingDirectory(
-                                  toolData()?.args.path,
+                                  toolData()?.args?.path,
                                   data().rootDir,
                                 )
-                                : toolData()?.args.path,
+                                : toolData()?.args?.path,
                             )
 
                             return (
@@ -1253,7 +1209,9 @@ export default function Share(props: {
                                   <div data-part-tool-body>
                                     <div data-part-title>
                                       <span data-element-label>LS</span>
-                                      <b>{path()}</b>
+                                      <b title={toolData()?.args?.path}>
+                                        {path()}
+                                      </b>
                                     </div>
                                     <Switch>
                                       <Match when={toolData()?.result}>
@@ -1296,7 +1254,7 @@ export default function Share(props: {
                           {(_part) => {
                             const filePath = createMemo(() =>
                               stripWorkingDirectory(
-                                toolData()?.args.filePath,
+                                toolData()?.args?.filePath,
                                 data().rootDir,
                               ),
                             )
@@ -1319,7 +1277,9 @@ export default function Share(props: {
                                   <div data-part-tool-body>
                                     <div data-part-title>
                                       <span data-element-label>Read</span>
-                                      <b>{filePath()}</b>
+                                      <b title={toolData()?.args?.filePath}>
+                                        {filePath()}
+                                      </b>
                                     </div>
                                     <Switch>
                                       <Match when={hasError()}>
@@ -1420,7 +1380,9 @@ export default function Share(props: {
                                   <div data-part-tool-body>
                                     <div data-part-title>
                                       <span data-element-label>Write</span>
-                                      <b>{filePath()}</b>
+                                      <b title={toolData()?.args?.filePath}>
+                                        {filePath()}
+                                      </b>
                                     </div>
                                     <Show when={diagnostics().length > 0}>
                                       <ErrorPart>{diagnostics()}</ErrorPart>
@@ -1507,7 +1469,9 @@ export default function Share(props: {
                                   <div data-part-tool-body>
                                     <div data-part-title>
                                       <span data-element-label>Edit</span>
-                                      <b>{filePath()}</b>
+                                      <b title={toolData()?.args?.filePath}>
+                                        {filePath()}
+                                      </b>
                                     </div>
                                     <Switch>
                                       <Match when={hasError()}>
@@ -1856,13 +1820,47 @@ export default function Share(props: {
                 </For>
               )}
             </For>
-            <div data-section="part" data-part-type="connection-status">
+            <div data-section="part" data-part-type="summary">
               <div data-section="decoration">
                 <span data-status={connectionStatus()[0]}></span>
                 <div></div>
               </div>
               <div data-section="content">
-                <span>{getStatusText(connectionStatus())}</span>
+                <p data-section="copy">{getStatusText(connectionStatus())}</p>
+                <ul data-section="stats">
+                  <li>
+                    <span data-element-label>Cost</span>
+                    {data().cost !== undefined ? (
+                      <span>${data().cost.toFixed(2)}</span>
+                    ) : (
+                      <span data-placeholder>&mdash;</span>
+                    )}
+                  </li>
+                  <li>
+                    <span data-element-label>Input Tokens</span>
+                    {data().tokens.input ? (
+                      <span>{data().tokens.input}</span>
+                    ) : (
+                      <span data-placeholder>&mdash;</span>
+                    )}
+                  </li>
+                  <li>
+                    <span data-element-label>Output Tokens</span>
+                    {data().tokens.output ? (
+                      <span>{data().tokens.output}</span>
+                    ) : (
+                      <span data-placeholder>&mdash;</span>
+                    )}
+                  </li>
+                  <li>
+                    <span data-element-label>Reasoning Tokens</span>
+                    {data().tokens.reasoning ? (
+                      <span>{data().tokens.reasoning}</span>
+                    ) : (
+                      <span data-placeholder>&mdash;</span>
+                    )}
+                  </li>
+                </ul>
               </div>
             </div>
           </div>

packages/web/src/components/share.module.css

@@ -89,7 +89,7 @@
     padding: 0;
     margin: 0;
     display: flex;
-    gap: 0.5rem 1rem;
+    gap: 0.5rem 0.875rem;
     flex-wrap: wrap;
 
     li {
@@ -104,8 +104,7 @@
     }
   }
 
-  [data-section="stats"][data-section-root],
-  [data-section="stats"][data-section-models] {
+  [data-section="stats"] {
     li {
       gap: 0.3125rem;
 
@@ -375,7 +374,7 @@
       }
     }
   }
-  [data-part-type="connection-status"] {
+  [data-part-type="summary"] {
     & > [data-section="decoration"] {
       span:first-child {
         flex: 0 0 auto;
@@ -405,12 +404,37 @@
     }
 
     & > [data-section="content"] {
-      span {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+
+      p[data-section="copy"] {
         display: block;
         line-height: 18px;
         font-size: 0.875rem;
         color: var(--sl-color-text-dimmed);
       }
+
+      [data-section="stats"] {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5rem 0.875rem;
+        flex-wrap: wrap;
+
+        li {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.75rem;
+          color: var(--sl-color-text-secondary);
+
+          span[data-placeholder] {
+            color: var(--sl-color-text-dimmed);
+          }
+        }
+      }
     }
   }
 }