lynx-console 0.0.0

package/src/components/NetworkPanel.tsx

@@ -0,0 +1,222 @@
+import { useState } from "@lynx-js/react";
+import type { NetworkEntry } from "../types";
+import { NetworkDetailSection } from "./NetworkDetailSection";
+import * as css from "./NetworkPanel.css";
+
+interface NetworkPanelProps {
+  networks: NetworkEntry[];
+  clearNetworks: () => void;
+}
+
+type TabType = "general" | "request" | "response";
+
+export const NetworkPanel = ({
+  networks,
+  clearNetworks,
+}: NetworkPanelProps) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<TabType>("general");
+
+  const formatDuration = (duration?: number): string => {
+    if (!duration) return "-";
+    if (duration < 1000) return `${duration}ms`;
+    return `${(duration / 1000).toFixed(2)}s`;
+  };
+
+  const extractPath = (url: string): string => {
+    const pathMatch = url.match(/^https?:\/\/[^/]+(.*)$/);
+    if (pathMatch?.[1]) {
+      return pathMatch[1].startsWith("/")
+        ? pathMatch[1].slice(1)
+        : pathMatch[1];
+    }
+    return url;
+  };
+
+  const getGeneralInfo = (network: NetworkEntry) => {
+    return [
+      { key: "URL", value: network.url },
+      { key: "Method", value: network.method },
+      network.statusCode
+        ? { key: "Status", value: String(network.statusCode) }
+        : null,
+      {
+        key: "Request Time",
+        value: new Date(network.startTime).toISOString(),
+      },
+      network.endTime
+        ? {
+            key: "Response Time",
+            value: new Date(network.endTime).toISOString(),
+          }
+        : null,
+      network.duration
+        ? { key: "Duration", value: formatDuration(network.duration) }
+        : null,
+    ].filter((item) => item !== null);
+  };
+
+  const getStatusCodeVariant = (
+    status: string,
+    statusCode?: number,
+  ): "success" | "error" | "pending" => {
+    if (status === "pending") return "pending";
+    if (status === "error") return "error";
+    if (statusCode && statusCode >= 200 && statusCode < 300) return "success";
+    return "error";
+  };
+
+  return (
+    <view className={css.container}>
+      <view className={css.header}>
+        <text className={css.count}>Total: {networks.length} requests</text>
+        <view className={css.clearButton} bindtap={clearNetworks}>
+          <text className={css.clearButtonText}>Clear</text>
+        </view>
+      </view>
+
+      {networks.length === 0 ? (
+        <view className={css.placeholder}>
+          <text className={css.placeholderText}>No network requests yet</text>
+        </view>
+      ) : (
+        <list className={css.list}>
+          {networks.map((network) => (
+            <list-item key={network.id} item-key={network.id}>
+              <view className={css.item({ status: network.status })}>
+                <view
+                  className={css.itemHeader}
+                  bindtap={() =>
+                    setSelectedId(selectedId === network.id ? null : network.id)
+                  }
+                >
+                  <text
+                    className={css.method({
+                      type: network.method as
+                        | "GET"
+                        | "POST"
+                        | "PUT"
+                        | "PATCH"
+                        | "DELETE",
+                    })}
+                  >
+                    {network.method}
+                  </text>
+                  {network.statusCode && (
+                    <text
+                      className={css.statusCode({
+                        type: getStatusCodeVariant(
+                          network.status,
+                          network.statusCode,
+                        ),
+                      })}
+                    >
+                      {network.statusCode}
+                    </text>
+                  )}
+                  {network.status === "pending" && (
+                    <text className={css.statusCode({ type: "pending" })}>
+                      Pending...
+                    </text>
+                  )}
+                  <text className={css.time}>
+                    {formatDuration(network.duration)}
+                  </text>
+                  <text className={css.time}>
+                    {new Date(network.startTime).toISOString()}
+                  </text>
+                </view>
+
+                <text
+                  className={css.path}
+                  bindtap={() =>
+                    setSelectedId(selectedId === network.id ? null : network.id)
+                  }
+                >
+                  {extractPath(network.url)}
+                </text>
+
+                {selectedId === network.id && (
+                  <view className={css.detailsContainer}>
+                    {/* Tabs */}
+                    <view className={css.tabs}>
+                      <view
+                        className={css.tab({ active: activeTab === "general" })}
+                        bindtap={() => setActiveTab("general")}
+                      >
+                        <text
+                          className={css.tabText({
+                            active: activeTab === "general",
+                          })}
+                        >
+                          General
+                        </text>
+                      </view>
+                      <view
+                        className={css.tab({ active: activeTab === "request" })}
+                        bindtap={() => setActiveTab("request")}
+                      >
+                        <text
+                          className={css.tabText({
+                            active: activeTab === "request",
+                          })}
+                        >
+                          Request
+                        </text>
+                      </view>
+                      <view
+                        className={css.tab({
+                          active: activeTab === "response",
+                        })}
+                        bindtap={() => setActiveTab("response")}
+                      >
+                        <text
+                          className={css.tabText({
+                            active: activeTab === "response",
+                          })}
+                        >
+                          Response
+                        </text>
+                      </view>
+                    </view>
+
+                    {/* Tab Content */}
+                    <view className={css.tabContent}>
+                      {activeTab === "general" && (
+                        <view className={css.table}>
+                          {getGeneralInfo(network).map((item) => (
+                            <view key={item.key} className={css.tableRow}>
+                              <text className={css.tableKey}>{item.key}</text>
+                              <text className={css.tableValue}>
+                                {item.value}
+                              </text>
+                            </view>
+                          ))}
+                        </view>
+                      )}
+
+                      {activeTab === "request" && (
+                        <NetworkDetailSection
+                          headers={network.requestHeaders}
+                          body={network.requestBody}
+                        />
+                      )}
+
+                      {activeTab === "response" && (
+                        <NetworkDetailSection
+                          headers={network.responseHeaders}
+                          body={network.responseBody}
+                          error={network.error}
+                        />
+                      )}
+                    </view>
+                  </view>
+                )}
+              </view>
+            </list-item>
+          ))}
+        </list>
+      )}
+    </view>
+  );
+};

package/src/components/PerformancePanel.css.ts

@@ -0,0 +1,224 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { typography } from "../styles/typography";
+import { vars } from "../styles/vars";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  paddingTop: 4,
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 8,
+  paddingBottom: 4,
+  borderBottomWidth: 1,
+  borderBottomColor: vars.$color.stroke.neutralSubtle,
+  borderBottomStyle: "solid",
+});
+
+export const count = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const clearButton = style({
+  padding: "6px 12px",
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 4,
+});
+
+export const clearButtonText = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.neutral,
+});
+
+export const list = style({
+  flex: 1,
+});
+
+export const placeholder = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+});
+
+export const placeholderText = style({
+  ...typography("t4", "regular"),
+  color: vars.$color.fg.disabled,
+});
+
+export const item = style({
+  padding: "8px",
+  borderBottomWidth: 1,
+  borderBottomColor: vars.$color.stroke.neutralWeak,
+  borderBottomStyle: "solid",
+});
+
+export const itemHeader = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  marginBottom: 4,
+  gap: 8,
+});
+
+export const entryType = recipe({
+  base: {
+    ...typography("t2", "bold"),
+    padding: "0 6px",
+    borderRadius: 2,
+    color: vars.$color.fg.neutral,
+    backgroundColor: vars.$color.bg.neutralWeak,
+  },
+  variants: {
+    type: {
+      init: {
+        color: vars.$color.palette.blue600,
+        backgroundColor: vars.$color.palette.blue100,
+      },
+      metric: {
+        color: vars.$color.palette.green600,
+        backgroundColor: vars.$color.palette.green100,
+      },
+      pipeline: {
+        color: vars.$color.palette.purple600,
+        backgroundColor: vars.$color.palette.purple100,
+      },
+      resource: {
+        color: vars.$color.palette.yellow600,
+        backgroundColor: vars.$color.palette.yellow100,
+      },
+    },
+  },
+});
+
+export const entryName = style({
+  ...typography("t2", "medium"),
+  color: vars.$color.fg.neutral,
+});
+
+export const timestamp = style({
+  ...typography("t2", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const fcpMetricHeader = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 8,
+});
+
+export const fcpHighlight = style({
+  ...typography("t3", "bold"),
+  color: vars.$color.palette.blue600,
+  backgroundColor: vars.$color.palette.blue100,
+  padding: "4px 8px",
+  borderRadius: 4,
+  marginTop: 4,
+});
+
+export const metrics = style({
+  marginTop: 8,
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+});
+
+export const metric = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 8,
+  padding: "4px 8px",
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 2,
+});
+
+export const metricName = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.neutralSubtle,
+  minWidth: 100,
+  flexShrink: 0,
+});
+
+export const metricValue = style({
+  ...typography("t3", "bold"),
+  color: vars.$color.palette.green600,
+  flex: 1,
+});
+
+export const detailsContainer = style({
+  marginTop: 12,
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+});
+
+export const fcpSection = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+});
+
+export const fcpSectionDescription = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+  marginBottom: 4,
+});
+
+export const fcpMetric = style({
+  backgroundColor: vars.$color.bg.layerDefault,
+  borderRadius: 4,
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+});
+
+export const fcpMetricName = style({
+  ...typography("t2", "bold"),
+  color: vars.$color.fg.neutral,
+});
+
+export const fcpMetricValue = style({
+  ...typography("t1", "bold"),
+  color: vars.$color.palette.blue600,
+});
+
+export const fcpMetricDescription = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const fcpMetricFormula = style({
+  ...typography("t4", "regular"),
+  color: vars.$color.fg.disabled,
+  fontFamily: "monospace",
+});
+
+export const rawEntrySection = style({
+  padding: 12,
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 4,
+});
+
+export const detailTitle = style({
+  ...typography("t3", "bold"),
+  color: vars.$color.fg.neutral,
+  marginBottom: 8,
+});
+
+export const rawEntry = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+  fontFamily: "monospace",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-all",
+});

package/src/components/PerformancePanel.tsx

@@ -0,0 +1,209 @@
+import { useState } from "@lynx-js/react";
+import { stringify } from "javascript-stringify";
+import type { PerformanceEntryData } from "../types";
+import * as css from "./PerformancePanel.css";
+
+interface PerformancePanelProps {
+  performances: PerformanceEntryData[];
+  clearPerformances: () => void;
+}
+
+interface FcpMetric {
+  name: string;
+  duration: number;
+}
+
+interface MetricFcpEntry {
+  totalFcp?: FcpMetric;
+  lynxFcp?: FcpMetric;
+  fcp?: FcpMetric;
+}
+
+const isMetricFcpEntry = (entry: PerformanceEntryData): boolean => {
+  return entry.entryType === "metric" && entry.name === "fcp";
+};
+
+const extractFcpMetrics = (entry: PerformanceEntryData) => {
+  if (!isMetricFcpEntry(entry) || !entry.rawEntry) {
+    return null;
+  }
+
+  const metricEntry = entry.rawEntry as MetricFcpEntry;
+
+  return {
+    totalFcp: metricEntry.totalFcp ?? undefined,
+    lynxFcp: metricEntry.lynxFcp ?? undefined,
+    fcp: metricEntry.fcp ?? undefined,
+  };
+};
+
+const formatDuration = (ms?: number): string => {
+  if (ms === undefined) return "-";
+  return `${ms.toFixed(2)}ms`;
+};
+
+const getPrimaryFcpLabel = (entry: PerformanceEntryData): string => {
+  const fcpMetrics = extractFcpMetrics(entry);
+  if (!fcpMetrics) return "";
+
+  const { totalFcp, lynxFcp, fcp } = fcpMetrics;
+
+  if (totalFcp?.duration !== undefined) {
+    return `totalFcp: ${formatDuration(totalFcp.duration)}`;
+  }
+  if (lynxFcp?.duration !== undefined) {
+    return `lynxFcp: ${formatDuration(lynxFcp.duration)}`;
+  }
+  if (fcp?.duration !== undefined) {
+    return `fcp: ${formatDuration(fcp.duration)}`;
+  }
+  return "";
+};
+
+export const PerformancePanel = ({
+  performances,
+  clearPerformances,
+}: PerformancePanelProps) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  if (performances.length === 0) {
+    return (
+      <view className={css.container}>
+        <view className={css.header}>
+          <text className={css.count}>0 entries</text>
+          <view
+            bindtap={() => {
+              console.log("[PerformancePanel] performances", performances);
+            }}
+            style={{ padding: "10px", backgroundColor: "red" }}
+          >
+            <text>Log</text>
+          </view>
+          <view bindtap={clearPerformances} className={css.clearButton}>
+            <text className={css.clearButtonText}>Clear</text>
+          </view>
+        </view>
+        <view className={css.placeholder}>
+          <text className={css.placeholderText}>
+            No performance data yet...
+          </text>
+        </view>
+      </view>
+    );
+  }
+
+  return (
+    <view className={css.container}>
+      <view className={css.header}>
+        <text className={css.count}>{performances.length} entries</text>
+        <view bindtap={clearPerformances} className={css.clearButton}>
+          <text className={css.clearButtonText}>Clear</text>
+        </view>
+      </view>
+
+      <list className={css.list}>
+        {performances.map((perf) => {
+          const isMetricFcp = isMetricFcpEntry(perf);
+          const fcpMetrics = extractFcpMetrics(perf);
+          const primaryFcp = getPrimaryFcpLabel(perf);
+          const { totalFcp, lynxFcp, fcp } = fcpMetrics ?? {};
+
+          return (
+            <list-item key={perf.id} item-key={perf.id}>
+              <view className={css.item}>
+                <view
+                  className={css.itemHeader}
+                  bindtap={() =>
+                    setSelectedId(selectedId === perf.id ? null : perf.id)
+                  }
+                >
+                  <text className={css.entryType({ type: perf.entryType })}>
+                    {perf.entryType}
+                  </text>
+                  <text className={css.entryName}>{perf.name}</text>
+                  <text className={css.timestamp}>
+                    {new Date(perf.timestamp).toISOString()}
+                  </text>
+                </view>
+
+                <view
+                  bindtap={() =>
+                    setSelectedId(selectedId === perf.id ? null : perf.id)
+                  }
+                >
+                  {isMetricFcp && primaryFcp && (
+                    <text className={css.fcpHighlight}>{primaryFcp}</text>
+                  )}
+                </view>
+
+                {selectedId === perf.id && (
+                  <view className={css.detailsContainer}>
+                    {isMetricFcp && fcpMetrics && (
+                      <view className={css.fcpSection}>
+                        {totalFcp !== undefined && (
+                          <view className={css.fcpMetric}>
+                            <view className={css.fcpMetricHeader}>
+                              <text className={css.fcpMetricName}>
+                                전체 FCP
+                              </text>
+                              <text className={css.fcpMetricValue}>
+                                {formatDuration(totalFcp.duration)}
+                              </text>
+                            </view>
+                            <text className={css.fcpMetricDescription}>
+                              PrepareTemplate Start부터 Paint End 까지 걸리는
+                              시간
+                            </text>
+                          </view>
+                        )}
+
+                        {lynxFcp !== undefined && (
+                          <view className={css.fcpMetric}>
+                            <view className={css.fcpMetricHeader}>
+                              <text className={css.fcpMetricName}>LynxFCP</text>
+                              <text className={css.fcpMetricValue}>
+                                {formatDuration(lynxFcp.duration)}
+                              </text>
+                            </view>
+                            <text className={css.fcpMetricDescription}>
+                              Bundle Load 시작부터 Paint End 까지 걸리는 시간
+                            </text>
+                          </view>
+                        )}
+
+                        {fcp !== undefined && (
+                          <view className={css.fcpMetric}>
+                            <view className={css.fcpMetricHeader}>
+                              <text className={css.fcpMetricName}>
+                                렌더링 FCP
+                              </text>
+                              <text className={css.fcpMetricValue}>
+                                {formatDuration(fcp.duration)}
+                              </text>
+                            </view>
+                            <text className={css.fcpMetricDescription}>
+                              TemplateBundle 준비부터 Paint End 까지 걸리는 시간
+                            </text>
+                          </view>
+                        )}
+                      </view>
+                    )}
+
+                    {!!perf.rawEntry && (
+                      <view className={css.rawEntrySection}>
+                        <text className={css.detailTitle}>Raw Entry</text>
+                        <text className={css.rawEntry}>
+                          {String(stringify(perf.rawEntry, null, 2, { references: true }))}
+                        </text>
+                      </view>
+                    )}
+                  </view>
+                )}
+              </view>
+            </list-item>
+          );
+        })}
+      </list>
+    </view>
+  );
+};