feat(instructions): add implementation field and update specification JSON

src/features/spec/tvm-specification.types.ts

@@ -23,6 +23,14 @@ export interface Instruction {
   readonly effects?: Effect[]
   readonly operands?: string[]
   readonly control_flow?: ControlFlowOfInstruction
+  readonly implementation?: ImplementationInfo
+}
+
+export interface ImplementationInfo {
+  readonly commit_hash: string
+  readonly file_path: string
+  readonly line_number: number
+  readonly function_name: string
 }
 
 export interface GasConsumptionEntry {
@@ -34,6 +42,7 @@ export enum Category {
   Arithmetic = "arithmetic",
   Cell = "cell",
   Continuation = "continuation",
+  Stack = "stack",
 }
 
 export enum SubCategory {

src/pages/InstructionsPage/components/InstructionTable/InlineOperand.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import {Bits, type Child, type Instruction} from "@features/spec/tvm-specification.types"
+import {ArgsEnum, Bits, type Child, type Instruction} from "@features/spec/tvm-specification.types"
 
 import {Tooltip} from "@shared/ui/Tooltip/Tooltip"
 
@@ -9,11 +9,18 @@ import styles from "./InlineOperand.module.css"
 import {renderArgsTreeCompactForOperand} from "./operands.tsx"
 
 interface InlineOperandProps {
+  readonly instructionName: string
   readonly instruction: Instruction
   readonly operandIndex: number
+  readonly inDetails: boolean
 }
 
-const InlineOperand: React.FC<InlineOperandProps> = ({instruction, operandIndex}) => {
+const InlineOperand: React.FC<InlineOperandProps> = ({
+  instructionName,
+  instruction,
+  operandIndex,
+  inDetails,
+}) => {
   const {description, layout} = instruction
   const operands = instruction.operands ?? description.operands
   if (!operands || operandIndex < 0 || operandIndex >= operands.length) return null
@@ -30,14 +37,18 @@ const InlineOperand: React.FC<InlineOperandProps> = ({instruction, operandIndex}
 
   const layoutChildren = layout.args.children?.[operandIndex]
   const isControl = isType(layoutChildren, "control")
-  const isStack = isType(layoutChildren, "stack") || layoutChildren?.$ === "s1"
+  const isStack =
+    layout.args.$ === ArgsEnum.XchgArgs ||
+    isType(layoutChildren, "stack") ||
+    layoutChildren?.$ === "s1"
 
   const operandPresentation = isControl ? `c(${name})` : isStack ? `s(${name})` : `[${name}]`
 
   const tooltip = renderArgsTreeCompactForOperand(layout.args, name, operandIndex)
+  const tooltipPlacement = inDetails && instructionName.length < 8 ? "right" : "bottom"
 
   return (
-    <Tooltip content={tooltip} placement="bottom">
+    <Tooltip content={tooltip} placement={tooltipPlacement}>
       <span className={styles.inlineOperand}>{operandPresentation}</span>
     </Tooltip>
   )

src/pages/InstructionsPage/components/InstructionTable/InstructionDetail.module.css

@@ -221,6 +221,12 @@
   }
 }
 
+.implementationLink {
+  color: var(--color-link);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+}
+
 @media (width <= 768px) {
   .implementationsGridContainer {
     grid-template-columns: 1fr;

src/pages/InstructionsPage/components/InstructionTable/InstructionDetail.tsx

@@ -74,7 +74,13 @@ const InstructionDetail: React.FC<InstructionDetailProps> = ({
             {displayedOperands && displayedOperands.length > 0 && (
               <span className={styles.operandsDisplay}>
                 {displayedOperands.map((_, idx) => (
-                  <InlineOperand key={idx} instruction={instruction} operandIndex={idx} />
+                  <InlineOperand
+                    key={idx}
+                    instructionName={instructionName}
+                    instruction={instruction}
+                    operandIndex={idx}
+                    inDetails={true}
+                  />
                 ))}
               </span>
             )}
@@ -86,6 +92,7 @@ const InstructionDetail: React.FC<InstructionDetailProps> = ({
               <span className={styles.metadataLabel}>Since Version:</span>
               <span className={styles.metadataValue}>{version}</span>
             </div>
+
             <div className={styles.metadataItem}>
               <span className={styles.metadataLabel}>Category:</span>
               <span className={styles.metadataValue}>{prettySubCategoryName(category)}</span>
@@ -95,6 +102,23 @@ const InstructionDetail: React.FC<InstructionDetailProps> = ({
               <span className={styles.metadataValue}>{formattedGas}</span>
             </div>
 
+            {instruction.implementation && (
+              <div className={styles.metadataItem}>
+                <span className={styles.metadataLabel}>Implementation:</span>
+                <span className={styles.metadataValue}>
+                  <a
+                    href={`https://github.com/ton-blockchain/ton/blob/${instruction.implementation.commit_hash}/${instruction.implementation.file_path}#L${instruction.implementation.line_number}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.implementationLink}
+                  >
+                    {instruction.implementation.file_path.split("/").pop()}:
+                    {instruction.implementation.line_number}
+                  </a>
+                </span>
+              </div>
+            )}
+
             {inputRegisters.length > 0 && (
               <div className={styles.metadataItem}>
                 <span className={styles.metadataLabel}>Read registers:</span>

src/pages/InstructionsPage/components/InstructionTable/InstructionTable.tsx

@@ -154,7 +154,13 @@ const InstructionTable: React.FC<InstructionTableProps> = ({
                   {displayedOperands && displayedOperands.length > 0 && (
                     <span className={styles.operandsDisplay}>
                       {displayedOperands.map((_, opIdx) => (
-                        <InlineOperand key={opIdx} instruction={instruction} operandIndex={opIdx} />
+                        <InlineOperand
+                          instructionName={instructionName}
+                          key={opIdx}
+                          instruction={instruction}
+                          operandIndex={opIdx}
+                          inDetails={false}
+                        />
                       ))}
                     </span>
                   )}

src/pages/InstructionsPage/components/InstructionTable/operands.tsx

@@ -38,6 +38,8 @@ export function childType(child: Child) {
       return `${argType(child.arg)} + ${child.delta}`
     case "debugstr":
       return "String slice"
+    case "dictpush":
+      return "Dictionary"
     default:
       return undefined
   }

src/shared/ui/Tooltip/Tooltip.module.css

@@ -68,6 +68,17 @@
   border-left: none;
 }
 
+.tooltip.right::before {
+  top: 50%;
+  left: -9px;
+  margin-left: 0;
+  margin-top: -9px;
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-left: none;
+}
+
 .tooltipPositioned {
   position: fixed;
   padding: var(--spacing-md);

src/shared/ui/Tooltip/Tooltip.tsx

@@ -9,7 +9,7 @@ interface TooltipProps {
   readonly variant?: "hover" | "positioned"
   readonly position?: {x: number; y: number}
   readonly enableMarkdown?: boolean
-  readonly placement?: "top" | "bottom"
+  readonly placement?: "top" | "bottom" | "right"
   readonly className?: string
 }
 
@@ -47,6 +47,7 @@ export function Tooltip({
 
   const tooltipClassName = useMemo(() => {
     if (placement === "bottom") return `${styles.tooltip} ${styles.bottom}`
+    if (placement === "right") return `${styles.tooltip} ${styles.right}`
     return styles.tooltip
   }, [placement])