feat(web-shell): add column reorder, resize, and freeze controls to markdown table

packages/web-shell/client/components/messages/EnhancedMarkdownTable.module.css

@@ -81,6 +81,8 @@
 }
 
 .table {
+  --action-column-width: 72px;
+
   width: max-content;
   min-width: 100%;
   border-collapse: separate;
@@ -112,6 +114,11 @@
   text-align: left;
 }
 
+.frozenHeaderCell {
+  left: var(--action-column-width);
+  z-index: 5;
+}
+
 .headerControls {
   display: flex;
   align-items: stretch;
@@ -162,6 +169,72 @@
   cursor: pointer;
 }
 
+.activeHeaderCell {
+  background: color-mix(in srgb, var(--agent-blue-500) 8%, var(--card));
+}
+
+.reorderHandle {
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  border-left: 0 solid transparent;
+  background: transparent;
+  color: var(--muted-foreground);
+  font: inherit;
+  font-size: 12px;
+  cursor: grab;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    flex-basis 120ms ease,
+    width 120ms ease,
+    opacity 120ms ease,
+    border-color 120ms ease,
+    background 120ms ease;
+}
+
+.reorderHandleVisible,
+.reorderHandle:focus-visible,
+.reorderHandle:active {
+  flex-basis: 24px;
+  width: 24px;
+  border-left-width: 1px;
+  border-left-color: var(--border);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.reorderHandle:active {
+  cursor: grabbing;
+}
+
+.reorderHandle:hover,
+.reorderHandle:focus-visible {
+  background: var(--subtle-bg-strong);
+}
+
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  z-index: 7;
+  width: 6px;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: col-resize;
+}
+
+.resizeHandle:hover,
+.resizeHandle:focus-visible {
+  background: color-mix(in srgb, var(--agent-blue-500) 45%, transparent);
+  outline: none;
+}
+
 .filterTriggerActive {
   background: color-mix(in srgb, var(--agent-blue-500) 18%, transparent);
   color: var(--agent-blue-500);
@@ -342,18 +415,71 @@ tr:hover .selectedCell {
 
 .actionHeaderCell,
 .actionCell {
-  width: 72px;
-  min-width: 72px;
-  max-width: 72px;
+  width: var(--action-column-width);
+  min-width: var(--action-column-width);
+  max-width: var(--action-column-width);
   text-align: center;
 }
 
+.stickyActionHeaderCell,
+.stickyActionCell {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+}
+
+.stickyActionHeaderCell {
+  z-index: 8;
+}
+
 .actionCell {
   padding: 4px 6px;
   cursor: default;
   user-select: none;
 }
 
+.frozenCell {
+  position: sticky;
+  left: var(--action-column-width);
+  z-index: 4;
+}
+
+.stickyActionHeaderCell,
+.frozenHeaderCell,
+.stickyActionCell,
+.frozenCell {
+  background: var(--card);
+}
+
+.evenRow .stickyActionCell,
+.evenRow .frozenCell {
+  background:
+    linear-gradient(var(--subtle-bg), var(--subtle-bg)),
+    var(--card);
+}
+
+tr:hover .stickyActionCell,
+tr:hover .frozenCell {
+  background:
+    linear-gradient(var(--subtle-bg-strong), var(--subtle-bg-strong)),
+    var(--card);
+}
+
+.stickyActionCell.selectedCell,
+.frozenCell.selectedCell,
+.evenRow .stickyActionCell.selectedCell,
+.evenRow .frozenCell.selectedCell,
+tr:hover .stickyActionCell.selectedCell,
+tr:hover .frozenCell.selectedCell {
+  background:
+    linear-gradient(
+      color-mix(in srgb, var(--agent-blue-500) 20%, transparent),
+      color-mix(in srgb, var(--agent-blue-500) 20%, transparent)
+    ),
+    var(--card);
+  box-shadow: inset 0 0 0 1px var(--agent-blue-500);
+}
+
 .rowDetailButton {
   padding: 3px 7px;
   border: 1px solid var(--border);