dsh-context 0.4.0 → 0.5.0

package/LICENSE

@@ -1,21 +1,201 @@
-MIT License
-
-Copyright (c) 2025 bowenliang123
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2025 bowenliang123
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -61,11 +61,13 @@ Open any session and click **上下文 / Context** (to the right of Chat and Tra
 
 ## Development
 
+The project is a pnpm workspace root (`pnpm-workspace.yaml`), so `pnpm install` never walks up into a parent workspace.
+
 ```sh
-npm install            # devDependencies only — the plugin itself stays dependency-free
-npm run typecheck      # tsc --noEmit (strict)
-npm run build          # esbuild: lib/index.js (host) + lib/client.js (client bundle)
-npm test               # typecheck + functional tests for both halves
+pnpm install            # devDependencies only — the plugin itself stays dependency-free
+pnpm run typecheck      # tsc --noEmit (strict)
+pnpm run build          # esbuild: lib/index.js (host) + lib/client.js (client bundle)
+pnpm test               # typecheck + functional tests for both halves
 ```
 
 `build.mjs` also smoke-checks the outputs (both halves must parse; the host half must import with the `name`/`inject`/`apply` plugin shape).
@@ -84,4 +86,4 @@ npm test               # typecheck + functional tests for both halves
 
 ## License
 
-MIT
+[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)

package/lib/client.js

@@ -21,6 +21,8 @@ const DICT_ZH = {
   "tools.top": "\u5DE5\u5177\u5B9A\u4E49 Top\uFF1A",
   "tools.more": "\u7B49 {n} \u4E2A",
   "trend.title": "\u5386\u53F2\u8D8B\u52BF",
+  "gran.step": "\u6B65\u9AA4",
+  "gran.turn": "\u8F6E\u6B21",
   "trend.hint": "\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u4E00\u6BB5\uFF1B\u70B9\u51FB\u67F1\u5B50\u67E5\u770B\u8BE6\u60C5\uFF0C\u2702 \u8868\u793A\u538B\u7F29/\u526A\u679D",
   "trend.empty": "\u53D1\u8D77\u4E00\u8F6E\u5BF9\u8BDD\u540E\uFF0C\u8FD9\u91CC\u4F1A\u5C55\u793A\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u7684\u4E0A\u4E0B\u6587\u6784\u6210",
   "detail.step": "T{t} \xB7 \u7B2C {s} \u6B65",
@@ -70,6 +72,8 @@ const DICT_EN = {
   "tools.top": "Top tool schemas:",
   "tools.more": "of {n}",
   "trend.title": "History",
+  "gran.step": "Step",
+  "gran.turn": "Turn",
   "trend.hint": "one bar per model request; click a bar for details, \u2702 marks compaction/prune",
   "trend.empty": "Send a message and each model request\u2019s context makeup shows up here",
   "detail.step": "T{t} \xB7 step {s}",
@@ -118,6 +122,15 @@ function fmtTime(t) {
   }
   return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
 }
+function aggregateByTurn(requests) {
+  const out = [];
+  for (const req of requests) {
+    const last = out.length > 0 ? out[out.length - 1] : null;
+    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) out[out.length - 1] = req;
+    else out.push(req);
+  }
+  return out;
+}
 function makeView(ctx, t) {
   function tr(key, vars) {
     return t(key, vars);
@@ -159,17 +172,46 @@ function makeView(ctx, t) {
     let total = 0;
     for (const p of props.parts) total += p.value;
     const scale = props.max !== void 0 && props.max > total ? props.max : total;
+    const wrapRef = React.useRef(null);
+    const [tip, setTip] = React.useState(null);
+    const showTip = (e, p) => {
+      const rect = wrapRef.current?.getBoundingClientRect();
+      const left = rect ? e.clientX - rect.left : 50;
+      const width = rect?.width ?? 200;
+      setTip({
+        key: p.key,
+        text: catLabel(p.key) + " " + fmt(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
+        left: Math.max(48, Math.min(left, width - 48))
+      });
+    };
     return h(
       "div",
-      { className: "lc-stacked", style: { height: (props.height || 14) + "px" } },
-      total <= 0 ? null : props.parts.map((p) => {
-        if (!p.value) return null;
-        return h("div", {
-          key: p.key,
-          title: catLabel(p.key) + " " + fmt(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
-          style: { width: p.value / scale * 100 + "%", background: p.color }
-        });
-      })
+      { className: "lc-stacked-wrap" },
+      h(
+        "div",
+        {
+          className: "lc-stacked",
+          style: { height: (props.height || 14) + "px" },
+          ref: wrapRef,
+          onMouseLeave: () => {
+            setTip(null);
+          }
+        },
+        total <= 0 ? null : props.parts.map((p) => {
+          if (!p.value) return null;
+          return h("div", {
+            key: p.key,
+            style: { width: p.value / scale * 100 + "%", background: p.color },
+            onMouseEnter: (e) => {
+              showTip(e, p);
+            },
+            onMouseMove: (e) => {
+              showTip(e, p);
+            }
+          });
+        })
+      ),
+      tip ? h("div", { className: "lc-bar-tip", style: { left: tip.left + "px" } }, tip.text) : null
     );
   }
   function Legend(props) {
@@ -197,6 +239,7 @@ function makeView(ctx, t) {
   const CHART_H = 112;
   const BAR_W = 14;
   const BAR_GAP = 2;
+  const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
   function TrendChart(props) {
     const requests = props.requests;
     let maxTotal = 1;
@@ -239,22 +282,31 @@ function makeView(ctx, t) {
       h(
         "div",
         { className: "lc-chart-scroll", ref: scrollRef },
+        // Hovering a bar previews it in the detail below; leaving the plot
+        // clears the preview (a pinned selection, if any, takes over again).
         h(
           "div",
-          { className: "lc-chart" },
+          { className: "lc-chart", onMouseLeave: () => {
+            props.onHover(null);
+          } },
           h("div", { className: "lc-grid lc-grid-top" }),
           h("div", { className: "lc-grid lc-grid-mid" }),
           requests.map((req, i) => {
             const selected = props.selectedSeq === req.seq;
+            const hovered = props.hoveredSeq === req.seq;
+            const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
             const tip = tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 }) + " \xB7 " + fmtTime(req.time) + "\n" + tr("tip.total", { n: fmt(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt(req[c.key] || 0)).join(" / ");
             return h(
               "div",
               {
                 key: req.seq,
-                className: "lc-bar" + (selected ? " lc-bar-selected" : ""),
+                className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
                 title: tip,
                 onClick: () => {
                   props.onSelect(selected ? null : req.seq);
+                },
+                onMouseEnter: () => {
+                  props.onHover(req.seq);
                 }
               },
               markers[i] ? h("span", { className: "lc-bar-marker", title: eventLabel(markers[i]) }, "\u2702") : null,
@@ -270,14 +322,29 @@ function makeView(ctx, t) {
             );
           })
         ),
+        // Turn strip: one COLOR BLOCK per turn, spanning exactly its bars'
+        // columns, so the partition reads at a glance and lines up with the
+        // steps above. Hovering a block highlights that turn's bars in the
+        // chart (and hovering a bar highlights its block — the active turn
+        // is shared hover-only state).
         h(
           "div",
-          { className: "lc-turns" },
+          { className: "lc-turns", onMouseLeave: () => {
+            props.onHoverTurn(null);
+          } },
           groups.map((grp, gi) => {
+            const on = props.activeTurn === grp.turn;
             return h("span", {
               key: "turn-" + gi,
-              className: "lc-turn",
-              style: { width: grp.count * (BAR_W + BAR_GAP) - BAR_GAP + "px" }
+              className: "lc-turn" + (on ? " lc-turn-on" : ""),
+              style: {
+                width: grp.count * (BAR_W + BAR_GAP) - BAR_GAP + "px",
+                background: TURN_COLORS[gi % TURN_COLORS.length]
+              },
+              title: "T" + grp.turn,
+              onMouseEnter: () => {
+                props.onHoverTurn(grp.turn);
+              }
             }, "T" + grp.turn);
           })
         )
@@ -375,7 +442,10 @@ function makeView(ctx, t) {
     const [data, setData] = React.useState(null);
     const [error, setError] = React.useState(null);
     const [selectedSeq, setSelectedSeq] = React.useState(null);
+    const [hoveredSeq, setHoveredSeq] = React.useState(null);
+    const [hoverTurn, setHoverTurn] = React.useState(null);
     const [tick, setTick] = React.useState(0);
+    const [granularity, setGranularity] = React.useState("step");
     React.useEffect(() => {
       if (typeof sessionId !== "string" || sessionId === "") return void 0;
       let alive = true;
@@ -413,9 +483,22 @@ function makeView(ctx, t) {
     const requests = data.requests || [];
     const events = data.events || [];
     const nodes = data.nodes || [];
-    let selReq = null;
-    for (const req of requests) if (req.seq === selectedSeq) selReq = req;
-    if (!selReq && requests.length > 0) selReq = requests[requests.length - 1];
+    const displayRequests = granularity === "turn" ? aggregateByTurn(requests) : requests;
+    let pinnedReq = null;
+    for (const req of displayRequests) if (req.seq === selectedSeq) pinnedReq = req;
+    let activeReq = null;
+    if (hoveredSeq !== null) {
+      for (const req of displayRequests) if (req.seq === hoveredSeq) activeReq = req;
+    }
+    if (activeReq === null) activeReq = pinnedReq;
+    if (activeReq === null && displayRequests.length > 0) activeReq = displayRequests[displayRequests.length - 1];
+    let activeTurn = hoverTurn;
+    if (activeTurn === null && hoveredSeq !== null) {
+      for (const req of displayRequests) if (req.seq === hoveredSeq) {
+        activeTurn = req.turn ?? null;
+        break;
+      }
+    }
     const windowPct = data.contextWindow ? Math.min(100, Math.round(current.total / data.contextWindow * 100)) : null;
     return h(
       "div",
@@ -460,13 +543,38 @@ function makeView(ctx, t) {
           "div",
           { className: "lc-card-title" },
           t("trend.title"),
-          h("span", { className: "lc-card-sub" }, t("trend.hint"))
+          h("span", { className: "lc-card-sub" }, t("trend.hint")),
+          h(
+            "div",
+            { className: "lc-gran" },
+            h("button", {
+              className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
+              onClick: () => {
+                setGranularity("step");
+              }
+            }, t("gran.step")),
+            h("button", {
+              className: "lc-gran-btn" + (granularity === "turn" ? " lc-gran-on" : ""),
+              onClick: () => {
+                setGranularity("turn");
+              }
+            }, t("gran.turn"))
+          )
         ),
-        requests.length === 0 ? h("div", { className: "lc-empty" }, t("trend.empty")) : h(
+        displayRequests.length === 0 ? h("div", { className: "lc-empty" }, t("trend.empty")) : h(
           "div",
           null,
-          h(TrendChart, { requests: requests.slice(-80), events, selectedSeq: selReq ? selReq.seq : null, onSelect: setSelectedSeq }),
-          h(RequestDetail, { request: selReq })
+          h(TrendChart, {
+            requests: displayRequests.slice(-80),
+            events,
+            selectedSeq: pinnedReq ? pinnedReq.seq : null,
+            hoveredSeq,
+            activeTurn,
+            onSelect: setSelectedSeq,
+            onHover: setHoveredSeq,
+            onHoverTurn: setHoverTurn
+          }),
+          h(RequestDetail, { request: activeReq })
         )
       ),
       // ---- events + messages ----
@@ -501,10 +609,16 @@ const STYLES = [
   ".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
   ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
   ".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".lc-gran { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
+  ".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
+  ".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
+  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-brand-primary); color: #fff; }",
   ".lc-overview-num { margin-bottom: 8px; }",
   ".lc-overview-num b { font-size: 20px; }",
   ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
+  ".lc-stacked-wrap { position: relative; width: 100%; }",
   ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); }",
+  ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
   ".lc-stacked > div { height: 100%; }",
   ".lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }",
   ".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); }",
@@ -529,11 +643,14 @@ const STYLES = [
   ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; }",
   ".lc-bar:hover { background: var(--dsw-alias-bg-layer-2); }",
   ".lc-bar-selected { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }",
+  ".lc-bar-hovered { outline: 1px dashed var(--dsw-alias-brand-primary); outline-offset: 1px; }",
+  ".lc-bar-in-turn { background: rgba(99,102,241,0.14); }",
   ".lc-bar-stack { display: flex; flex-direction: column-reverse; width: 100%; }",
   ".lc-bar-stack > div { width: 100%; }",
   ".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
-  ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; }",
-  ".lc-turn { flex: none; min-width: 24px; box-sizing: border-box; text-align: center; font-size: 11px; line-height: 18px; color: var(--dsw-alias-label-secondary); border-top: 1px solid var(--dsw-alias-border-l1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
+  ".lc-turn { flex: none; min-width: 16px; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
+  ".lc-turn-on { filter: brightness(1.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }",
   ".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
   ".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
   ".lc-detail-head b { color: var(--dsw-alias-label-primary); }",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Context insight panel for DeepSeek Harness: a Context tab (beside Chat/Trajectory) showing what the model's context window is made of and how it evolves — composition, per-request history, compactions, injections, and model switches.",
   "author": "bowenliang123",
   "repository": {
@@ -53,11 +53,12 @@
     "token",
     "ui"
   ],
-  "license": "MIT",
+  "license": "Apache-2.0",
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@types/react": "^18.3.31",
     "esbuild": "^0.28.2",
     "typescript": "^7.0.2"
-  }
+  },
+  "packageManager": "pnpm@11.9.0"
 }